Vue學習計劃-Vue2--Vue核心（三）methods和computed

Vue

1. 事件 v-on @

基礎
使用 v-on:xxx或者@xxx綁定事件，其中xxx是事件名
事件的回調需要配置在methods對象中，最終會在vm上
methods中配置函數，不要用箭頭函數，否則this就不是vm了
methods中配置函數，都是被Vue管理的函數，this指向 vm 或者組件實例對象
@click="demo"和@click=demo($event)效果一致，但是后者可以傳參
事件修飾符
prevent: 阻止默認事件（常用）
once: 事件只觸發一次（常用）
stop: 阻止事件冒泡（常用）
capture: 使用事件的捕獲模式 --> 給父級加
self: 只有event.target是當前操作的元素時才觸發事件
passtive: 事件的默認行為立即執行，無需要等待事件回調執行完畢
@click.stop.prevent = 可以鏈式寫法

注意：

.self和.stop 都可以阻止事件冒泡，有什么區別呢？

.stop 是阻止事件向外繼續冒泡，當你給了子級.stop后他的父級就不會冒泡;
.self 是我只讓自己不冒泡，其他人我不管
<div @click = 'fatherClick'> <div @click.self="sonClick" style="padding:10px;background-color: aqua;"><p @click="childClick">self阻止冒泡</p></div><div @click="sonClick" style="padding:10px;background-color: aqua;"><p @click.stop="childClick">stop阻止冒泡</p></div>
</div>

案例：

<body><div id="app"><!-- 1. 阻止默認事件： .prevent --><a :href="url" @click.prevent>跳轉</a><br><!-- 2. 事件只觸發一次： .once -->{{ count }}<button v-on:click.once = "count++">add</button><br><!--3.  阻止事件冒泡： .stop --><div @click="divClick"><p @click.stop="pClick">冒泡事件</p><p @click="stopClick">冒泡事件vue之前</p></div><br><!-- 4. 采用事件的捕獲模式 .capture --><div @click= 'fatherClick'><div @click.capture="divClick" style="padding: 20px;"><p @click="pClick">捕獲模式</p></div></div><br><!-- 5. 只有event.target是當前操作的元素時才觸發事件: self --><div @click.self="selfClick" style="padding:10px;background-color: aqua;"><p @click="pClick">self</p></div><hr><!-- #region .self 和.stop區別--><!-- .stop 是阻止事件向外繼續冒泡，當你給了子級.stop后他的父級就不會冒泡.self 是我只讓自己不冒泡，其他人我不管--><div @click = 'fatherClick'> <div @click.self="selfClick" style="padding:10px;background-color: aqua;"><p @click="pClick">self阻止冒泡</p></div><div @click="selfClick" style="padding:10px;background-color: aqua;"><p @click.stop="pClick">stop阻止冒泡</p></div></div><br><!-- #endregion --><!-- 7.鏈式寫法 --><div @click='fatherClick'><a :href="url" @click.stop.prevent>鏈式寫法</a></div></div><script>new Vue({el: '#app',data: {count: 1,url:'https://www.baidu.com/'},methods: {// #region// 冒泡捕獲 div標簽divClick(){console.log('div');},// 冒泡捕獲 p標簽pClick(){console.log('p');},// 阻止冒泡事件 舊stopClick(e){console.log(e);e.stopPropagation();},// 比較.self和.stop事件fatherClick(){console.log('父級');},// self自身事件selfClick(e){console.log(e.target);},// #endregion},})</script>
</body>

鍵盤事件 @keyup @keydown

vue之前鍵盤事件：
@keyup = "show"
methods:{
show(e){if(e.keyCode !== 13) returnconsole.log(e.target.value)
}
}

Vue中常見的按鍵別名：

    回車 => enter刪除 => delete退出 => esc空格 => space換行 => tab (配合keydown使用)上 => up下 => down左 => left右 => right

Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但要注意轉為kebeb-case(短橫線命名)
系統修飾鍵(用法特殊)： shift, ctrl, alt, meta(win)
1. 配合keyup使用，按下修飾鍵的同時，再按下其他的鍵，隨后釋放其他鍵，事件才會被觸發
  
  @keyup.ctrl | @keyup.ctrl.y 可以鏈式
