前端框架-Vue.js—笔记(二)

——接上篇

三、Vue中常用的指令(Directives)

      带特殊前缀的 HTML 特性，可以让 Vue.js 对一个 DOM 元素做各种处理。比如：；这里的 div 元素有一个 v-text 指令，其值为 message；Vue.js 会让该 div 的文本内容与 Vue 实例中的 message 属性值保持一致。

      Directives 可以封装任何 DOM 操作。比如 v-attr 会操作一个元素的特性；v-repeat 会基于数组来复制一个元素；v-on会绑定事件等。

      Vue.js提供了不少常用的内置指令，接下来我们快速搞定它们，这对我们接下来的开发帮助很大。主要有：

v-once指令
v-if指令
v-show指令
v-else指令
v-for指令
v-on指令
v-bind指令
v-text指令
v-html指令

如果需要了解其它指令，可以进入官网: https://cn.vuejs.org/v2/api/#v-text

3.1  v-once指令
执行一次性地插值，当数据改变时，插值处的内容不会更新。

3.2  v-if指令

   条件渲染指令，根据表达式的真假来添加或删除元素。其语法结构是：v-if="expression"，其中expression是一个返回bool值的表达式，其结果可以是true或false，也可以是返回true或false的表达式。

代码如下：

运行结果：

在上述案例中，Vue.js进行数据绑定也完全支持JavaScript表达式支持，这些表达式会在Vue实例的数据作用域下作为JavaScript被解析。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

有个限制就是，每个绑定都只能包含单个表达式，以下则不会生效：

{{ var a = 1 }}

{{ if (ok) { return message } }}

3.3  v-show指令

   也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

代码如下：

运行结果：

v-show和v-if的区别：

   v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件；v-show 则只是简单地基于 CSS 切换。

   v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

3.4  v-else指令

   可以用v-else指令为v-if或v-show添加一个“else块”。注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

代码如下：
（1）v-if和v-else结合

（2）v-else-if 和 v-else 结合