[題外話：ES6的新特性](https://www.jianshu.com/p/ac1787f6c50f)

MVVM模式

實(shí)例： ?

項(xiàng)目的目錄結(jié)構(gòu)： ?

項(xiàng)目的運(yùn)行方式： ?

數(shù)據(jù)代理

? ? let a={x:1,y:2};

? ? let b={z:1};

? ? Object.defineProperty(b,'x',{

? ? ? ? get(){

? ? ? ? ? ? return a.x;

? ? ? ? },

? ? ? ? set(value){

? ? ? ? ? ? a.x=value

? ? ? ? }

? ? })

通過修改b中的x屬性就可以修改a中的x.

vue使用同樣的原理: 當(dāng)我們在vue實(shí)例中定義data時(shí), data中的數(shù)據(jù)就會被以同樣的方式被copy到vm(vue實(shí)例, 也是mvvm中的vm)上, 在vue實(shí)例的_data就是定義的data.

這解釋了為什么vue中在data中設(shè)置了數(shù)據(jù), 可以通過this.???調(diào)用, this指的就是vm, 即vue的實(shí)例, vm中被同步了data中的數(shù)據(jù), 一旦發(fā)生修改data中的數(shù)據(jù)會被修改則是因?yàn)槭褂昧藬?shù)據(jù)代理.

指令

v-cloak

該指令其本質(zhì)上是保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯，保持期間運(yùn)行指令定義的邏輯。

v-text

? ? <div v-html="msg">ddddd</div>

? ? <script>

