Vue学习日志 day05
一:v-on事件监听
1.基本使用
v-on
语法糖:@
2.参数传递
参数问题:
1.该方法不需要额外参数,那么方法后的()可以不添加
如果需要同时传入某个参数还需要event 那么可以通过$event传入事件
若v-on里面不传参数(加小括号),在定义时传了一个参数:那么形参为undefined
v-on里没有小括号,定义时传入一个参数,那么形参为event对象
若又要传event对象,又要传参数:
将传入event的参数改成$event
v-for:click="btnclick(abc,$event)"
3.修饰符
.stop
与冒泡相关
阻止冒泡:@click.stop=“btnclick”
.prevent
阻止默认事件
.{keyCode|keyAlias}
只当事件是从特定键触发时才触发回调
@keyup.13 = “whenkeyup”
.enter 监听回车
.native
监听组件根元素的原生事件
.once
只触发一次回调
二:v-if/v-else-if/v-else
<div v-if="false">
</div>
<div v-if="show">
{{message}}
</div>
data:{
message:"xxx",
show:true
}
<!--分数-->
<div v-if="score>=90">
</div>
<div v-else-if="score>=80">
</div>
<div v-else-if="score>=70">
</div>
<div v-else-if="score>=60">
</div>
<div v-else-if="score>=60">
</div>
<div v-else>
</div>
双选型:
<div v-if="isuser">
xxx
</div>
<div v-else>
xxx
</div>
<button @click="isuser = !isuser">
点击切换
</button>
注:vue为了性能考虑,在渲染之前会抽取成虚拟dom,并尽可能复用已有的元素,而不是创建新元素 若不复用, 则改变key值 若key值相同则复用
<input name="user" key="username">
<input name="psw" key="email">
若不加key,则会复用
三:v-show
决定元素是否在页面中显示出来
<div v-show="true">
</div>
与v-if消失方式不同
v-show只是改变display为none(false时)
当显示和隐藏的切片很频繁时 用v-show
只有一次切换的时候使用v-if
四:v-for遍历数组和对象
遍历数组
<div v-for="(item,index) in movies">
{{item}} {{index+1}}
</div>
遍历对象
<div v-for="(value,key,index) in info">
{{value}}
{{key}}
</div>
key属性
官方建议我们在用v-for时加上key属性
加key的原因:和虚拟DOM的Diff算法有关 会增强性能(高效的更新虚拟dom)
数组往任意位置插入元素的方式:
app.letters.splice(2,0,‘F’)
splice方法 第二个参数为0 则是插入元素
会在第二个元素的位置插入元素
内部实际上是数组插入的方式(元素依次往后移) 性能较低
:key=“item” 保证绑定的key和渲染的元素一一对应
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2t2ah7Dl-1570026515591)(C:\Users\z\AppData\Roaming\Typora\typora-user-images\1570013590273.png)]
图二为绑定key的形式
数组中的响应式方法
//可以响应式
push() //push('aaa','bbb','ccc')
pop()
shift()
unshift()
//splice 关键在于第二个参数
splice()
//传入1个参数
//从第一个参数到最后所有全删掉
//传入2个参数
//第一个参数是从第几个开始,第二个参数是删除几个参数
//传入3个参数
//替换操作，splice(1,3,'m','n','l')
//用mnl代替1位置后面的三个元素
sort()
reverse()
//不能响应式
this.letters[0] = 'aaaaa'
//这种方式可以改为
this.letters.splice(0,1,'aaaaa')
//或用Vue的方式
Vue.set(this.letters,0,'aaaaa')
//可变参数
function sum(...num){
console.log(num) //存放所有参数
}
响应式
this.letters[0] = ‘aaaaa’
//这种方式可以改为
this.letters.splice(0,1,‘aaaaa’)
//或用Vue的方式
Vue.set(this.letters,0,‘aaaaa’)
```javascript
//可变参数
function sum(...num){
console.log(num) //存放所有参数
}
转载：https://blog.csdn.net/qq_44686225/article/details/101978510