vue 指令

1.模板语法

使用双花括号( {{}} )对变量输出,内部可以写简单的表达式用于对数据的处理

一个花括号中只能输出一个变量

{{text}}

2.v-text

相当于js的innerText,

<div v-text = "text"></div>

3.v-html

相当于js的innerHTML

<div v-html = "text"></div>

4.v-bind

动态绑定属性,简写是冒号( : )

<div :style = "text"></div>

5.v-on

绑定事件,简写是@

<div :style = "text" @click = "bc()"></div>

6.v-model

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

<div :style = "text" v-model = "val"></div>

7.v-if  v-else-if v-else

v-if:条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy[1] 值的时候被渲染。

v-else、v-else-if:是跟js中的if一样,v-if的else块和else-if块

8.v-show

根据条件展示元素, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

当条件达成，为true时触发

9.v-for

渲染数组列表, v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

<div :style = "text" v-for = "(item,index) in arr"></div>

10. v-pre

原样输出，不解析模板标签{{}}

11.v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

12.v-once

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。