- 指令是帶有前綴 v-拼弃，以表示它們是 Vue 提供的特殊特性髓需。它們會在渲染的 DOM 上應(yīng)用特殊的響應(yīng)式行為
- 本文介紹5個指令的用法缝裤，他們分別是
v-bind、v-if铜靶、v-for叔遂、v-on、v-model
1.v-bind指令
- 示例代碼
<div id="app">
<span v-bind:title="vbind">
span的title屬性有值争剿，鼠標(biāo)移過來能看見已艰！
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
vbind:"看到了吧"
}
})
</script>
該指令的意思是：“將這個元素節(jié)點的 title 特性和 Vue 實例的 message 屬性保持一致”
注意:span 元素的title屬性特點是：鼠標(biāo)停留在上面就會顯示出來
-
效果
image.png
2.v-if、v-for條件與循環(huán)指令
-
v-if
代碼
<div id="app">
<span v-bind:title="vbind">
span的title屬性有值秒梅，鼠標(biāo)移過來能看見旗芬！
</span>
<p v-if="vif">現(xiàn)在你看到我了</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
vbind:"看到了吧",
vif:true
}
})
</script>
效果
image.png
注意:如果vif值沒有定義舌胶，將不會顯示捆蜀，控制臺會報異常vif找不到
- v-for
<div id="app">
<span v-bind:title="vbind">
span的title屬性有值，鼠標(biāo)移過來能看見幔嫂！
</span>
<p v-if="vif">現(xiàn)在你看到我了</p>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
vbind:"看到了吧",
vif:false,
todos: [
{ text: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue' },
{ text: '整個牛項目' }
]
}
})
</script>
效果
image.png
3.v-on 指令-添加事件監(jiān)聽器
- 點擊事件
v-on:click="方法名"
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉(zhuǎn)消息</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message:"上 海 辆它！"
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
效果
image.png
4.v-model - 實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉(zhuǎn)消息</button>
<input v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message:"上 海 ！"
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
效果
image.png
vue應(yīng)用的
message的值會跟隨輸入的值變化而變化,初始化的時候input的值也被vue應(yīng)用的message賦值履恩，實現(xiàn)雙向綁定
5.其他指令
- v-html
該指令可以把demohtml變量數(shù)據(jù)解析成html
<p v-html="demohtml"></p>
