vue学习3

v-for

作用：根据数据循环生成数据内容
与数组搭配
语法（item ，index）in 数据
item和index可以结合其他指令一起使用
html部分

<div id="app">
			<ul>
				<li v-for="item in arr">
					城市：{{item}}
				</li>
			</ul>
			<ul>
				<li v-for="(it,index) in arr">
					第二种方式：城市序列{{index+1}}:城市{{it}}
				</li>
			</ul>
			<h2 v-for="item in person" :title="item.name" >
				{{item.name}}
			</h2>
		</div>

js部分

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				var app=new Vue({
					el:"#app",
					data:{
						arr:["北京","上海","广州","深圳"],
						
						person:[
							{name:"李华"},
							{name:"19"},
							{name:"看书"}
						]
					}
				})
			}
		</script>

结果截图

v-on补充

传递自定义参数，事件修饰符
按键操作事件，一般都是回车
html部分

<div id="app">
			<input type="button" name="" id="" value="弹出加法值" @click="add(1,2)" />
			<input type="button" name="" id="" value="弹出say" @keyup.enter="say" />
		</div>

js部分

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				var app=new Vue({
					el:"#app",
					methods:{
						add:function(num1,num2){
							alert(num1+num2)
						},
						say:function(){
							alert("你好世界")
						}
					}
			}
			
			)}
		</script>

运行效果：

图片里我点击第二个按钮是不会有弹窗的，我是按的回车

V-model

作用：能够方便的获取表单元素的值，和修改它
html部分：

<div id="app">
			<input type="text" name="" id="" value="" v-model="message" @keyup.enter="getMessage"/>
			<h2>{{message}}</h2>
		</div>

js部分：

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				var app=new Vue({
					el:"#app",
					data:{
						message:"请输入文本"
					},
					methods:{
						getMessage:function(){
							alert(this.message)
							
						}
					}
				})
			}
		</script>

运行效果：

可以看到绑定的数据会跟着输入框的变化而变化，而弹出框可以看到message的值确实改变了，它们是互相关联的只要改变其中一方的值都会改变。