vue指令 v-once
Vue中常用的指令(Directives)
Vue指令 : 帶特殊前綴的 HTML 特性，可以讓 Vue.js 對(duì)一個(gè) DOM 元素做各種處理。比如：
<div v-text="message"></div>；這里的 div 元素有一個(gè) v-text 指令，其值為 message；Vue.js 會(huì)讓該 div 的文本內(nèi)容與 Vue 實(shí)例中的 message 屬性值保持一致。Directives 可以封裝任何 DOM 操作。比如 v-attr 會(huì)操作一個(gè)元素的特性；v-repeat 會(huì)基于數(shù)組來復(fù)制一個(gè)元素；v-on會(huì)綁定事件等。
-
Vue.js提供了不少常用的內(nèi)置指令，接下來我們快速搞定它們，這對(duì)我們接下來的開發(fā)幫助很大。主要有：
v-once指令
v-if指令
v-show指令
v-else指令
v-for指令
v-on指令
v-bind指令
如果需要了解其它指令，可以進(jìn)入官網(wǎng): Vue.js指令
1.v-once
- <strong>v-once指令</strong>:只渲染元素和組件一次, 這可以用優(yōu)化更新性能. 執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。
<body>
<div id="app">
<h2>{{message}}</h2>
<!--
v-once : 只渲染元素和組件一次, 這可以用優(yōu)化更新性能
執(zhí)行一次性插值指令,當(dāng)改變數(shù)據(jù)時(shí),插值處的內(nèi)容不會(huì)更新
-->
<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> 條件渲染指令，根據(jù)表達(dá)式的真假來添加或刪除元素。
其語法結(jié)構(gòu)是：
v-if="expression"，其中expression是一個(gè)返回bool值的表達(dá)式，其結(jié)果可以是true或false，也可以是返回true或false的表達(dá)式。代碼如下：
<!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>- 我們也可以打開控制臺(tái)，做出如下輸入，進(jìn)一步體會(huì)數(shù)據(jù)驅(qū)動(dòng)思想：
- 元素渲染情況：
在上述案例中，Vue.js進(jìn)行數(shù)據(jù)綁定也完全支持JavaScript表達(dá)式支持，這些表達(dá)式會(huì)在Vue實(shí)例的數(shù)據(jù)作用域下作為JavaScript被解析。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
有個(gè)限制就是，每個(gè)綁定都只能包含單個(gè)表達(dá)式，以下則不會(huì)生效：
<!-- 這是語句，不是表達(dá)式 -->
{{ var a = 1 }}
<!-- 流控制也不會(huì)生效，請(qǐng)使用三元表達(dá)式 -->
{{ if (ok) { return message } }}
