注意:只有v-bind 和 v-on 有简写。
1、v-bind
为DOM元素的某个属性绑定Vue实例的某个属性。
控制DOM文本、属性等
简写: :title="这是一个title"
## 为 span 元素的 title属性绑定 vue实例的message属性;
## 可以通过 app2.meesage = '你好啊,在这里我修改了vue实例的message属性'; 来进行修改。
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
<!--简写-->
<span :title="message"></span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
// app2.meesage = '你好啊,在这里我修改了vue实例的message属性';
2、v-if
条件判断
控制DOM结构,添加或者删除DOM元素。
## 该例子中,如果 app3.seen = false; 那么会从DOM中删除 <p> 标签。
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
3、v-show
条件判断
控制CSS的display属性,不直接操作DOM结构。
4、v-for
循环 官网
控制DOM结构
5、v-on
监听DOM事件官方1
简写:@:click="doSomething"
1)、 事件绑定的时候可以只填写方法名,如下:
<a v-on:click="doSomething"></a> //html
//js
...
methods : {
doSomething : function(event){ // 方法会自动接受事件参数 event
alert(event.target);
}
}
...
<!--简写-->
<a @:click="doSomething"></a>
2)、也可以填写内联语句,如下:
<a v-on:click="doSomething('你好','$event')"></a> //html ----需要手动传递 特殊参数$event,代表所触发的事件
//js
...
methods : {
doSomething : function(msg,event){ // 方法中接受v-on指令传递的两个参数:msg和 event
alert(msg);
alert(event.target);
}
}
...
具体区别详见 : 官方2
6、v-model
用于实现表单输入和应用状态之间的双向绑定