一扇丛、 事件的處理
1术吗、事件的基本使用：
1、使用v-on:xxx 或 @xxx 綁定事件帆精，其中xxx是事件名
2较屿、事件的回調需要配置在methods對象中，最終會在vm上
3卓练、methods中的配置的函數(shù)隘蝎，不要用箭頭函數(shù)，否則this就不是vm了
4襟企、methods中配置的函數(shù)嘱么，都是被Vue所管理的函數(shù)，this的指向是vm 或 組件實例對象
5顽悼、@click='demo' 和 @click="demo($event)" 效果一致曼振，但后者可以傳參
<div id="root">
<!-- View -->
<h1>名字：{{name}}</h1>
<button v-on:click="showInfo">點我提示信息(不傳參)</button>
<button @click="showInfo1(66,$event)">點我提示信息1(傳參)</button>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在啟動時生成生產提示
//創(chuàng)建Vue實例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: '劉建軍', //Model
address: '西安'
},
methods: {
showInfo(event) {
console.log(event.target.innerText);
console.log(this); //此處的this是vm
// alert(111);
},
showInfo1(number,event) {
// alert(2222);
console.log(number,event);
},
}
});
console.log(vm);
</script>
2、事件的修飾符
Vue中的事件修飾符
1蔚龙、prevent : 阻止默認事件（常用）
2冰评、stop : 阻止事件冒泡（常用）
3、once : 事件只觸發(fā)一次（常用）
4木羹、capture : 使用事件的捕獲模式
5甲雅、self : 只有event.target是當前操作的元素時才觸發(fā)事件
6、passive : 事件的默認行為立即執(zhí)行汇跨，無需等待事件回調執(zhí)行完畢
<div id="root">
<!-- View -->
<h1>名字：{{name}}</h1>
<!-- 阻止默認事件 -->
<a @click.prevent="showInfo">點我提示信息</a>
<!-- 阻止事件冒泡 -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">點我提示信息</button>
</div>
<!-- 事件只觸發(fā)一次 -->
<div class="demo1">
<button @click.once="showInfo">點我提示信息</button>
</div>
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是當前操作的元素時务荆，才觸發(fā)事件 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">點我提示信息</button>
</div>
<!--
事件的默認行為立即執(zhí)行妆距，無需等待事件回調執(zhí)行完畢
@scroll
@wheel.passive 移動端常用 做一些優(yōu)化
-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在啟動時生成生產提示
//創(chuàng)建Vue實例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: '劉建軍', //Model
address: '西安'
},
methods: {
showInfo(e) {
alert(111)
// console.log(e.target)
},
showMsg(msg) {
console.log(msg);
},
demo() {
console.log('@');
},
}
});
console.log(vm);
</script>
3穷遂、鍵盤事件
可以通過e.key 來查看鍵盤健名
console.log(e.key,e.keyCode);
1、Vue中常用的按鍵別名
- 回車 => enter
刪除 => delete (捕獲刪除和退格鍵)
退出 => esc
空格 => space
換行 => tab (特殊娱据，必須配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2蚪黑、Vue未提供別名的按鍵盅惜，可以使用按鍵原始的key值來綁定，但注意要轉化為 caps-lock(短橫線命名)
3忌穿、系統(tǒng)修飾符（用法特殊） ：ctrl抒寂、alt、shift掠剑、meta(win健)
!! 可以配合使用 .keyup.ctrl.y
(1)屈芜、配合keyup使用：按下修飾鍵的同時，再按下其他鍵朴译，隨后釋放其他鍵井佑，事件才被觸發(fā)
(2)、配合keydown使用眠寿，正常觸發(fā)事件
4躬翁、也可以使用keyCode去指定具體的按鍵 (不推薦)
5、Vue.config.keyCodes.自定義鍵名 = 鍵碼盯拱。 可以定制按鍵別名
<div id="root">
<h1>{{name}}你好啊</h1>
<!-- 這是自己定義的一個鍵名(hiuche) -->
<input @keyup.hiuche="showInfo" type="text" placeholder="按下回車提示輸入">
</div>
<script>
Vue.config.productionTip = false; //阻止vue在啟動時生成生產提示
//自己定義一個別名按鍵
Vue.config.keyCodes.hiuche = 13;
//創(chuàng)建Vue實例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: '劉建軍', //Model
address: '西安'
},
methods: {
showInfo(e) {
// if(e.keyCode != 13) return
console.log(e.target.value)
// 通過e.key 來查看鍵盤健名
console.log(e.key,e.keyCode);
},
}
});
console.log(vm);
</script>
二盒发、計算屬性和監(jiān)聽器
計算屬性：
1、定義：要用的屬性不存在狡逢，要通過已有的屬性計算得來的
2宁舰、原理：底層借助了Object.defineproperty方法提供的getter和setter
3、 get什么時候調用奢浑？
(1)明吩、初次讀取 fullName時,會執(zhí)行一次(會有緩存，多次使用時殷费，直接從緩存讀取數(shù)據(jù))
(2)印荔、所依賴的數(shù)據(jù)發(fā)生變化時，會被再次調用4详羡、優(yōu)勢：與methods實現(xiàn)相比仍律，內部有緩存機制(復用)，效率更高实柠，調試方便
5水泉、備注：
(1)、計算屬性最終會出現(xiàn)在vm上窒盐，直接讀取即可
(2)草则、如果計算屬性要被修改，那必須寫set函數(shù)去響應修改蟹漓，且set中要引起計算時依賴的數(shù)據(jù)發(fā)生改變1炕横、第一種
在methods中定義換算單位的方法
并將方法綁定到按鈕上
或將方法綁定到change事件上
方法只會在失去焦點時才觸發(fā)
或將方法綁定到input事件上
當你輸入的時候，方法就會觸發(fā)2葡粒、第二種 偵聽器 watch
如果data中 num 發(fā)生變化份殿，就會自動觸發(fā)這個回調函數(shù)
偵聽器的本質就是回調函數(shù)
觀察和響應 Vue 實例上的數(shù)據(jù)變動
當利用雙向數(shù)據(jù)綁定改變data中的數(shù)據(jù) num2
當data中數(shù)據(jù)發(fā)生改變則觸發(fā)在偵聽器中設置的方法(回調函數(shù))
我們可以在這個回調函數(shù)中對數(shù)據(jù)進行修改或者使用
與第一種方式對比起來
不需要借助事件來觸發(fā)膜钓，寫法上更加簡單 監(jiān)聽起來更同步3、第三種 計算屬性 computed
相當于是一個跟data 一樣的數(shù)據(jù)形式
不同的是data中的數(shù)據(jù) 是鍵值對的形式
而computed中的數(shù)據(jù)是函數(shù)的形式
所以computed可以在數(shù)據(jù)使用前對其進行設置或修改
正常的數(shù)據(jù)渲染
只不過渲染的數(shù)據(jù)是在 computed中設置的函數(shù)形式的數(shù)據(jù)
這個函數(shù)形式的數(shù)據(jù)可以直接進行計算或修改
所以從視覺效果上達到一個實時偵聽的效果
偵聽器和計算屬性的區(qū)別 ：
1颂斜、偵聽器是直接偵聽 data中的數(shù)據(jù)
2、如果綁定的數(shù)據(jù)發(fā)生變化自動觸發(fā)拾枣，偵聽器中所對應的回調函數(shù)
3沃疮、計算屬性是一個函數(shù)形式的數(shù)據(jù)
它可以對某個值在使用之前進行設置或修改
函數(shù)定義完畢后 直接將函數(shù)名當做數(shù)據(jù)來使用就行
(使用方法跟 data中的數(shù)據(jù)一樣)
