V标签作用：
7.v-for：
1.v-for指令的作用是：根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是(item,index) in 数据
4.item 和 index 可以结合其他指令一起使用
5.数组长度的更新会同步到页面上，是响应式的
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据后" @click="removep">
<input type="button" value="移除数据前" @click="removes">
<ul>
<li v-for="(item, index) in arr" :key="index">
{{index + 1}} : {{item}}
</li>
</ul>
<h2 v-for="(item, index) in vegetables" :title='item.name' :key="index">
{{item.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
arr:["北京","上海",'广州' ],
vegetables:[
{name:"西兰花炒鸡蛋"},
{name:"鸡蛋炒西兰花"}
]
},
methods: {
add :function () {
this.vegetables.push( {name:"香菜"});
},
//方法ES6的写法，去掉:function;两种移除方式.
removes() {
this.vegetables.shift();
},
removep(){
this.vegetables.pop();
}
}
})
</script>
</body>
image.png
8.v-on(补充)：传递自定义参数，事件修饰符
1.事件绑定的方法写成函数调用的形式，可以传入自定义参数
2.定义方法时需要定义形参来接收传入的实参
3.事件的后面跟上‘.修饰符 ’ 可以对事件进行限制
4.‘.enter’ 可以限制触发的按键为回车
5.事件修饰符有多钟
//1.键盘按下事件：keydown() 是在键盘按下就会触发
//2.键盘弹起事件：keyup() 是在键盘松手就会触发
//keydown 事件触发在文字还没敲进文本框，这时如果在 keydown 事件中输出文本框中的文本，得到的是触发键盘事件前的文本，
//而 keyup 事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(123,'小明')">
<input type="text" @keyup.enter="say">
<ul>
<li v-for="(item, index) in arr" :key="index">
{{index + 1}} : {{item}}
</li>
</ul>
<h2 v-for="(item, index) in vegetables" :title='item.name' :key="index">
{{item.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
methods: {
doIt(p1,p2){
console.log('做前端');
console.log(p1);
console.log(p2);
},
say(){
alert('回车后出现');
}
}
})
</script>
</body>
image.png
9.v-model：获取和设置表单元素的值（双向数据绑定）
1.v-model指令的作用是：便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素值相关联
3.绑定的数据 <---->表单元素的值
<body>
<div id="app">
<input type="button" value="修改message" @click = "setM">
<input v-model="message" type="text" @keyup.enter="getM" />
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message:"嫦娥五号将择机实施月面软着陆"
},
// methods: {
// getM:function(){
// alert(this.message)
// }
// },
methods: {
getM(){
alert(this.message)
},
setM(){
this.message = "kuku"
}
},
})
</script>
</body>
image.png
image.png
image.png
