02、vue常用指令

vue官网

在vue中，指令 (Directives) 是带有 v- 前缀的特殊属性，指令属性的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。本文内容是对官网文档的一个概括总结，更详细的内容请查看官网API。

常用指令

v-html

为了输出真正的html，而不是普通的字符串文本，可以使用 v-html 指令。

//假设 rawHtml  = ‘This should be red’

Using mustaches: {{ rawHtml }}
Using v-html directive: 

以上的输出结果为

image.png

v-bind

v-bind可用于动态地绑定一个或多个特性，或一个组件 prop 到表达式，常见用法如下：

因为 v-bind 指令太常用，所以为它设计了一个缩写

以上两种写法是一样的。

v-on

v-on 指令用于 监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

  Add 1
  
The button above has been clicked {{ counter }} times.

在点击 按钮的时候， 会执行 counter += 1这段代码。
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称

  
  Greet

以上代码中，每次点击 按钮的时候，将执行 greet 方法。
同样的，因为 v-on 指令太常用，所以为它设计了一个缩写

...


...

v-model

在表单控件或者组件上创建双向绑定，为了方便表单处理 。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

Message is: {{ message }}

以上代码可以实现以下效果：随着用户的输入，p标签上的内容自动更新。很像是 AngularJS中的 ng-model 指令。

条件渲染指令

v-if

v-if 指令将根据表达式的值的真假来插入/移除 元素。注意这里是真正的根据条件来渲染或是不渲染元素，不是简单的隐藏元素。与之对比的有一个 v-show指令，稍后介绍。

现在你看到我了

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。
因为 v-if 是一个指令，所以必须将它添加到一个元素上，如果想要通过 v-if 控制多个 元素的渲染，可以使用