Vue 是一套用于构建用户界面的渐进式框架，作者尤雨溪
<div id='app'> {{ message }} </div>
new Vue(){ //el是element的简写 el后面跟的是选择器
el:'#app',
data:{
message:'Hello Vue.js!'
}
}
这是创建的一个简单的Vue应用。
一：v-for
body部分:
<li v-for='value in arr'> {{Value}} </li> //值在arr中循环 value是一个值 可变
<li v-for='value in obj'> {{Value}} </li> //值在obj中循环 value是一个值 可变
<li v-for='(value,index) in arr'> {{index}}==>{{value}} </li> //arr的元素对应的下标
<li v-for='(value,index) in obj'> {{index}}==>{{value}} </li> //obj的元素对应的下标
<li v-for='value in arrs'> //输出的是arrs数组中的对象中的元素值
{{value.name}}
{{value.name}}
{{value.price}}
</li>
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},
]
}
})
二：用V-for做table表格
body代码：
<div class='app'>
<table border='1' cellspaing='0'>
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for='value in arrs'>
<td>{{value.num}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
</div>
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},
]
}
})
效果：
12039799-ebf56ab91927f62f.png
三：v-model
body代码:
<div id='app'> //v-model 双向绑定 一般只用于表单
<input type='text' v-model='message'>
<p>{{message}}</p>
</div>
js代码:
new Vue({
el:'#app',
data:{
message:''
}
})
效果:表单下面的文字会随着表单中的文字的变化而变化
12039799-7deea0311718a6e6.png
四：v-on
点击button会弹出111
body部分:
<div id='app'>
<button v-on:click='alt'>按钮</button>
</div>
js部分:
new Vue({
el:'#app',
data:{
message:'hello World'
},
methods:{
alt:function(){
alert(111)
}
}
})
练习：
效果：
12039799-9fff16fcf22c5b4a.png
body代码：
<div id='app'>
<input type='text' class='input' v-model='valu'>
<button v-on:click='text'>点击</button>
<ul>
<li v-for='(value,index) in arr'>{{value}} <button v-on:click='sc(index)'>删除</button> </li>
</ul>
</div>
js部分:
new Vue({
el:'#.app',
data:{
arr:['apple','prange','banana'],
valu:''
},
methods:{
text:function(){
this.arr.push(this.valu)
this.valu=''
},
sc:function(ind){
this.arr.splice(ind,1)
}
}
})