修饰符
事件修饰符
业务: 阻止事件冒泡
这是我们需要在我们的事件处理程序中添加阻止事件冒泡行为
但是我们发现,e.stopPropagation() 我们书写了三次,
总结: 这么书写会导致代码重复,浪费性能
解决: 修饰符
格式: @eventType.修饰符 = "事件处理程序"
修饰符名称: 是我们原生方法简写( 第一个单词(基本上))
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.big{
width: 200px;
height: 200px;
background: red;
}
.middle{
width: 100px;
height: 100px;
background: blue;
}
.small{
width: 50px;
height: 50px;
background: yellow;
}
</style>
</head>
<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>
<script>
new Vue({
el: '#app',
methods: {
bigHandler ( e ) {
alert( 'big' )
},
middleHandler ( e ) {
alert( 'middle' )
},
smallHanlder ( e ) {
alert( 'small' )
}
}
})
</script>
自定义按键修饰符
业务: 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>
<script>
Vue.config.keyCodes.p = 13 //88 键盘的 p
new Vue({
el: '#app',
data: {
val: ''
},
methods: {
inputHandler ( e ) {
if( e.keyCode === 13 ){
console.log( this.val )
}
},
fn () {
console.log( this.val )
}
}
})
</script>
计算属性
业务: 将一个 字符串 反向 ?
思路: str ->arr- arr反向 ->str
总结:
如果说业务功能增加,我们发现 mustache 语法中的js逻辑有点多了
V是视图,作用是用来展示界面的,但是我们上面的写法 让 V 的负担增加
如果我们写在methods中写一个方法,然后运行这个方法,又有点觉得和我们认为的methods里面最好放
事件处理程序不符
综合: 以上方式都不是最佳的选择
解决: Vue提出了一个新的解决方案: 计算属性 computed
计算属性,
计算属性中存放的是函数( 书写逻辑 )
计算属性可以直接像全局变量一样使用,直接将方法名当做全局变量一样使用
面试题,实用题: 计算属性( computed ) vs 方法( methods)
1. 事件处理程序往methods里面放
2. 满足一下两个条件,你直接使用计算属性
- 要书写逻辑
- 要像全局变量一样使用( 符合 MVVM 的思想)
<body>
<div id="app">
{{ msg.split('').reverse().join('') }}
<p> {{ reverseMsg }} </p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue.js 周四'
},
computed: {
reverseMsg () {
return this.msg.split('').reverse().join('')
}
}
})
console.log('vm',vm)
</script>