vue学习--计算属性、事件、按键修饰符

最新推荐文章于 2022-08-16 09:56:58 发布

brighter_1

最新推荐文章于 2022-08-16 09:56:58 发布

阅读量183

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/brighter_1/article/details/93460415

版权

学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

计算属性

计算属性：
业务：将一个字符串反向？
思路： str ->arr- arr反向 ->str

eg:
    
<body>
<div id="app">
{{ msg.split('').reverse().join('') }}
<p> {{ reverseMsg }} </p>
</div>

new Vue({
el: '#app',
data: {
msg: 'hello Vue.js 周四'
},
computed: {
reverseMsg () {
return this.msg.split('').reverse().join('')
}
}
})

总结：
如果说业务功能增加，我们发现 mustache 语法中的js逻辑有点多了
V是视图，作用是用来展示界面的，但是我们上面的写法让 V 的负担增加
如果我们写在methods中写一个方法，然后运行这个方法，又有点觉得和我们认为的methods里面最好放
事件处理程序不符
综合：以上方式都不是最佳的选择
解决： Vue提出了一个新的解决方案：计算属性 computed
计算属性，
计算属性中存放的是函数（书写逻辑）
计算属性可以直接像全局变量一样使用，直接将方法名当做全局变量一样使用
面试题，实用题：计算属性( computed ) vs 方法（ methods）

事件处理程序往methods里面放
满足一下两个条件，你直接使用计算属性

要书写逻辑
要像全局变量一样使用（符合 MVVM 的思想）

事件高级用法（修饰符）

1. 事件修饰符

.stop
.prevent
.capture
.once

业务：阻止事件冒泡


<body>
<div id="app">
<div class="big" @click = "bigHandler">
<div class="middle" @click = "middleHandler">
<div class="small" @click = "smallHanlder"></div>
</div>
</div>
</div>
</body>


new Vue({
el: '#app',
methods: {
bigHandler ( e ) {
e.stopPropagation()
alert( 'big' )
},
middleHandler ( e ) {
e.stopPropagation()
alert( 'middle' )
},
smallHanlder ( e ) {
e.stopPropagation()
alert( 'small' )
}
}
})

这是我们需要在我们的事件处理程序中添加阻止事件冒泡行为
但是我们发现，e.stopPropagation() 我们书写了三次，
总结：这么书写会导致代码重复，浪费性能
解决：修饰符

格式： @eventType.修饰符 = “事件处理程序”
修饰符名称：是我们原生方法简写（第一个单词（基本上））


<body>
<div id="app">
<div class="big" @click.stop = "bigHandler">
<div class="middle" @click.stop = "middleHandler">
<div class="small" @click.stop = "smallHanlder"></div>
</div>
</div>
<hr>
<div class="big" @click.self = "bigHandler">
<div class="middle" @click.self = "middleHandler">
<div class="small" @click.self = "smallHanlder"></div>
</div>
</div>
</div>
</body>


new Vue({
el: '#app',
methods: {
bigHandler ( e ) {
alert( 'big' )
},
middleHandler ( e ) {
alert( 'middle' )
},
smallHanlder ( e ) {
alert( 'small' )
}
}
})

2. 按键修饰符

业务： input 按键 enter 时触发

Vue将通过事件对象 e 拿取键盘码的这个过程进行了封装
自定义按键修饰符
指定某一个字符为某一个键盘码


<body>
<div id="app">
<input type="text" v-model = "val" @keyup = "inputHandler">
<hr>
<input type="text" v-model = "val" @keyup.enter = "fn">
<input type="text" v-model = "val" @keyup.13 = "fn">
<hr>
<input type="text" v-model = "val" @keyup.p = "fn">
</div>
</body>


Vue.config.keyCodes.p = 13 //80键盘的 p
new Vue({
el: '#app',
data: {
val: ''
},
methods: {
inputHandler(e) {
if (e.keyCode === 13) {
console.log(this.val)
}
},
fn() {
console.log(this.val)
}
}
})

brighter_1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习--计算属性、事件、按键修饰符

计算属性计算属性：业务：将一个字符串反向？思路： str ->arr- arr反向 ->streg: <body><div id="app">{{ msg.split('').reverse().join('') }}<p> {{ reverseMsg }} </p></div>new V...
复制链接

扫一扫