修飾符
事件修飾符
業務： 阻止事件冒泡
這是我們需要在我們的事件處理程式中添加阻止事件冒泡行為
但是我們發現，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>
![Vue.js學習筆記（三）——計算屬性和偵聽器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)