vue指令 v-once
Vue中常用的指令(Directives)
Vue指令 : 带特殊前缀的 HTML 特性，可以让 Vue.js 对一个 DOM 元素做各种处理。比如：
<div v-text="message"></div>；这里的 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
- <strong>v-once指令</strong>:只渲染元素和组件一次, 这可以用优化更新性能. 执行一次性地插值，当数据改变时，插值处的内容不会更新。
<body>
<div id="app">
<h2>{{message}}</h2>
<!--
v-once : 只渲染元素和组件一次, 这可以用优化更新性能
执行一次性插值指令,当改变数据时,插值处的内容不会更新
-->
<h2 v-once>{{message}}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:'明天sk也是一样的666!'
}
})
</script>
2.v-if
-
<strong>v-if指令</strong> 条件渲染指令，根据表达式的真假来添加或删除元素。
其语法结构是：
v-if="expression"，其中expression是一个返回bool值的表达式，其结果可以是true或false，也可以是返回true或false的表达式。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if</title> </head> <body> <div id="app"> <p v-if="show">显示!</p> <p v-if="hide">不显示!</p> <p v-if="height >= 1.6">身高:{{height}}米</p> <p v-if="name == '小码哥教育'">名称:{{name}}</p> </div> </body> <script src="js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { show: true, hide: false, height: 1.70, name: '小码哥教育' } }) </script> </html>- 我们也可以打开控制台，做出如下输入，进一步体会数据驱动思想：
vuea8.png
- 元素渲染情况：
vuea9.png
在上述案例中，Vue.js进行数据绑定也完全支持JavaScript表达式支持，这些表达式会在Vue实例的数据作用域下作为JavaScript被解析。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
有个限制就是，每个绑定都只能包含单个表达式，以下则不会生效：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
