02、vue常用指令

vue官网

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

常用指令

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

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

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

以上的输出结果为

image.png

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

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

以上两种写法是一样的。

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


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

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

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


...


...

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


Message is: {{ message }}

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

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

现在你看到我了

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