一、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代码:
//v-model 双向绑定 一般只用于表单{{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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type='text' name='' v-model='fruit'>
<button v-on：click=‘add’>添加食物</button>
<ul>
<li v-for='value in arr'>{{value}}</li>
</ul>
</div>
<script src='vue.js'></script>
<script type='text/javascript'>
new Vue({
el:'#itany',
data:{
arr:['面包','饺子','包子'],
fruit:''},
methods:{
add:function(){
this.fruitList.push(this.fruit)
this.fruit=''
},
delt:function(index){
this.fruitlist.splice(index,1);
},
},
});
</script>
</body>
</html>
网友评论