參考地址：https://zhuanlan.zhihu.com/hacker-cafe
作者：留白
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
v-bind縮寫
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
v-text
直接把文字綁定到html北发；
如果數(shù)據(jù)是純字符串也可以使用贺归；
綁定其它類型的數(shù)據(jù)泽裳，它們會(huì)以字符串的形式輸出蜕企；
<body>
<div id="app">
<h1 v-text="info"></h1>
<h1>{{info}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var data = {
info:'hello vue'
}
var app = new Vue({
el:"#app",
data:data
})
</script>
</body>
v-text
v-html
相當(dāng)于JQuery的html方法，把數(shù)據(jù)中的html字符串嵌入到目標(biāo)元素。
<div id="app">
<p>Hello World</p>
<p v-html="dom"></p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
dom:'<b>使用v-html渲染</b>'
}
});
</script>
image.png
v-if/v-else-if/v-else
在html中進(jìn)行狀態(tài)控制的快捷指令；
使用這三個(gè)指令時(shí)入热，vue只會(huì)生成判定為true的那個(gè)節(jié)點(diǎn)；
示例：假設(shè)status可能會(huì)返回'loading'晓铆，'ready'勺良，'fail'三者之一，頁面根據(jù)這個(gè)字段顯示不同內(nèi)容骄噪；
<div id="app">
<div v-if="status === 'loading'">
<div>Loading</div>
</div>
<div v-else-if="status === 'ready'">
<div>Ready</div>
</div>
<div v-else>
<div>Fail</div>
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
status:'loading'
}
});
</script>
image.png
image.png
image.png
image.png
v-show
根據(jù)布爾值決定目標(biāo)元素的css display值尚困；
showHeader可以賦值為其他東西，但是最后都會(huì)轉(zhuǎn)換為布爾值來決定目標(biāo)元素是否顯示链蕊；
<div id="app">
<h1 v-show='showHeader'>{{info}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
info:'你好',
showHeader:true
}
});
</script>
image.png
image.png
image.png
v-show —— 只改變元素的class
v-if —— 會(huì)決定是否生成這個(gè)dom節(jié)點(diǎn)
v-once
只根據(jù)數(shù)據(jù)渲染一次事甜，往后改變數(shù)據(jù)，目標(biāo)元素不再重新渲染滔韵；
示例：用v-text和v-once進(jìn)行對比
<div id="app">
<h1 v-once>v-once:{{once}}</h1>
<div v-text = "once"></div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
once:'只渲染一次'
}
});
</script>
image.png
image.png
