vue 知識點總結
阿新 • • 發佈：2018-11-07
vue 知識點總結
目錄 vue 知識點總結一，實現第一個Vue頁面二，通過{{}} 表示式在檢視層裡渲染資料，在重新整理頁面時，會出現閃爍現象。三，v-if與v-show的異同和使用場景。四，v-model與v-bind。五，v-on與methods六，v-for以及v-for中的key值七，事件修飾符八，過濾器 私有過濾器 filters全域性過濾器 filter九，自定義指令十，鍵盤修飾符十一，生命週期
一，實現第一個Vue頁面
01.下載檔案並引入 引入之後，在我們瀏覽器的記憶體中，多了一個Vue建構函式。 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script> 02.例項化vue應用程式 new Vue({引數配置}) 03.通過配置el去關聯檢視層 ---即使用者能看到的頁面 04.通過配置data去設定相關的引數屬性，即儲存資料 05.通過{{}} 表示式在檢視層裡渲染資料。 <!-- 這是 MVVM中的 V view 檢視 --> <div class="app"> <h1>{{ msg }}</h1> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script> <script type="text/javascript"> //這是 MVVM中的 VM viewmodel 檢視模型 let vm = new Vue({ //el 就是element 元素的意思 ，其作用：與頁面關聯的 el:'.app', //這裡data就是MVVM中的 M model 資料模型，專門儲存資料的 data:{ msg:'hello world' } }) </script>
二，通過{{}} 表示式在檢視層裡渲染資料，在重新整理頁面時，會出現閃爍現象。
解決： ① 使用 v-cloak ，設定樣式。
[v-cloak]{display: none;}
<h1 v-cloak>{{msg}}</h1>
② 使用 v-text或者v-html
<h2 v-text = 'msg'>=====</h2>
<h2 v-html = 'msg'>=====</h2>
區別： 後者會覆蓋元素裡原本的內容
三，v-if與v-show的異同和使用場景。
v-if =‘ true或者false ’ v-show=‘ true或者false ’ 相同點：都可以動態控制元素顯示和隱藏 區別： v-if 將整個dom元素新增或者刪除 v-show 顯示和隱藏 效能消耗： v-if 有更高的切換的消耗 v-show 有更高的渲染消耗 使用場景： v-if 適合運營條件改變不大的時候 v-show 適合頻繁切換
四，v-model與v-bind。
v-model 用於 input 標籤，在input元素上進行雙向繫結資料
v-bind用於單向繫結屬性和資料 ，其縮寫為“ : ” 也就是v-bind:id === :id
五，v-on與methods
<div id="App"> // mygame 是屬性值 <p>{{mygame}}</p> // v-on:click="clickme('do you like game')" v-on 監聽事件,click是點選事件型別 <button v-on:click="clickme('do you like game ?')" >no</button> // @click事件監聽簡寫@click="clickme('yes iam like game')" <button @click="clickme('yes i am like game')" > yes</button> </div> var App = new Vue({ el: "#App", data: { //資料區data mygame: "超級馬里奧", }, methods: { //函式區 methods clickme: function (value) { this.mygame = value; }, }, });
六，v-for以及v-for中的key值
v-for 根據一組陣列的選項列表進行渲染
語法： v-for = "item in arr"
item: 數組裡的每一個元素
arr： 陣列
<p v-for='item in list' :key='item.id'>
<input type="checkbox">
{{item.id}}==={{item.name}}
</p>
let vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'小明'},
{id:2,name:'小紅'},
{id:3,name:'小黑'},
{id:4,name:'小白'},
]
},
})
:key=‘item.id’ ==> 便於能跟蹤每個節點的身份，從而重用和重新排序現有元素，需要為每項提供一個唯一
key 屬性。理想的 key 值是每項都有的且唯一的 id。 但它的工作方式類似於一個屬性，
所以你需要用 v-bind 來繫結動態值
七，事件修飾符
-
.stop 阻止冒泡
-
.prevent 阻止預設事件
-
.capture 新增事件偵聽器時使用事件捕獲模式
-
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發回撥
-
.once 事件只觸發一次
<div id="app"> <!-- .stop阻止別人的冒泡 點選btn時，只會觸發btn（）事件， 而不會因為冒泡而觸發div（）事件--> <div class="myDiv" @click = 'div（）'> <button @click.stop = 'btn'>點選</button> </div> <!-- .prevent 阻止預設事件 點選a標籤時，頁面不會跳轉到http://www.baidu.com--> <a href="http://www.baidu.com" @click.prevent = 'aClick'></a> <!-- .capture 新增事件偵聽器時使用事件捕獲模式 觸發順序 點選btn時，div（）方法先觸發，btn（）方法後觸發--> <div class="myDiv" @click.capture = 'div（）'> <button @click = 'btn'>點選</button> </div> <!-- .self 只會阻止自身的冒泡行為 點選btn時，會觸發btn（）和 outDiv（）事件，而不會觸發 Div（）事件--> <div class="outDiv" @click = 'outDiv（）'> <div class="myDiv" @click.self = 'div（）'> <button @click = 'btn（）'>點選</button> </div> </div> <!-- .once 事件只觸發一次 阻止一次頁面跳轉事件--> <a href="http://www.baidu.com" @click.prevent.once = 'aClick'></a> </div>
八，過濾器
Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號值
和 v-bind 表示式。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示：
過濾器的定義語法：
在html中 過濾器呼叫時候的格式 {{ item.name | 過濾器的名稱 }}
在js中定義過濾器 Vue.filter('過濾器的名稱'，function(){})
函式裡面的引數 第一個引數永遠是需要過濾的資料，已經規定好了
Vue.filter('過濾器的名稱'，function(data){})
return 過濾器的名稱
注意： 當有區域性和全域性兩個名稱相同的過濾器時候，會以就近原則進行呼叫，
即：區域性過濾器優先於全域性過濾器被呼叫！
私有過濾器 filters
1.HTML元素
<td>{{item.ctime | dataFormat()}}</td>
2.私有 filters 定義方式：
filters: { // 私有區域性過濾器，只能在 當前 VM 物件所控制的 View 區域進行使用
'dataFormat' function (dateStr) {
// 根據給定的時間字串，得到特定的時間
var dt = new Date(dateStr);
// yyyy-mm-dd
var y = dt.getFullYear();
//先轉字串,再補全
var m = (dt.getMonth() + 1).toString().padStart(2,'0');
var d = dt.getDate().toString().padStart(2,'0');
// 字串補全: padStart()用於頭部補全，padEnd()用於尾部補全。
padStart(引數一，引數2)
引數一: 補全完畢之後字串的總長度,
引數2,用來補全的字串。
var h = dt.getHours().toString().padStart(2,'0');
var mm = dt.getMinutes().toString().padStart(2,'0');
var s = dt.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-${d} ${h}:${mm}:${s}`
}
}
全域性過濾器 filter
3.全域性 filter定義方式：
Vue.filter('dateFormat', function (dateStr) {
// 根據給定的時間字串，得到特定的時間
var dt = new Date(dateStr);
// yyyy-mm-dd
var y = dt.getFullYear();
//先轉字串,再補全
var m = (dt.getMonth() + 1).toString().padStart(2,'0');
var d = dt.getDate().toString().padStart(2,'0');
// 字串補全: padStart()用於頭部補全，padEnd()用於尾部補全。
padStart(引數一，引數2)
引數一: 補全完畢之後字串的總長度,
引數2,用來補全的字串。
var h = dt.getHours().toString().padStart(2,'0');
var mm = dt.getMinutes().toString().padStart(2,'0');
var s = dt.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-${d} ${h}:${mm}:${s}`
});
九，自定義指令
1.HTML元素
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
2.自定義全域性指令和區域性指令：
//自定義全域性指令 v-focus，為繫結的元素自動獲取焦點：
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被繫結元素插入父節點時呼叫
el.focus();
}
});
//自定義區域性指令 v-color 和 v-font-weight，為繫結的元素設定指定的字型顏色 和 字型粗細：
directives: {
color: { // 為元素設定指定的字型顏色
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) {
// 自定義指令的簡寫形式，等同於定義了 bind 和 update 兩個鉤子函式
el.style.fontWeight = binding2.value;
}
}
//定義全域性的指令 v-focus
//注意：呼叫時，必須要在指令名稱加上v-字首
// 定義時 名稱 ---> focus
//引數1：指令的名稱
//引數2：是一個物件，在這個物件上有一些指令相關的函式，
// 這些函式可以再特定的階段執行相關的操作
Vue.directive('focus',{
bind:function (el) {//每當指令繫結到元素身上時，會立即執行這個bind函式，只執行一次
el.focus();
//元素剛繫結指令的時候，只是解析到記憶體當中了，還沒有插入到DOM中
//和顏色相關的可以在bind中執行
},
inserted:function (el) {//當元素插入到Dom中的時候，會執行inserted函式，只執行一次
el.focus();
//和js行為相關的操作，最好在inserted中執行，防止不生效。
},
update:function (el) {//當DOM節點更新的時候，會執行，會觸發多次
// body...
}
})
十，鍵盤修飾符
1.常見鍵盤修飾符
<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
//簡寫
<input @keyup.enter="submit">
全部的按鍵別名：
- enter
- tab
- delete
- esc
- space
- up
- down
- left
- right
2.自定義鍵盤修飾符
通過Vue.config.keyCodes.名稱 = 按鍵值來自定義案件修飾符的別名：
Vue.config.keyCodes.f2 = 113;
使用自定義的按鍵修飾符：
<!-- 只有在 keyCode 是 113 時呼叫 vm.add() -->
<input type="text" v-model="name" @keyup.f2="add">
十一，生命週期
- 什麼是生命週期：從Vue例項建立、執行、到銷燬期間，總是伴隨著各種各樣的事件，這些事件，統稱為生命週期！
- 生命週期鉤子：就是生命週期事件的別名而已；
- 生命週期鉤子 = 生命週期函式 = 生命週期事件
1.html元素
<button @click = "msg='no'">修改msg</button>
<h1 id="h1"> {{msg}} </h1>
2.生命週期
let vm = new Vue({
el:'#app',
data:{
msg:'ok'
},
methods:{
show(){
console.log('執行了show方法')
}
},
beforeCreate(){//第一個生命週期函式 表示在例項創建出來之前，會執行他
console.log(this.msg);
this.show();
//說明：data和methods中的方法還沒有初始化
},
created(){//第二個生命週期函式
console.log(this.msg);
this.show();
//說明：data和methods中的方法已經初始化
},
beforeMount(){//第三個生命週期函式 表示模板已經在記憶體當中編輯完了，尚未渲染在頁面當中
console.log(document.getElementById('h1').innerText);
// this.show();
//說明：在記憶體當中編輯完了，尚未渲染在頁面當中
},
mounted(){//第四個生命週期函式 表示模板已經在渲染到頁面當中
console.log(document.getElementById('h1').innerText);
// this.show();
//說明：模板已經在渲染到頁面當中
},
beforeUpdate(){//第五個生命週期函式
console.log("頁面上的內容"+document.getElementById('h1').innerText);
console.log("記憶體data裡面的內容"+this.msg)
//說明：顯示在頁面當中的資料還未更新，而data的資料已經更新
},
updated(){//第六個生命週期函式
console.log("頁面上的內容"+document.getElementById('h1').innerText);
console.log("記憶體data裡面的內容"+this.msg)
//說明：顯示在頁面當中的資料和data的資料已經同步更新
},
beforeDestroy(){//第七個生命週期函式，
//例項銷燬之前呼叫。在這一步，例項仍然完全可用。
},
destroyed(){//第八個生命週期函式，
//Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，
所有的事件監聽器會被移除，所有的子例項也會被銷燬。
},
})