Vue学习【2】

• v-for 根据数据生成列表结构

<div id="app">
	<ul>
		<li v-for="(item,index) in arr" :title="item">
		{{ index }}{{ item }}
		</li>
		<li v-for="(item,index) in objArr">
		{{ item.name }}
		</li>
	</ul>
</div>

var app = new Vue({
	el:"#app"
	data:{
		arr:[1,2,3,4,5],
		objArr:[
		{ name:"jack" },
		{ name:"rose" }
		]
	}
})

• v-on补充 传递自定义参数，事件修饰符（官网传送门)

<div id="app">
	<input type="button" @click="dolt(p1,p2)"/>
	<input type="text" @keyup.enter="sayHi"/>
</div>

var app = new Vue({
	el:"#app",
	methods:{
	  dolt:function(p1,p2){},
	  sayHi:function(){}
	}
})

• v-model 获取和设置表单元素的值（双向数据绑定）
  当改变input框中的数值，message的值也同步发生改变
  设置事件修改message的值input框中也会相应发生改变

<div id="app">
	<input type="text" v-model="message"/>
	<h2>{{ message }}</h2>
</div>

var app = new Vue({
	el:"#app",
	data:{
		message:"...",
	}
})