前言
當前總結是本人在業余學習與實踐過程后的總結與歸納,旨在檢驗自己的積累,也方便忘記時查閱,同時也希望能幫助那些這方面知識匱乏的同行門,總結是基於vue2.x,vue-cli3.x,主要記錄些,vue常用的指令、事件,監聽、數據綁定、過濾器、組件、動畫、vuex,vue-router等日常工作中時常用到的東西,也有些常用的插件和開發工具的介紹與使用,以及部分性能優化的建議與實踐,如有不對,或不足的地方,也請各位大神,指出來,學習學習。
1.基礎
1. 理解mvvm
m 是vue實例中的data,自定義的數據或后端返回的數組
不是后端mvc里的model概念不同。
vm 是vue的實例 m和v之間的調度者 是mvvm的核心思想
v是 html 要渲染的。
2. 常用指令
v-cloak 解決{{}}插值閃爍問題
v-text 會先執行 覆蓋 元素中原本的內容 但是插值表達式只會覆蓋自己的占位符,默認不會閃爍
v-html 渲染 html標簽 覆蓋元素中原有元素內容
v-bind: 簡寫為: 用來綁定數據 可以寫合法的js表達式
v-on: 簡寫為 @ 用來點擊事件
3.常用事件修飾符
stop 阻止冒泡 :外層和里層都有方法 點擊里層會產生冒泡,也會觸發外層的事件。
順序 從里到外產生事件
prevent 阻止瀏覽器默認行為 :
a標簽有瀏覽器默認行為。
capture 捕獲事件 :點擊里層先觸發外層再觸發里層 順序從外到里產生事件
self 只觸發自己本身的事件 不會產生冒泡和捕獲事件 類似於阻止冒泡 但只針對自己那一層 最外層還是會被最里層冒泡冒到 stop 是阻止所有層次
once 事件只執行一次
4.數據的綁定
v-bind: 數據的單向綁定
v-modle :數據的雙向綁定 這個只能用於表單元素中
tips: 表單元素 radio text address email select checkbox textarea
5.class 綁定
1.數組帶對象
<div :class="[classA,classB,{'classC':flag}]" >
data(){
return{
flag:true
}
}
tips:可以在類中的數組中寫三元表達式,但推薦使用對象來代替它控制是否渲染
————————————————
版權聲明:本文為CSDN博主「yaoxfly」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/u010716530/article/details/103754983
