1.什么是Vue.js
是一个用来构建用户界面的框架,轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定,容易上手、小巧，通过简单的API可以实现响应式的数据绑定和组合的视图组件，数据驱动+组件化的前端开发(核心思想)。
2.什么是指令
用来扩张html标签的功能
3.Vue常用指令
v-model:双向数据绑定，常用于表单元素
v-for: 对数组或对象进行循环操作
v-on:时间绑定,用法：v-on:事件
1.v-for:循环数组对象
<div id="itany">
<ul>
<li v-for="val in arrs">
{{val.num}}
{{val.name}}
{{val.price}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
arrs:[
{num:1,name:'苹果',price:3},
{num:2,name:'香蕉',price:2},
{num:3,name:'鸭梨',price:1}
]
}
})
</script>
2.v-on:时间绑定
<div id='itany'>
<button v-on:click='alt'>按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
methods:{
alt:function(){
alert(vm.msg)
alert(this.msg)
}
}
})
</script>
3.v-model
<div id='itany'>
<input type="text" v-model='msg'>
<p>{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:''
}
})
</script>