2.3 条件渲染
-
v-if
-
v-else-if
-
v-else
-
v-show 条件展示
<h3> 条件渲染 - 单路分支 </h3> <p v-if = "flag"> A </p> <h3> 条件渲染 - 双路分支 </h3> <p v-if = "flag"> A </p> <p v-else > B </p> <h3> 条件渲染 - 多路分支 </h3> <p v-if = "type === '美食'"> 美食 </p> <p v-else-if = " type === '游戏' "> 游戏 </p> <p v-else> 睡觉 </p> <h3> 条件展示 </h3> <p v-show = " showFlag "> 条件展示 </p>
-
思考总结
思考: v-if vs v-show 1. 效果看起来一样 2. why Vue要出两个相似的指令? v-if控制的是元素的存在与否 v-show控制的是元素的display:none属性 思考? 如果出事条件为假时? v-if v-show 谁的性能损耗较高? v-show 总结: 项目中如何选择哪一个? 频繁切换用 v-show 如果不是很频繁的切换,那我们用 v-if
2.4 列表渲染
-
v-for 指令
<h3> 数组 </h3> <ul> <li v-for = "(item,index) in arr" :key = " index "> {{ item }} -- index{{ index }} </li> </ul> <h3> 对象 </h3> <ul> <li v-for = "(item,key,index) of obj" :key = "index"> {{ item }} -- {{ key }} -- {{ index }} </li> </ul> <h3> json </h3> <ul> <li v-for = "item in json" :key = "item.id"> <span> 商品名称: {{ item.shop_name }} </span> <span> 商品价格: {{ item.price }} </span> </li> </ul> <h3> 循环嵌套 </h3> <ul> <li v-for = "item in lists" :key = "item.id"> <h3> 商品类型: {{ item.shop_name }} </h3> <ul> <li v-for = "item in item.type" :key = "item.id"> <p> 制造商: {{ item.maker }} </p> </li> <!-- <li v-for = "ele in item.type" :key = "ele.id"> <p> 制造商: {{ ele.maker }} </p> </li> --> </ul> </li> </ul> <h3> 循环number / string </h3> <p v-for = "item in 10"> {{ item }} </p> <p v-for = "item in 'abc'"> {{ item }} </p>
-
总结:
-
- 列表渲染参数可以写三个,分别为 item key index
-
- 列表渲染,要在渲染的元素身上加一个key,作为这个元素唯一的标识 ,
- 思考: 这是为什么?
- 这个key最好是id,因为id唯一?思考: 为什么不能是index
- 列表渲染,要在渲染的元素身上加一个key,作为这个元素唯一的标识 ,
-
- 循环嵌套式,参数名称是可以一致的
-
- in / of 都可以使用
-
2.5 事件处理器
js中添加事件
DOM 一级事件 on
1. on添加事件只书写一次
DOM 二级事件 事件监听
1.可以有多个
2.事件监听有兼容 [ 现代浏览器 / IE低版本 ]
addEventListener
事件包含部分
事件源: box
事件类型: click
事件处理程序: function(){}
box.onclick=function(){}
事件执行形式有两种:
1.js执行
2.html执行
Vue选择了第二种作为事件添加的形式
<body>
<div id="app">
<button v-on:click = " fn "> 点击 </button>
<button @click = ' fn '> 点击 </button>
<button @click = ' eventHandler '> 事件对象 </button>
<button @click = ' argumentHandler( $event,a,b ) '> 事件参数 </button>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
/*
事件:
事件对象: 事件对象记录了整个事件的信息
事件参数:
形式参数: 定义函数时/方法时的参数
实际参数: 调用函数/方法时传入的参数
注意: 当一个事件处理程序有多个参数,其中一个参数是事件对象时,我们在调用这个方法时,要添加一个实际参数$event 与之对应
*/
new Vue({
el: '#app',
data: {
a: 10,
b: 20
},
methods: {
//methods 称之为方法 里面存储的是 事件处理程序
fn () {
alert('事件');
},
eventHandler ( e ) {
console.log( e );
},
argumentHandler ( e,a,b ){
//思考 : 如果我想在这个方法中使用事件对象 怎么办?
console.log( e );
console.log( a + b );
}
},
})
</script>
<body>
<div id="app">
<h3> 按键修饰符 </h3>
<div class="big" @click.stop = 'big'>
<div class="middle" @click.stop = 'middle'>
<div class="small" @click.stop = 'small'></div>
</div>
</div>
<h3> 键盘修饰符 </h3>
<input type="text" @keyup.13 = 'getValue'>
<input type="text" @keyup.enter = 'getValue'>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
/*
Vue中对事件的功能的扩展
* 修饰符 - 修饰事件
* 按键修饰符
- stop
-self
-once
- ...
*键盘修饰符
自定义按键修饰符
Vue.config.keyCodes.f1 = 112
先以一个案例来讲述修饰符的好处
- 事件冒泡
- 回车弹出input的value
*/
Vue.config.keyCodes.f1 = 112
new Vue({
el: '#app',
methods: {
big(e) {
alert(' big ');
// e.stopPropagation()
},
middle(e) {
alert(' middle ');
// e.stopPropagation()
},
smart(e) {
alert(' smart ');
// e.stopPropagation()
},
getValue(e) {
// if ( e.keyCode === 13 ) {
// console.log('执行了')
// }
console.log('执行了')
}
},
})
</script>
2.6 表单控件绑定
- v-model
- 双向数据绑定
- VM 改变 V随之改变
- V改变, VM也随之改变
- v-model只用于表单
- 理由: v-model默认绑定value属性
- 技巧: 看到表单直接 v-model
- 双向数据绑定
<body>
<div id="app">
<input type="text" v-model = " msg ">
<p> {{ msg }} </p>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'sb'
}
})
</script>