文章目錄
一、Vue如何處理事件？
1.1 v-on指令用法
v-on指令用法：
<button v-on:click='num++'>點擊</button>
v-on簡寫形式:
<button @click='num++'>點擊1</button>
二、 事件函數的調用方式
2.1 直接綁定函數名稱
<button @click='handle'>點擊1</button>
2.2 調用函數
<button @click="handle()">點擊2</button>
//1、直接綁定函數名稱：
<button @click='handle'>點擊1</button>
//2、調用函數
<button @click="handle()">點擊2</button>
<script>
let vm=new Vue({
el:"#app",
data:{
num:0,
},
methods: {
handle:function(){
if(this === vm);
this.num++;
}
}
});
</script>
三、 事件修飾符
3.1 .stop 阻止冒泡
3.2 .prevent 阻止默認行爲
<div v-on:click='handle0'>
<button v-on:click.stop='handle1'>點擊1</button>
</div>
<a href="https://www.baidu.com" @click.prevent='handle2'>百度</a>
<script>
let vm = new Vue({
el:"#app",
data:{
num:0
},
methods: {
handle0:function(){
this.num++
},
handle1:function(){
// 原生JS阻止冒泡
// event.stopPropagation();
},
handle2:function(){
// 原生JS阻止默認行爲
// event.preventDefault();
}
},
})
</script>
效果：
四、按鍵事件修飾符
官方文檔：Vue.js 事件修飾符
4.1 .enter 回車鍵
<input v-on:keyup.enter='submit'>
4.2 .delete 刪除鍵
<input v-on:keyup.delete='handle'>
實例：
<div id="app">
<form action="">
<div>
用戶名:
<input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
</div>
<div>
密碼:
<input type="text" @keyup.enter='handleSubmit' v-model='pwd'>
</div>
<div>
<input type="button" @click='handleSubmit' value="提交">
</div>
</form>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
uname:'',
pwd:'',
age:0
},
methods: {
clearContent:function(){
// 按delete鍵的時候，清空用戶名
this.uname = '';
},
handleSubmit:function(){
console.log(this.uname,this.pwd);
}
},
})
</script>
解讀：
當在第一個文本框當中輸入內容過後，按刪除鍵，就會直接清空輸入框
當在第二個文本框當中按下回車鍵，就會直接執行handleSubmit方法
效果：
4.3 自定義按鍵修飾符
全局 config.keyCodes 對象
Vue.config.keyCodes.f1 = 112
<div id="app">
<input type="text" v-on:keyup='handle' v-model='info'>
<input type="text" v-on:keyup.65='handle' v-model='info'>
<!-- <input type="text" v-on:keyup.a='handle' v-model='info'> -->
</div>
<script>
/*
事件綁定:自定義按鍵修飾符
規則：自定義按鍵修飾符名字是自定義的，但是對應的值必須是按鍵對應event.keyCode值
*/
Vue.config.keyCodes.a=65;
let vm = new Vue({
el:"#app",
data:{
info:''
},
methods:{
handle:function(event){
console.log(event.keyCode);
}
}
});
</script>
效果：
解讀：
input框只會監聽a鍵
五、屬性綁定
5.1 v-bind指令用法
<a v-bind:href="url">百度</a>
縮寫形式：
<a :href="url">百度1</a>
<body>
<div id="app">
<a v-bind:href="url">百度</a>
<a :href="url">百度1</a>
<button v-on:click='handle'>切換</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
url :'https://www.baidu.com',
},
methods:{
handle:function(){
this.url = 'http://www.lzy.edu.cn';
}
}
});
</script>
</body>
六、v-model的低層實現原理分析
6.1 MVVM設計思想
6.2 v-model的低層實現原理分析
注：v-model可以實現數據的雙向綁定
這裏我們手寫一個雙向數據綁定的例子。
注：input 是一個DOM事件，當input框輸入內容時觸發。
<body>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-bind:value='msg' v-on:input='handle'>
<!-- <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'> -->
<!-- <input type="text" v-model='msg'> -->
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:"hello",
},
methods:{
handle:function(event){
//使用輸入域中的最新數據覆蓋原來的數據
this.msg=event.target.value;
}
}
});
</script>
</body>