一、vue.js基础
1.vue.js是一套用于构建用户界面的渐进式框架
2.是一个轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定
3.最简单的一个vue.js案例
二、vue.js常用指令
1.v-for对数组或对象进行循环操作
案例：
一：v-for
body部分:
{{value.name}}
{{value.name}}
{{value.price}}
js部分:
new Vue({
el:'#app',
data:{
arr:[1,2,3,4,5],
obj:{name:'jack',old:'18'},
arrs:[
{num:1,name:'香蕉',price:3},
{num:2,name:'苹果',price:2},
{num:3,name:'鸭梨',price:1},
]
}
})
2.v-model双向绑定,用于表单元素
案例:
dody代码:
{{message}}
js代码:
new Vue({
el:'#app',
data:{
message:''
}
})
效果:表单下面的文字会随着表单中的文字的变化而变化
3.v-on事件监听
案例
点击button会弹出111
body部分:
按钮
js部分:
new Vue({
el:'#app',
data:{
message:'hello World'
},
methods:{
alt:function(){
alert(111)
}
}
})
4案例1：课下小练习的效果
<！DOCTYPE html>
- {{value}}