Vue 计算属性

最新推荐文章于 2024-03-28 09:00:00 发布

ShirleyXuMM

最新推荐文章于 2024-03-28 09:00:00 发布

阅读量183

点赞数 1

本文链接：https://blog.csdn.net/shirleyxumm/article/details/93337781

版权

Vue 计算属性

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

普通写法：在vue中写一个方法在模板里调用，如下：

<div id="app">
<p>{{msg}}</p>
<p>{{msgReverse()}}</p>
</div>

new Vue({
el: '#app',
data: {
msg: 'hello world'
},
methods: {
msgReverse() {
return this.msg.split('').reverse().join('')
}
}
})

总结：

如果说业务功能增加，我们发现 mustache 语法中的js逻辑有点多了
V是视图，作用是用来展示界面的，但是我们上面的写法让 V 的负担增加
如果我们写在methods中写一个方法，然后运行这个方法，又有点觉得和我们认为的methods里面最好放事件处理程序不符

综合：以上方式都不是最佳的选择
解决： Vue提出了一个新的解决方案：计算属性 computed

计算属性：

计算属性中存放的是函数（书写逻辑）
计算属性可以直接像全局变量一样使用，直接将方法名当做全局变量一样使用

<body>
<div id="app">
<p>{{msgReverse}}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello world'
},
computed: {
msgReverse() {
return this.msg.split('').reverse().join('')
}
}

})
</script>

实用题：计算属性( computed ) vs 方法（ methods）

    1. 事件处理程序往methods里面放
    2. 满足一下两个条件，你直接使用计算属性
            要书写逻辑
            要像全局变量一样使用（ 符合 MVVM 的思想）

v-on 事件里的修饰符
业务：阻止事件冒泡

事件冒泡原理：从目标向上进行传递事件发现事件处理函数执行

常用写法：

.big{
width: 200px;
height: 200px;
background: red;
}
.middle{
width: 100px;
height: 100px;
background: blue;
}
.small{
width: 50px;
height: 50px;
background: yellow;
}


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



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.修饰符 = “事件处理程序”

1.事件修饰符
.stop - 调用 event.stopPropagation()
.prevent - 调用 event.preventDefault()
.capture - 添加事件侦听器时使用 capture 模式。
.once - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.big {
width: 500px;
height: 500px;
background-color: red;
}
.middle {
width: 300px;
height: 300px;
background-color: yellow;
}
.small {
width: 100px;
height: 100px;
background-color: blue;
}


<div id="app">
    <div class="big" @click.stop="bigHandle">
    <div class="middle" @click.stop="middleHandle">
    <div class="small" @click.stop="smallHandle"></div>

    <div class="big" @click.self = "bigHandler">
    <div class="middle" @click.self = "middleHandler">
    <div class="small" @click.self = "smallHanlder"></div>
</div>



new Vue({
el: '#app',
methods: {
bigHandle(e) {
alert('big')
},
middleHandle(e) {
alert('middle')
},
smallHandle(e) {
alert('small')
}
}
})

2.按键修饰符

业务： input 按键 enter 时触发
Vue将通过事件对象 e 拿取键盘码的这个过程进行了封装

普通操作：

<div id="app">
<input type="text" v-model="val" @keyup="inputHandle">
</div>

new Vue({
el: '#app',
data: {
val: ''
},
methods: {
inputHandle(e) {
if (e.keyCode == 13) {
console.log(this.val)
}
}
}


})

修饰符写法：

写法一：

<div id="app">
<input type="text" v-model="val" @keyup.enter="inputHandle">
</div>

new Vue({
el: '#app',
data: {
val: ''
},
methods: {
inputHandle() {
console.log(this.val)
}
}

})

写法二:

<div id="app">
<input type="text" v-model="val" @keyup.n="fn">
</div>

new Vue({
el: '#app',
data: {
val: ''
},
methods: {
fn() {
console.log(this.val)
}
}

})

ShirleyXuMM

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 计算属性

Vue 计算属性业务：将一个字符串反向？思路： str ->arr- arr反向 ->str普通写法：在vue中写一个方法在模板里调用，如下：<div id="app"><p>{{msg}}</p><p>{{msgReverse()}}</p></div>new Vue({el: '#a...
复制链接

扫一扫