模板语法（插值表达式）
数据绑定的最常见的形式是文本插值 {{ }}
插值表达式
运行图
指令
指令的作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM，一些指令能够接收一个参数，在指令名称之后以（ : ）形式去表示
v-bind
动态地绑定一个或多个属性，或一个组件prop到表达式
v-bind缩写为 ‘ ：’
在绑定prop时，prop必须在子组件中声明
可以用修饰符指定不同地绑定类型
v-bind
data属性
data必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次的数据。
data属性
v-for
通过v-for来遍历一个对象的property，可以循环一个数组，也可以是遍历一个对象，第一个参数value是被迭代的数组元素的别名，第二个参数为property名称（也称键名），第三个参数作为索引
v-for
v-for运行结果
key
当vue正在更新使用v-for渲染的元素列表时，默认使用“就地更新”的策略，如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保他们在每个索引位置正确渲染。
当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供:key，就会报一个warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
计算属性computed
每一个计算属性都包含getter和一个setter，默认是利用getter来读取，所有getter和setter的this上下文自动地绑定vue实例
计算属性地getter
在模板中绑定表达式是非常便利地，但是它们实际上只用于简单地操作，在模板中放入太多地逻辑会让模板过重且难以维护，所以，对于任何复杂地逻辑，都应当使用计算属性。
字符串反转
运行结果
v-text和v-html
v-html: 等价于innerHtml, 更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
v-text: 等价于innerText, 用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。
v-text和v-html
运行效果图
v-if与v-else
v-if 指令将根据表达式 isShow的值(true 或 false )来决定是否显示h4 元素。
v-if根据表达式的值的truthiness来条件地渲染元素，通过创建或销毁元素节点，来达到元素地显示与隐藏。
v-if与v-else
滑动前
滑动后
v-show
v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
v-on
绑定事件监听器
v-on
运行效果图
v-model
在表单控件或者组件上创建双向绑定
v-model
v-model初始值
v-model更改后的值
v-pre
跳过这个元素和它的子元素的编译过程
v-cloak
这个指令保持在元素上直到关联实例结束编译
网友评论