2. 配合keydown使用，正常觸發事件
也可以使用keyCode去指定具體的按鍵（不推薦,被淘汰）
<input type="text" @keyup.13="clickEvent" placeholder="huiche">
Vue.config.keyCode.自定義鍵名 = 鍵碼，可以去定制按鍵別名(不推薦)

    <input type="text" @keyup.huiche="clickEvent" placeholder="huiche">Vue.config.keyCodes.huiche = 13

案例：

<body><div id="app"><!-- vue之前鍵盤事件 --><input type="text"  @keyup="show" placeholder="show"><br><!-- #region 1. vue鍵盤別名 --><!-- enter事件 --><input type="text"  @keyup.enter="clickEvent" placeholder="enter"><br><!-- delete事件 --><input type="text"  @keyup.delete="clickEvent" placeholder="delete"><br><!-- esc事件 --><input type="text"  @keyup.esc="clickEvent" placeholder="esc"><br><!-- space事件 --><input type="text"  @keyup.space="clickEvent" placeholder="space"><br><!-- tab事件 --><input type="text" @keydown.tab="clickEvent" placeholder="tab"><br><!-- up事件 --><input type="text" @keyup.up="clickEvent" placeholder="up"><br><!-- down事件 --><input type="text" @keyup.down="clickEvent" placeholder="down"><br><!-- left事件 --><input type="text" @keyup.left="clickEvent" placeholder="left"><br><!-- right事件 --><input type="text" @keyup.right="clickEvent" placeholder="right"><hr><!-- #endregion --><!-- 2. 未提供別名的按鍵 --><input type="text" @keyup.caps-lock="clickEvent" placeholder="caps-lock"><input type="text" @keyup.a="clickEvent" placeholder="a"><hr><!-- 3. 系統修飾符 --><input type="text" @keyup.shift="clickEvent" placeholder="shift"><br><input type="text" @keyup.ctrl="clickEvent" placeholder="ctrl"><br><input type="text" @keydown.alt="clickEvent" placeholder="alt"><br><!-- 可以鏈式 --><input type="text" @keyup.ctrl.x="clickEvent" placeholder="ctrl+x"><br><input type="text" @keyup.huiche="clickEvent" placeholder="huiche"><input type="text" @keyup.40="clickEvent" placeholder="huiche"></div><script>Vue.config.keyCodes.huiche = 13var vm = new Vue({el: '#app',methods: {show(e){if(e.keyCode !== 13) returnconsole.log(e.keyCode, e.target.value);},clickEvent(e){console.log(e.code, e.keyCode, e.target.value);},},})</script>
</body>

2. 計算屬性(computed)

引入：姓名案例，模板語法：vue官網風格指南=> 模板中簡單表達式
定義：要用的屬性不存在，要通過已有的屬性計算得來
原理：利用Object.defineProperty方法提供的getter和setter
get函數什么時候執行？
1. 初次讀取時會執行一次
2. 當依賴的數據發生改變時會被再次調用
優勢：與methods實現相比，內部有緩存機制（復用），效率更高，調試方便
備注：
1. 計算屬性最終會出現在vm上，直接讀取使用即可
2. 如果計算屬性要被修改，那必須寫set函數去響應修改，且set中要引起計算屬性依賴的數據發生變化

const vm = new Vue({
el: '#APP',
data:{firstName: '張'，lastName: '三'
}，
computed:{// 1. 完整寫法fullName:{// get有什么作用？當有人讀取fullName時，get就會被調用，且返回值就是fullName的值// 計算屬性有緩存// get什么時候被調用？ 1. 初次讀取數據會執行一次  2. 當依賴的數據發生改變時會被再次調用get(){console.log('get被調用了')console.log(this) // this指向vmreturn this.firstName + '-' + lastName},// set有什么作用？ 當每次修改fullName時，就會調用setset(value){const arr = value.split('-')// 計算屬性是依賴 firstName，lastName計算出來的，改變fullName需要把依賴的數據改變this.firstName = arr[0]this.lastName = arr[1]}},// 2. 簡寫， // 確定只是讀取，不對fullName做修改，可以簡寫// fullName就是計算屬性的名稱fullName(){return this.firstName + '-' + this,lastName}}
})

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/208081.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/208081.shtml
英文地址，請注明出處：http://en.pswp.cn/news/208081.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！