vue常用指令：
1. v-model 一般用在表单元素 input--> text ---> v-model='msg'
2. 循环数组：
<li v-for="(value,index) in arr">
{{value}}{{index}}
</li>
3.循环json:
<li v-for="(value,key) in json">
{{value}} {{key}}
</li>
事件：
new Vue({
el:'.box',
data:{},
methods:{
show:function () {
alert(1);
}
}
});
<div class="box">
<input type="button" value="按钮" v-on:click="show()">
</div>
v-on:click
v-on:mouseover
v-on:mouseout
v-on:dblclick
v-on:mouseup
v-on:mousedown
<script>
window.onload=function () {
new Vue({
el:'.box',
data:{
arr:['width','height','back','font']
},
methods:{
add:function () {
this.arr.push('aaa');
}
}
});
};
</script>
</head>
<body>
<div class="box">
<input type="button" value="按钮" v-on:click="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
4. v-show
methods:{
changea:function () {
if(this.a==true){
this.a=false;
}else{
this.a=true;
}
}
}
<div class="box">
<input type="button" value="按钮" v-on:click="changea()" >
<div class="small-box" v-show="a">
</div>
</div>
5.事件简写 ： @click