1.渲染数据
- 插值表达式
// 渲染数据
{{ msg }}
// 数字计算
{{ 1 + 1 }}
// 解析函数
{{ getData() }}
// 三元运算符
{{ flag ? '显示' : '隐藏' }}
- 解决插值表达式的页面闪烁问题
// 方式1 使用 v-text 代替 插值表达式
// 方式2 使用 v-cloak 配置显示隐藏的样式
- v-html
- v-text
- v-pre
2.属性绑定
- class 样式绑定
__ v-bind -string
v-bind:属性名称 = "属性值"
简写: :属性名称 = "属性值"
__ v-bind -普通数组
:class="['class1', 'class2', 'class3']"
__ v-bind -数组三元
:class="['class1', flag ? 'class2': '']"
__ v-bind -数组对象
:class="['class3', {class1: flag}, {class2: true}]"
__ v-bind -普通对象
:class="{class1: true, class2: false}"
- style 样式绑定
__ object
:style="obj"
__ array
:style="[obj1, obj2]"
- v-model 双向数据绑定
__ 数据流
单向数据绑定
model 改变， view 跟着改变，反之不能改变
双向数据绑定
model 改变， view 跟着改变，反之亦然
__ 小结
v-model 是 vue 中唯一1个可以使用双向数据绑定的指令，可以用在表单和组件
v-model 原理
1.使用 v-bind 绑定数据
2.使用 v-on 绑定监听的函数如果数据发生改变重新赋值最新的数据
3.事件绑定
v-on:事件类型="事件处理函数"
简写: @事件类型="事件处理函数"
- 事件修饰符
__ stop 阻止冒泡
__ prevent 阻止默认行为
__ once 只阻止次，跟随其他修饰符一起使用
- 按键修饰符
__enter
4.列表渲染
// arr / arrObj
v-for = "(item, index) in 数据"
// obj
v-for = "(value, key, index) in 数据"
// 数字
v-for = "(item, index) in 数字" // item 从1开始 到指定的数据
- v-for 为什么和 key 一起使用
__ 给指定的标签添加唯一标识，防止页面在重新绘制的时候发生错乱
__ 确保 model 的值和 view 的值保持一致
key 可以是唯一的 string / number
key 使用 index 时，在unshift 的情况下会不断修改
5.条件渲染
v-if / v-else-if / v-else / v-show
- v-if 和 v-show 的区别
__ v-if 通过 js 操作 dom 元素的添加删除
__ v-show 通过 css 控制 元素的显示和隐藏
- 使用场景
__ v-if 逻辑判断 或 少量 dom 操作
__ v-show 用于频繁的点击操作
