下面直接切入主题,一一列举Vue的9个指令:
-
v-text(设置标签的文本值)
通常情况下v-text可以简写为{{}};无论内容是什么,v-text只会解析成文本。 -
v-html(设置元素的innerHTML)
v-html与v-text的区别是,若要解析html结构,就用v-html。 -
v-on(给元素绑定事件)
v-on指令是给元素绑定事件,所以事件名就不需要on了,指令可以简写为@,注意绑定事件的方法在methods属性中,下面列举一个语法模板:
<body>
<div id="app">
<input type="button" value="绑定事件" v-on:click="event">
<!--或者可以写成下面的简写形式-->
<input type="button" value="绑定事件" @click="event">
</div>
<script type="text/javascript">
var a = new Vue({
el:"#app",
methods:{
event:function(){
alert("事件绑定完成了!");
}
}
})
</script>
</body>
-
v-on补充(传递自定义参数,事件修饰符)
事件后面跟上 .修饰符可以对事件进行限制,例如@keyup.enter。 -
v-if指令(切换元素的显示和隐藏)
根据表达式的真假,可以切换元素的显示和隐藏(操作dom元素)。 -
v-show
v-show和v-if很像,但是如果频繁切换的情况下就用v-show。 -
v-bind(设置元素的属性)
可以简写为 “ :”。 -
v-for(根据数据生成列表结构)
语法是 (item,index) in 数据,小模版:
<body>
<div id="app">
<ul>
<!--用v-for遍历数组-->
<li v-for="item in arr">
蔬菜:{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var a = new Vue({
el:"#app",
data:{
arr:["苹果","草莓","西瓜"]
}
})
</script>
</body>
- v-model获取和设置表单元素的值
v-model是用来获取和设置表单元素的值,可以实现双向数据绑定,双向的意思是(表单元素的值和绑定的数据),也就是说表单元素的值和绑定的数据只要有一方发生改变,另一方也会发生更新。