Vue常用指令（完结版）

模板语法（插值表达式）

---

数据绑定的最常见的形式是文本插值  {{  }}

插值表达式

运行图

指令

---

指令的作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于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

这个指令保持在元素上直到关联实例结束编译