vue = div + object对象+json
window.onload=function(){
var vueClass = new Vue({
el:'#box', //元素,也可以是class或者直接是标签
data:{ //数据
dShowFlag:false,
msg:'this is input',
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{ //方法
add:function(){
var that = this // that 即 vueClass
that.arr.push('tomato'); //使用data里面的数据
}
}
});
};
<div id="box">
<input v-model="msg">
<input type="button" value="按钮" v-on:click="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
v-xx命令
- v-model 主要用于表单的 双向绑定
<input v-model="{{msg}}">
-
v-on:事件 (click/dblclick/mouseover等js原生事件均支持)
- 参考 vue事件
v-show 控制是否显示
v-show="false" 不显示 ,也可以v-show="data中的字段dShowFlag",