1-3 vue指令 v-once

vue指令 v-once

Vue中常用的指令(Directives)

• Vue指令 : 带特殊前缀的 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指令

  如果需要了解其它指令，可以进入官网: Vue.js指令

  
  

1.v-once

• v-once指令:只渲染元素和组件一次, 这可以用优化更新性能. 执行一次性地插值，当数据改变时，插值处的内容不会更新。

    
{{message}}
    
    
{{message}}

2.v-if

• v-if指令 条件渲染指令，根据表达式的真假来添加或删除元素。

  • 其语法结构是：v-if="expression"，其中expression是一个返回bool值的表达式，其结果可以是true或false，也可以是返回true或false的表达式。

  • 代码如下：

  
  
  
      
      
  
  
     
  
         
  显示!
         
  不显示!
         
  身高:{{height}}米
         
  名称:{{name}}
     
  
  
  
  
  

  • 我们也可以打开控制台，做出如下输入，进一步体会数据驱动思想：

vuea8.png

• 元素渲染情况：

vuea9.png

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

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

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

{{ var a = 1 }}

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