指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
简单指令
v-if 条件指令，绑定值为真时构建DOM,假时bu构建或者删除已存在DOM1
2
3
4
5
6
7
8
9
10<p v-if="seen">现在你看到我了</p>
export default {
name: 'vpc',
data () {
return {
seen: true
}
}
}
v-for 循环指令，根据绑定值，循环输出DOM元素1
2
3
4<div v-for="(item, index) in modalFooter">
<button @click="customFunc(item.Func)" type="button" class="btn btn-primary" v-if='item.name'>{{item.name}}</button>
</div>
//根据数据modalFooter数组循环出多个数组
v-on 监听 DOM 事件的指令,触发事件的回调函数放在method中，可以简写成‘@事件名’1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
//或者 <button @click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
v-model 双向绑定指令,绑定的值在页面更改后js可以及时更改，js改变该值后,页面能马上渲染响应1
2
3
4
5
6
7
8
9
10
11<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
v-bind 绑定HTML标签属性,响应式地更新 HTML 特性 缩写形式” :属性名=’响应函数名’ “1
2
3
4
5
6
7
8
9
10
11
12
13
14<div id="app-2">
<span v-bind:title="message">
//或者<span :title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
//在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”
