1.vue是一个用于构建用户界面的渐进式框架
构建用户界面：基于数据动态渲染页面
渐进式：循序渐进
框架：一套完整的项目解决方案
vue使用方式：1.vue核心包开发——场景： 局部，模块改造 2.vue核心包&vue插件，工程化开发——场景：整站，开发
优点：大大提升开发效率 缺点：需要理解记忆规则——>官网
2.vue实例：
创建vue实例，初始化渲染
1.准备容器
2.引包(开发版本包 / 生产版本包) 官网
3.创建实例
4.添加配置项=>完成渲染
vue官网：v2.cn.vuejs.org
3.插值表达式: {{ }}
是一种 Vue 的模板语法
1.作用: 利用表达式进行插值, 渲染到页面中 表达式: 是可以被求值的代码, js引擎会将其计算出一个结果
2.语法: {{ 表达式 }}
注意: 使用语句必须存在 支持的是表达式, 而非语句 不能在标签属性中使用{{ }}来插值
4.Vue 核心特性: 响应式
比如: 数据的响应式处理-->响应式: 数据变化, 视图自动更新
5.Vue指令
Vue会根据不同的 指令 , 针对标签实现不同的 功能
1.指令: 带有v- 前缀的特殊 标签属性 v-html : 设置元素的innerHTML--语法 : v-html="表达式"
6.v-show vs v-if
1.v-show
作用 : 控制元素显示隐藏
语法 : v-show = "表达式" 表达式值 true 显示, false 隐藏
原理 : 切换 css 的 display: none 来控制显示隐藏
场景 : 频繁切换显示隐藏的场景
2.v-if
作用 : 控制元素显示隐藏 ( 条件渲染 )
语法 : v-if = "表达式" 表达式值 true 显示, false 隐藏
原理 : 根据 判断条件 控制元素的 创建 和 移除
场景 : 要么显示 , 要么隐藏 , 不频繁切换的场景
7.v-on
作用 : 注册事件 = 添加监听 + 提供处理逻辑
语法 :
1.v-on:事件名 = "内联语句"
2.v-on:事件名 = "methods中的函数名" 可传参数
简写 : @事件名
8.v-bind
作用 : 动态的设置html的标签属性
语法 : v-bind:属性名="表达式"
8.v-for
作用 : 基于数据循环 , 多次渲染整个元素
遍历数组语法 : v-for="(item, index)" in 数组
v-for中的key
作用 : 给列表项添加的唯一标识 , 便于Vue
9.v-mode
作用 : 给表单元素使用 , 双向数据绑定 可快速 获取 或 设置 表单元素内容
数据变化--->视图自动更新 视图变化--->数据自动更新
