vue2總結
阿新 • • 發佈：2022-03-18
一.Vue介紹
1.vue是一套用於構建使用者介面的漸進式的JavaScript框架
2.vue的特點:
a.採用元件化模式,提高程式碼複用率,且讓程式碼更好維護
b.宣告式編碼,讓編碼人員無需直接操作DOM,提高開發效率
c.使用虛擬DOM + 優秀的Diff演算法,儘量複用DOM節點
3.學習Vue前,最好掌握這些基礎知識:
ES6語法規範,ES6模組化,包管理工具,原型,原型鏈,陣列常用方法,axios,promise
二.插值語法
功能：用於解析標籤體內容。 寫法：{{xxx}}，xxx是js表示式(一個表示式會產生一個值，可以放在任何一個需要值的地方)，且可以直接讀取到data中的所有屬性三.指令語法
功能：用於解析標籤（包括：標籤屬性、標籤體內容、繫結事件.....）。 備註：Vue中有很多的指令，且形式都是：v-????a.v-text 和 v-html
v-text : 1.作用：向其所在的節點中渲染文字內容。 2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。 v-html : 1.作用：向指定節點中渲染包含html結構的內容。 2.與插值語法的區別： (1).v-html會替換掉節點中所有的內容，{{xx}}則不會。 (2).v-html可以識別html結構。 3.嚴重注意：v-html有安全性問題！！！！b.v-cloak
1.本質是一個特殊屬性,Vue例項建立完畢並接管容器後,會刪掉v-cloak屬性. 2.使用css配合v-cloak可以解決網速慢時頁面展示出{{ xxx }}的問題<style> [v-cloak]{ display:none; } </style> </head> <body> <div id="root"> <h2 v-cloak>{{name}}</h2> </div> </body>
c.v-once
1.v-once所在節點在初次動態渲染後,就視為靜態內容了.
2.以後資料的改變不會引起v-once所在結構的更新,可以用於優化效能
<body> <div id="root"> <h2 v-once>初始化的n值是:{{n}}</h2> <h2>當前的n值是:{{n}}</h2> <button @click="n++">點我n+1</button> </div> </body> <script type="text/javascript"> new Vue({ el:'#root', data:{ n:1 } }) </script>
d.v-pre
1.跳過其所在節點的編譯過程. 2.可利用它跳過:沒有使用指令語法,沒有使用插值語法的節點,會加快編譯e.v-bind
v-bind:href="xxx" 簡寫為 :href="xxx" xxx同樣要寫js表示式，且可以直接讀取到data中的所有屬性。<div id="root"> 正常 :<a v-bind:href="school.url.toUpperCase()" x="hello">點我去{{school.name}}學習1</a> 簡寫 :<a :href="school.url" x="hello">點我去{{school.name}}學習2</a> </div>
v-bind和插值語法的區別 :
v-bind : 一般都是寫在屬性的
插值語法 : 一般都是寫在標籤內容
f.v-model和v-bind [ 資料繫結 ]
Vue中有2種資料繫結的方式 : 1.v-model(雙向資料繫結) : 資料不僅能從data流向頁面,還可以從頁面流向data 2.v-bind(單向資料繫結) : 資料只能用data流向頁面 3.注意 : 1.雙向繫結一般都應用在表單類元素上（如：input、select等） 2.v-model:value 可以簡寫為 v-model，因為v-model預設收集的就是value值。<body> <div id="root"> <!-- 普通寫法 --> 單向資料繫結：<input type="text" v-bind:value="name"><br/> 雙向資料繫結：<input type="text" v-model:value="name"><br/> <!-- 簡寫 --> 單向資料繫結：<input type="text" :value="name"><br/> 雙向資料繫結：<input type="text" v-model="name"><br/> <!-- 如下程式碼是錯誤的，因為v-model只能應用在表單類元素（輸入類元素）上 --> <h2 v-model:x="name">你好啊</h2> </div> </body> <script type="text/javascript"> new Vue({ el:'#root', data:{ name:'海賊王' } }) </script>
g.v-on(點選事件)
一.事件的基本使用
1.使用v-on:xxx 或 @xxx 繫結事件，其中xxx是事件名； 2.事件的回撥需要配置在methods物件中，最終會在vm上； 3.methods中配置的函式，不要用箭頭函式！否則this就不是vm了； 4.methods中配置的函式，都是被Vue所管理的函式，this的指向是vm 或 元件例項物件； 5.@click="demo" 和 @click="demo($event)" 效果一致，但後者可以傳參；$event是第一個引數<body> <div id="root"> <button v-on:click="showInfo1">不簡寫 :（不傳參）</button> <!-- $event是固定的哦 --> <button @click="showInfo2($event,66)">簡寫 :（傳參）</button> </div> </body> <script type="text/javascript"> const vm = new Vue({ el:'#root', methods:{ showInfo1(event){ alert('同學你好！') }, showInfo2(event,number){ console.log(event,number) alert('同學你好！！') } } }) </script>
二.事件修飾符
1.prevent：阻止預設事件（常用）； 2.stop：阻止事件冒泡（常用）； 3.once：事件只觸發一次（常用）； 4.capture：使用事件的捕獲模式； 5.self：只有event.target是當前操作的元素時才觸發事件； 6.passive：事件的預設行為立即執行，無需等待事件回撥執行完畢；<body> <div id="root"> <!-- 阻止預設事件（常用） --> <a href="http://www.atguigu.com" @click.prevent="showInfo">點我提示資訊</a> <!-- 阻止事件冒泡（常用） --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">點我提示資訊</button> <!-- 修飾符可以連續寫 --> <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">點我提示資訊</a> </div> <!-- 事件只觸發一次（常用） --> <button @click.once="showInfo">點我提示資訊</button> <!-- 使用事件的捕獲模式 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是當前操作的元素時才觸發事件； --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">點我提示資訊</button> </div> <!-- 事件的預設行為立即執行，無需等待事件回撥執行完畢； -->
@scroll 是給滾動條加的滾動事件
@wheel 是個滾輪加的滾動事件 -- 就是你滾到底部了,還是可以繼續滾輪的
<ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el:'#root', methods:{ showInfo(e){ alert('同學你好！') // console.log(e.target) }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累壞了') } } }) </script>
三.鍵盤事件
@keyup 按下抬起,才觸發 --- 一般使用這個
@keydown 按下就觸發
1.Vue中常用的按鍵別名： 回車 => enter 刪除 => delete (捕獲“刪除”和“退格”鍵) 退出 => esc 空格 => space 換行 => tab (特殊，必須配合keydown去使用) 上 => up 下 => down 左 => left 右 => right2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去繫結，但注意要轉為kebab-case（短橫線命名）
3.系統修飾鍵（用法特殊）：ctrl、alt、shift、meta (1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。 (2).配合keydown使用：正常觸發事件。
4.也可以使用keyCode去指定具體的按鍵（不推薦） 5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定製按鍵別名
<div id="root"> <h2>歡迎來到{{name}}學習</h2> <input type="text" placeholder="按下回車提示輸入" @keydown.huiche="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.keyCodes.huiche = 13 //定義了一個別名按鍵 new Vue({ el:'#root', data:{ name:'尚矽谷' }, methods: { showInfo(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script>
i.v-if 和v-show [ 條件渲染 ]
1.v-if
寫法： (1).v-if="表示式" (2).v-else-if="表示式" (3).v-else="表示式" 適用於：切換頻率較低的場景。 特點：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求結構不能被“打斷”。2.v-show
寫法：v-show="表示式" 適用於：切換頻率較高的場景。 特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉 3.備註： 使用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到。 template與v-if可以配合使用,與v-show不可以!!j.v-for
k.