查漏補缺！這份 VUE 學習知識總結請注意查收！

作者 | 新鮮的橘子

責編 | 王曉曼

出品 | CSDN博客

VUE實例的創建

該實例中的內容將和和下面的例子相對應：

var vm = new Vue({
el:'',
data:{
msg:"我的信息",
msg1:"<span>我是一個html</span>",
mytitle:'title',
list:[
{id:1,name:'zhangsan'},
{id:2,name:'lisi'},
{id:3,name:'wangmazi'},
],
obj:{
id:1,
name:'orange',
age;18
},
flag:'true' ，
style1:{
color:'pink',
'font-size':'30px'
},
style2:{
font-family: monospace;
}
},
methods:{
click{}
}，
filters:{
filter1:function(data){
//代碼塊
}
}
})

基本指令

1.V-Cloak

解決閃爍問題。閃爍問題原因使用插值表達式時若 VUE 還未加載完成則會直接將插值表達式當作文本內容顯示。

2.V-Text

標籤內部的文本會被 mag 變量的值所覆蓋。

v-html 當作 html 頁面元素解析。

如果 msg1 的值是一個 html 標籤字符串，則會將其解析爲 html 元素。

3.V-bind

綁定數據,可以簡寫成:

4.v-on

綁定事件可以簡寫成@

5.v-for

在組件中使用 v-for 循環或者在一些特殊情況中，如果 v-for 出現問題，則必須綁定唯一的 key （值爲字符串或者數字）

（1）迭代數組

<ul>
<li v-for="(item,index) in list" :key="item.id">index----{{ index }}--{{ item.id }}--{{ item.name }}</li>
<ul>

（2）迭代對象

<div v-for="(value,key,index) in obj">{{value}}----{{key}}----{{index}}</div>

（3）迭代數字

6.v-if

如果 flag 爲 false 則 dom 中不會出現這個 h1 標籤。

<h1 v-if="flag">這是一個if控制的h1標籤</h1>

7.v-show

如果 flag 爲 false 則僅僅是將 h1 的 display 設置爲 none。

<h1 v-show="flag">這是一個if控制的h1標籤</h1>

如果頁面中的 dom 元素需要頻繁顯示隱藏建議使用 v-show 指令。

8.v-model

實現數據的雙向綁定常應用於表單中,在下面這個表單輸入值,msg 的數據發生改變同時p標籤裏面的內容也會同步渲染到頁面中。

指令

1、自定義指令

VUE 中的指令都已v-開頭

2、自定義全局指令

第一個參數爲指令的名稱，第二個參數爲對象，在對象裏有一些相關的鉤子函數，在不同的階段執行不同的鉤子函數。

bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可定義一個在綁定時執行一次的初始畫動作。
inserted:被綁定元素插入父節點時調用（父節點存在時即可調用，不必存在於document中）。。
update:所在組件的VNode更新時調用，但是可能發生在其孩子的 VNode 更新之前。指令的值可能發生了改變也可能沒有。但可通過比較更新後的值來忽略不必要的模板更新
componentUpdated:所在組件的 VNode 及其孩子的 VNode 全部更新時調用。
unbind:只調用一次，指令於元素解綁時調用。

3、鉤子函數的參數(el, binding, vnode, oldVnode)

鉤子函數參數的解釋：

Vue.directive('focus',{
bind:function(el,binding){},
inserted:function{el.focus},
update:function{}
})

樣式相關寫在 bind 裏面就行，於 js 行爲相關的寫在 inserted 裏面防止其不生效，例如上面的獲取焦點就寫在了 inserted 中：

Vue.directive('color',{
bind:function(el,binding){
el.style.color=binding.value
},

})

使用定義好的 focus 指令和 color 指令：

自定義私有指令：

var vm2 = new Vue({
el:'',
data:{},
directives:{
'fontWeight':{
bind:function(el,binding){
el.style.fontWeight = binding.value
}
}
}
})

函數簡寫

大多數情況下可能只想在 bind 和 update 鉤子函數上做重複的動作，不關心其他鉤子函數可以簡寫爲：

Vue.directive('color-swatch',function(el,binding){
el.style.backgroundColor =binding.value
})

1、事件修飾符

.stop阻止冒泡
.prevent阻止默認事件
.capture添加事件偵聽器時使用事件捕獲模式
.self只當事件在該元素本身觸發時觸發回調
.once事件只觸發一次

2、事件冒泡：觸發子元素的事件時，父級元素相同事件也會依次向上觸發 -孫子-父親-爺爺。

3、事件捕獲：在冒泡之前會有一個事件捕獲過程和冒泡順序相反 -爺爺-父親-孫子。

使用方式：

4、按鍵修飾符

.enter 當按下 enter 鍵時才調用 click 方法，enter 也可以用相應的字符編碼代替。

只有少數的按鍵纔可以寫按鍵名稱 enter tab delete esc space up down left right。

當然也可以自定義鍵盤修飾符：

Vue.config.keyCodes.name = code //name爲名稱，code爲按鍵編碼

接着就可以使用這個自定義的按鍵修飾符了。

在VUE中使用樣式

1、使用 class 樣式

（1）數組

（2）對象

2、使用 style 樣式

（1）直接在元素上設置

<h1 :style="{color:'pink','font-size':'30px'}">我是大橘子</h1>

（2）在 data 中設置，通過 :style 引用

<h1 :style="style1">我是大橘子</h1>

（3）在 :style 通過數組引用多個樣式對象

<h1 :style="[style1,style2]">我是大橘子</h1>

過濾器

1、過濾器的定義

全局過濾器的定義：

