vue基本语法
1.v-if v-else语法
<div id="app">
<div v-if="ok">true</div>
<div v-else>false</div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
ok:true
}
});
</script>
结果
2.vue-for
<div id="app">
<li v-for="item in items">
<div>{{item.message}}</div>
</li>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
items:[
{message:'hello vue'},
{message:'hello 前端'}
]
}
});
</script>
结果
3.vue的事件绑定(v-on)
<!--拿数据-->
<div id="app">
<button v-on:click="sayhai">点击我</button>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello vue!"
},
//方法必须放在vue的method中 通过v-on绑定方法
methods:{
sayhai:function (event) {
alert(this.message)
}
}
});
</script>
结果
4.vue的事件双向绑定(v-model)
<div id="app">
输入<input v-model="message" type="text"> {{message}}
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:" "
}
});
</script>
结果
注意: v-model 会忽略所有表单元素的value.checked,selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!