? ? ? ? var vw=new Vue({

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? msg: '<h1>zzzzzz</h1>'

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

v-html也會直接覆蓋標(biāo)簽中的文本，但是它在解析時(shí)會將h1這樣的元素當(dāng)成html內(nèi)容，不會原樣解析，這是v-text或插值表達(dá)式不能做到的，這兩者是直接解釋。

v-bind

**注意：v-bind：可以被簡寫為 ：，它會把后面的屬性值中的內(nèi)容理解為js處理，所以 ：title=“mytitle+‘123’” 是可以被解釋為mytitle變量值與123的字符串拼接。**

插值表達(dá)式通常用于指定標(biāo)簽內(nèi)部的顯示, v-bind用于標(biāo)簽屬性的指定.

插值表達(dá)式中可以使用vue實(shí)例中的任何一個(gè)屬性字段.

v-on

該指令用于綁定事件,**縮寫為 @**。

? ? <input type="button" v-on:click="show">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el: '..........',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? ...........

? ? ? ? ? ? },

? ? ? ? ? ? methods:{

? ? ? ? ? ? ? ? show: function (){

? ? ? ? ? ? ? ? ? ? alert("Hello!");

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

這里值得一提的另一件事:

? ? <input type="button" v-on:click="show(33333)">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el: '..........',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? ...........

? ? ? ? ? ? },

? ? ? ? ? ? methods:{

? ? ? ? ? ? ? ? show(value){

? ? ? ? ? ? ? ? ? ? alert(value);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

JS中的函數(shù)調(diào)用默認(rèn)會傳入一個(gè)event作為隱藏參數(shù), 即

? ? <input type="button" v-on:click="show">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el: '..........',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? ...........

? ? ? ? ? ? },

? ? ? ? ? ? methods:{

? ? ? ? ? ? ? ? show(event){

? ? ? ? ? ? ? ? ? ? alert(event.target); //這里的target就會顯示上面那個(gè)button.

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

但一旦我們傳入?yún)?shù)show(33333), 就會導(dǎo)致event這個(gè)隱藏參數(shù)失效.

所以:

? ? <input type="button" v-on:click="show(33333,$event)">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el: '..........',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? ...........

? ? ? ? ? ? },

? ? ? ? ? ? methods:{

? ? ? ? ? ? ? ? show(value,event){

? ? ? ? ? ? ? ? ? ? alert(event.target); //這樣就可以保留event這個(gè)參數(shù), 該參數(shù)在很多需求的實(shí)現(xiàn)時(shí)會很有用, 可使用此方式保留.

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

?“跑馬燈”功能:

在vue實(shí)例中訪問自身的問題： ?

課題代碼： ?

v-model

雙向數(shù)據(jù)綁定指令。 ?

v-model用于收集表單元素的value值, v-model:value=???, 可以簡寫成v-model=???

v-for

循環(huán)普通數(shù)組 ?

循環(huán)對象數(shù)組 ?

循環(huán)對象的屬性 ?

迭代數(shù)字 ?

注意：v-for在渲染時(shí)可能會有下列問題：

v-for練習(xí)

v-show和v-if

當(dāng)v-if的值切換時(shí)，會不斷的進(jìn)行元素的創(chuàng)建和刪除，而v-show是一定創(chuàng)建然后進(jìn)行是否顯示的切換，所以**v-if有較高的切換性能消耗，而v-show有較高的初始渲染消耗。**

自定義指令

自定義全局指令

指令設(shè)置函數(shù)的其他參數(shù)： ?

? ? binding：一個(gè)對象，包含以下屬性:

? ? ? ? name: 指令名，不包括 v-前綴

? ? ? ? value: 指令的綁定值，例如：v-my-directive=‘1+1’，value的值是2

? ? ? ? oldValue: 指令綁定的前一個(gè)值，只在update和componentUpdated中可用，無論值是否改變都可用。

? ? ? ? expression: 綁定值的字符串形式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。

? ? ? ? arg: 傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。

? ? ? ? modifiers: 一個(gè)包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

? ? vnode：vue編譯生成的虛擬節(jié)點(diǎn)

? ? oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在update和componentUpdated鉤子中可用。

除了 el 之外，其他參數(shù)應(yīng)該是只讀的，盡量不要修改它們。如果需要在鉤子函數(shù)之間共享參數(shù)，建議通過元素的dataset進(jìn)行。 ?

自定義私有指令

使用directives屬性進(jìn)行相關(guān)設(shè)置： ?

函數(shù)簡寫

此時(shí)函數(shù)中的內(nèi)容將被認(rèn)為同時(shí)寫入update和bind中。??

事件修飾符

**.stop阻止冒泡：** ?

**.prevent阻止默認(rèn)行為：** ?

只阻止元素默認(rèn)的行為，對于點(diǎn)擊事件等是不阻止的。 ?

**.capture添加事件偵聽器時(shí)使用事件捕獲模式：** ?

添加該修飾，將導(dǎo)致從外向內(nèi)觸發(fā)函數(shù), 即捕獲階段就啟動函數(shù), 而不加該修飾符默認(rèn)使用冒泡模式, 在捕獲階段不會有動靜。 ?

**.self只當(dāng)事件在該元素本身(比如不是子元素)觸發(fā)時(shí)觸發(fā)回調(diào)：** ? ?

**.once事件只觸發(fā)一次：** ? ?

.self和.stop的區(qū)別： ?

按鍵修飾符

vue可以使用@keyup開啟對于鍵盤按鍵抬起事件的監(jiān)聽，通過在后面添加修飾符可以控制響應(yīng)特定的按鍵。

系統(tǒng)開放的按鍵修飾符： ?

? ? .enter

? ? .tab (特殊, 配合keydown使用,不要keyup, tab鍵本身有切換焦點(diǎn)的功能)

? ? .delete

? ? .esc

? ? .space

? ? .up

? ? .down

? ? .left

? ? .right

對于沒有的按鍵，方法一：@keyup.13 這里的13就是enter鍵的鍵碼。 ?

其他鍵碼： [JS keyCode鍵碼](https://www.cnblogs.com/cnblogs-jcy/p/6409672.html)

也可以使用event.keyCode進(jìn)行顯示.

如果要鍵盤監(jiān)聽ctrl+y這樣的多鍵連用, 則@keyup.ctrl.y="????"

自定義按鍵修飾符： ?

計(jì)算屬性

? ? computed:{

? ? ? ? newProperty:{ ?//newProperty就是你要新增的動態(tài)屬性

? ? ? ? ? ? get(){

? ? ? ? ? ? ? ? return ???

? ? ? ? ? ? },

? ? ? ? ? ? set(value){

? ? ? ? ? ? }

? ? ? ? }

? ? }

簡寫, (簡寫時(shí)一定是明確要放棄使用set部分才行):

? ? computed:{

? ? ? ? newProperty(){ ?//newProperty就是你要新增的動態(tài)屬性

? ? ? ? ? ? return ???

? ? ? ? }

? ? }

VUE中使用樣式

class樣式

[數(shù)組中的方法](https://blog.csdn.net/qq_42303885/article/details/85332359) ?

使用v-bind綁定數(shù)組

<div :class="['red','thin']"> ?//其中red和thin都是定義好的class，注意數(shù)組內(nèi)的引號不能省略！

v-bind與數(shù)組結(jié)合使用時(shí)，數(shù)組內(nèi)可以使用三元表達(dá)式

? ? //當(dāng)數(shù)組中的字符沒有被引號修飾，將被解析為變量，flag將被解析為變量，使用三元表達(dá)式確定后面的class

? ? <div id='app' :class="['red','thin',flag?'active':'']">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el:'#app',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? flag:true

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

v-bind與數(shù)組結(jié)合使用時(shí)，數(shù)組內(nèi)可以使用對象

? ? //在對象中使用class作為key，用變量作為value，以決定class是否被應(yīng)用

? ? <div id='app' :class="['red','thin',{'active':flag}]">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el:'#app',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? flag:true

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

v-bind綁定的class中直接使用對象

?//這種情況下對象的屬性可以省略引號，對象屬性設(shè)置為class，對象值設(shè)置為true/false

?<div id='app' :class="{red:true,thin:true,active:true}">

也可以這樣,將對象移動到data中再綁定

? ? <div id='app' :class="obj">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el:'#app',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? flag:true,

? ? ? ? ? ? ? ? obj:{red:true,thin:true,active:true}

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

內(nèi)聯(lián)樣式

v-bind綁定style，style內(nèi)設(shè)置對象

?//對象本質(zhì)上是無序的鍵值對，red帶引號是為了不被當(dāng)做變量處理，font-weight帶引號是因?yàn)閹-`的屬性, 引號不能省略。

? ? <div id='app' :style="{color:'red','font-weight':200}">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el:'#app',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? flag:true

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

? ? //當(dāng)然，我們也可以把對象抽取出來設(shè)置到data中

? ? <div id='app' :style="obj">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el:'#app',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? flag:true,

? ? ? ? ? ? ? ? obj:{color:'red','font-weight:200}

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

v-bind綁定style，style內(nèi)設(shè)置數(shù)組，數(shù)組中可以設(shè)置多個(gè)對象

? ? <div id='app' :style="[obj1,obj2]">

? ? <script>

? ? ? ? var vm=new Vue({

? ? ? ? ? ? el:'#app',

? ? ? ? ? ? data:{

? ? ? ? ? ? ? ? flag:true,

? ? ? ? ? ? ? ? obj1:{color:'red','font-weight':200}

? ? ? ? ? ? ? ? obj2:{'font-style':'italic'}

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

過濾器

Vue允許自定義過濾器以進(jìn)行常見文本的格式化。 ?

過濾器可以被應(yīng)用于mustachc插值和v-bind表達(dá)式。 ?

過濾器需要被添加在JavaScript尾部，由管道符 `|` 指示。 ?

管道符前面的會作為第一個(gè)參數(shù)n, nameFilter2(2222)代碼中傳入的2222其實(shí)是作為函數(shù)中定義的arg. ?

**注意：通過方式一定義的過濾器為全局過濾器，必須定義在vue實(shí)例之前！全局過濾器可以被多個(gè)vue實(shí)例使用，方法二的私有過濾器只能被當(dāng)前實(shí)例使用。**??

當(dāng)私有過濾器和全局過濾器重名時(shí)，調(diào)用時(shí)私有過濾器優(yōu)先級更高，全局的將不會調(diào)用。??

Stylus語法

如果要使用stylus語法需要： ?

[Stylus官網(wǎng)](http://stylus-lang.com/)? ??

vue需要安裝相應(yīng)的loader才能解析該語法.