Vue.filter('filterName',(data)=>{//代碼塊})

第一個參數爲過濾器的名稱，第二個參數爲一個函數，函數的第一個參數爲要處理的變量其他參數可隨意指定。

2、私有過濾器的定義

在最上面的 vm 實例中的 filters 對象中定義了一個名稱 filter1 的過濾器。

3、過濾器的調用

如果全局和私有過濾器名稱一樣，則會優先調用私有過濾器。

調用時傳遞的第一個參數爲定義時的第二個參數，因爲第一個參數已經被佔了。

管道符前面爲傳遞的數據，管道符後面爲過濾器的名字。

生命週期

生命週期中的鉤子函數有8個每個的作用都在下面代碼的註釋中：

var vm2 = new Vue({
el:'',
data:{},
//創建階段
beforeCreate{},//實例創建之前執行
created{},

beforeMount{},//模板已經在內存中完成，打包尚未渲染到頁面中
mounted{}, //內存中的模板已經掛載到頁面中
//運行階段
beforeUpdate{},//數據被更新但尚未渲染到頁面中,數據更新時纔會調用
updated{},//數據已經渲染到頁面中
//銷燬階段
beforeDestory{},//data methods 過濾器都是可用的還未執行銷燬過程
destoryed{} //組件已經被銷燬，所有的東西已不可用

})

1、動畫

過渡類動畫：

使用v-的時候會爲所有的元素動畫元素都加上這個樣式，如果要給特定的樣式，只需要給 transition 標籤加上 name 屬性，然後將 **v-改爲name-** 即可。

2、組件

（1）組件的定義

組件通俗來講就是一個個小型，獨立的可複用的東西，比如我們的一個頁面是由 html 標籤堆積起來的，這些標籤就可以理解爲組件，當然這只是一個通俗的說法，具體概念還請查閱 VUE 官網。

下圖展示一個應用界面被抽象爲一個組件樹：

（2）全局組件

第一個參數爲組件的名稱，我在這裏定義了一個 comp4 的組件“，第二個參數爲一個對象。template 模板內容只能有一個根元素(div)。

Vue.component('comph4', {
template: '<div><h4>這是一個h4標題</h4></div>'
})

以上方法在輸入模板內容時在編輯器內無任何智能提示,所以我將 template 模板內容放在外面。

template 我給他傳遞一個ID 選擇器 cmp4，並在外部通過 template 標籤定義模板內容。

<template id="cmp4">
<div>
<h4>這是一個h4標題</h4>
</div>
</template>
<script>
Vue.component('comph4', {
template: '#cmp4'
})
</script>

（3）私有組件

下面這個 copmh4 就只能在 app1 下面調用，我還是使用了將模板內容放在外部的方法。

var vm = new Vue({
el:'#app1',
data:{},
methods:{},
components:{
comph3:{
template:'#cmp3'
}
}
})

3、組件的調用

組件調用就和寫 html 標籤一樣,comp4 組件就可以在全局中調用，而 cmp3 只能在 app1 中調用：

<body>
<comp4><comp4>
<div id="app1">
<comp3><comp3>
</div>
<template id="cmp4">
<div>
<h4>這是一個h4標題</h4>
</div>
</template>
<template id="cmp3">
<div>
<h3>這是一個h3標題</h3>
</div>
</template>
</body>

4、組件中的其他知識

（1）data 的不同

組件和實例一樣也可以擁有自己的data數據和 methods 方法，和實例中 data不同的是，組件中的 data 必須爲一個函數，且這個函數必須返回一個對象。

Vue.component('comph4', {
template: '#cmp4',
data: function{
return{
msg：'msg這是組件中data中的數據'
}
},
methods:{}
})

（2）組件的切換

eg：在 VUE 實例的 data 中定義一個變量通過同過點擊不同的按鈕給 data 變量賦不同的值，根據不同的值來選擇顯示哪個組件。

<div id="app1">
<input type="button" value="cmph3" @click="iscom='comph3'">
<input type="button" value="cmph4" @click="iscom='comph4'">
<component :is="iscom"></component>
</div>
var vm = new Vue({
el:'#app1',
data:{
iscom:''
}
})

（3）父子組件之間的傳值

原理：父組件在引用子組件的時候通過屬性綁定，將父組件的數據綁定給子組件，綁定方法通過事件綁定。

注意：必須將綁定的屬性在子組件的 props 數組中定義一下，且父組件傳過來的值是可讀的，組件自己 data 裏的數據是可讀可寫的。

通過屬性綁定將父組件的 msg 傳給子組件，並且通過事件綁定，將 show 方法傳遞給子組件，子組件在接收父組件的值時，在 props 數組中定義。

子組件傳遞給父組件通過==$emit==,第一個參數爲綁定事件的名稱，第二個參數爲要傳遞的值，如果只是父組件向子組件傳遞方法，則不必傳遞第二個參數。

說白了子組件向父組件傳值，其實就是父組件向子組件傳遞方法的同時接收子組件反饋過來的數據罷了。

<div id="app1">
<comph4 :fromParent="msg" @fun="show"></comph4>
</div>
var vm = new Vue({
el:'#app1',
data:{
msg:'我是父組件中的msg',
fromSon:null
},
methods:{
show(data){ //父組件的show方法接收一個參數
this.fromeSon=data; //將從子組件接收過來的data賦值給父組件的fromSon
}
}
compents:{
comph4:{
template:'<div>
<h4>我是一個h4---{{fromParent}}</h4>
<input type="button" value="調用父組件中的方法" @click=”myclick“>
</div>'，
props:['fromParent'],
data:function{
return {
data:{name:'orange',age:18}
}
},
methods:{
myclick{
this.$emit('fun',this.data) //將子組件中的data傳遞給父組件
}
}
}
}
})

你點的每個“在看”，我都認真當成了喜歡