從零開始學Vue · 從零開始的避坑指南

[Toc] # VUE學習筆記（內部指令） ## VUE安裝方法 1. 去官網 cn.vuejs.org 下載vue.js 和vue.min.js 2. 新建文件夾vue，在vue目錄下新建assset文件夾和example文件夾和index.html文件 3. assets文件主要放js和css文件 4. example放一些案例 5. index.html放一些備忘內容 6. 使用VScode編輯內容,點擊查看集成終端選擇cmd 7. 建立live-server服務 8. cnpm install -g live-server 9. 安裝完成后 live-server 啟動本地服務 10. 結束本地服務以后，npm init 一下項目 11. 一直確定，會創建一個package.json文件 ## 第一個helloword程序 example/helloword.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Helloword</title> <script type="text/javascript" src="../asssets/js/vue.js"></script> </head> <body> <h1>Helloword</h1> <hr> <div id="app"> {{message}} </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'hello world!' } }) </script> </body> </html> ``` index.html ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js實例</title> </head> <body> <h1>Vue2.0實例</h1> <hr> <ol> <li><a href="/example/helloword.html">Hello World實例</a></li> </ol> </body> </html> ``` 在終端中輸入live-server 啟動服務器點擊**Hello World實例**即可看到效果 ## v-if v-else v-show 指令 1. v-if: v-if:是vue 的一個內部指令，指令用在我們的html中。 v-if用來判斷是否加載html的DOM，比如我們模擬一個用戶登錄狀態，在用戶登錄后現實用戶名稱。關鍵代碼： ``` <div v-if="isLogin">你好，像素獅！</div> ``` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Helloword</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>v-if&v-else&v-show</h1> <hr> <div id="app"> <div v-if="isLogin">你好，像素獅！</div> <div v-else>請登錄后操作</div> <div v-show="isLogin">你好，像素獅！</div> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ isLogin:false } }) </script> </body> </html> ``` 這里我們在vue的data里定義了isLogin的值，當它為true時，網頁就會顯示：你好：像素獅，如果為false時，就顯示請登錄后操作。 2. v-show ：調整css中display屬性，DOM已經加載，只是CSS控制沒有顯示出來。 ``` <div v-show="isLogin">你好：像素獅</div> ``` 3. v-if 和v-show的區別： - v-if：判斷是否加載，可以減輕服務器的壓力，在需要時加載。 - v-show：調整css dispaly屬性，可以使客戶端操作更加流暢。 **v-else要放在v-if后面要不然無效** ## v-for指令：解決模板循環問題 v-for指令是循環渲染一組data中的數組，v-for 指令需要以 item in items 形式的特殊語法，items 是源數據數組并且item是數組元素迭代的別名。一、基本用法：<br> 1. 模板寫法 ``` <li v-for="item in items"> {{item}} </li> ``` 2. js寫法 ``` var app=new Vue({ el:'#app', data:{ items:[20,23,18,65,32,19,54,56,41] } }) ``` 3. 完整代碼 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>V-for 案例</title> </head> <body> <h1>v-for指令用法</h1> <hr> <div id="app"> <ul> <li v-for="item in items"> {{item}} </li> </ul> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ items:[20,23,18,65,32,19,54,56,41] } }) </script> </body> </html> ``` 這是一個最基礎的循環，先在js里定義了items數組，然后在模板中用v-for循環出來，需要注意的是，**你需要那個html標簽循環，v-for就寫在那個上邊。** 二、排序我們已經順利的輸出了我們定義的數組，但是我需要在輸出之前給數組排個序，那我們就用到了Vue的 **computed:** 屬性。 ``` computed:{ sortItems:function(){ return this.items.sort(); } } ``` **如果不重新聲明報錯**我們在computed里新聲明了一個對象sortItems，如果不重新聲明會污染原來的數據源，這是Vue不允許的，所以你要重新聲明一個對象。 **不是成功的排序需要自己封裝函數并使用**<br> **真正的數字排序** ``` //真正的數字排序 function sortNumber(a,b){ return a-b } ``` 用法： ``` computed:{ sortItems:function(){ return this.items.sort(sortNumber); } } ``` 三、對象循環輸出我們上邊循環的都是數組，那我們來看一個對象類型的循環是如何輸出的。我們先定義個數組，數組里邊是對象數據 ``` students:[ {name:'像素獅',age:'24'}, {name:'小明',age:'26'}, {name:'小張',age:'30'}, {name:'小華',age:'20'}, {name:'Tim',age:'15'}, ] ``` 在模板中輸出 ``` <ul> <li v-for="student in students"> {{student.name}} - {{student.age}} </li> </ul> ``` 加入索引序號： ``` <ul> <li v-for="(student,index) in students"> {{index}}：{{student.name}} - {{student.age}} </li> </ul> ``` **數組對象方法排序** ``` //指定排序的比較函數: //數組對象方法排序: function sortByKey(array,key){ return array.sort(function(a,b){ var x=a[key]; var y=b[key]; return ((x<y)?-1:((x>y)?1:0)); }); } ``` 有了數組的排序方法，在computed中進行調用排序 ``` sortStudent:function(){ return sortByKey(this.students,'age'); } ``` **注意：** vue低版本中 data里面的items和computed里面可以一樣，但是高版本，是不允許相同名稱。有很多小伙伴踩到了這個坑，這里提醒學習的小伙伴，根據自己版本的不同，請修改代碼。 ## v-text & v-html 我們已經會在html中輸出data中的值了，我們已經用的是{{xxx}},這種情況是有弊端的，就是當我們網速很慢或者javascript出錯時，會暴露我們的{{xxx}}。Vue給我們提供的v-text,就是解決這個問題的。我們來看代碼： ``` <span>{{ message }}</span>=<span v-text="message"></span><br/> ``` 如果在javascript中寫有html標簽，用v-text是輸出不出來的，這時候我們就需要用v-html標簽了。 ``` <span v-html="msgHtml"></span> ``` 雙大括號會將數據解釋為純文本，而非HTML。為了輸出真正的HTML，你就需要使用v-html 指令。需要注意的是：在生產環境中動態渲染HTML是非常危險的，因為容易導致**XSS攻擊**。所以只能在可信的內容上使用**v-html**，永遠不要在用戶提交和可操作的網頁上使用。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-text&v-html</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>v-text&v-html實例</h1> <hr> <div id="app"> <span>{{message}}</span>=<span v-text="message"></span><br> <span v-html="msgHtml"></span> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'hello world!', msgHtml:'<h2>hello world!</h2>' } }) </script> </body> </html> ``` ## v-on：綁定事件監聽器 v-on 就是監聽事件，可以用v-on指令監聽DOM事件來觸發一些javascript代碼。一、使用綁定事件監聽器，編寫一個加分減分的程序。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on實例</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>v-on實例</h1> <hr> <div id="app"> 本場比賽得分:{{fenshu}} <p> <button v-on:click="jiafen">加分</button> <button @click="jianfen">減分</button><br/> <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2"> </p> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ fenshu:0, fenshu2:1 }, methods:{ jiafen:function(){ this.fenshu++; }, jianfen:function(){ this.fenshu--; }, onEnter:function(){ this.fenshu=this.fenshu+parseInt(this.fenshu2) } } }) </script> </body> </html> ``` 我們的 **v-on** 還有一種簡單的寫法，就是用 **@** 代替。 ``` <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2"> ``` 我們除了綁定click之外，我們還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,現在我們增加一個輸入框，然后綁定回車事件，回車后把文本框里的值加到我們的count上。 ``` onEnter:function(){ this.count=this.count+parseInt(this.secondCount); } ``` 因為文本框的數字會默認轉變成字符串，所以我們需要用parseInt()函數進行整數轉換。 ## v-model指令★ v-model指令，我理解為綁定數據源。就是把數據綁定在特定的表單元素上，可以很容易的實現雙向數據綁定。一、我們來看一個最簡單的雙向數據綁定代碼： html文件： ``` <div id="app"> <p>原始文本信息：{{message}}</p> <h3>文本框</h3> <p>v-model:<input type="text" v-model="message"></p> </div> ``` javascript代碼： ``` var app=new Vue({ el:'#app', data:{ message:'hello Vue!' } }) ``` 二、修飾符 - **lazy**：取代 imput 監聽 change 事件。(v-model.lazy:懶加載失去焦點后加載) - **number**：輸入字符串轉為數字。(v-model.number) - **trim**：輸入去掉首尾空格。(v-model.trim) 三、文本區域加入數據綁定 ``` <textarea cols="30" rows="10" v-model="message"></textarea> ``` 四、多選按鈕綁定一個值 ``` <h3>多選按鈕綁定一個值</h3> <input type="checkbox" id="isTrue" v-model="isTrue"> <label for='isTrue'>{{isTrue}}</label> ``` 五、多選綁定一個數組 ``` <h3>多選綁定一個數組</h3> <p> <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names"> <label for="JSPang">JSPang</label><br/> <input type="checkbox" id="Panda" value="Panda" v-model="web_Names"> <label for="JSPang">Panda</label><br/> <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names"> <label for="JSPang">PanPan</label> <p>{{web_Names}}</p> </p> ``` 六、單選按鈕綁定數據 ``` <h3>單選按鈕綁定</h3> <input type="radio" id="one" value="男" v-model="sex"> <label for="one">男</label> <input type="radio" id="two" value="女" v-model="sex"> <label for="one">女</label> <p>{{sex}}</p> ``` ## v-bind 指令 v-bind是處理HTML中的標簽**屬性**的，例如 ```<div></div>```就是一個標簽，```<img>```也是一個標簽，我們綁定```<img>```上的src進行動態賦值。 html文件： ``` <div id="app"> <img v-bind:src="imgSrc" width="200px"> </div> ``` 在html中我們用v-bind:src=”imgSrc”的動態綁定了src的值，這個值是在vue構造器里的data屬性中找到的。 js文件： ``` var app=new Vue({ el:'#app', data:{ imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg' } }) ``` 我們在data對象在中增加了imgSrc屬性來供html調用。 v-bind 縮寫 ```  <a v-bind:href="url"></a>  <a :href="url"></a> ``` 綁定CSS樣式在工作中我們經常使用v-bind來綁定css樣式：在綁定CSS樣式是，綁定的值必須在vue中的data屬性中進行聲明。 1、直接綁定class樣式 ``` <div :class="className">1、綁定classA</div> ``` 2、綁定classA并進行判斷，在isOK為true時顯示樣式，在isOk為false時不顯示樣式。 ``` <div :class="{classA:isOk}">2、綁定class中的判斷</div> ``` 3、綁定class中的數組 ``` <div :class="[classA,classB]">3、綁定class中的數組</div> ``` 4、綁定class中使用三元表達式判斷 ``` <div :class="isOk?classA:classB">4、綁定class中的三元表達式判斷</div> ``` 5、綁定style ``` <div :style="{color:red,fontSize:font}">5、綁定style</div> ``` 6、用對象綁定style樣式 ``` <div :style="styleObject">6、用對象綁定style樣式</div> ``` ``` var app=new Vue({ el:'#app', data:{ styleObject:{ fontSize:'24px', color:'green' } } }) ``` 7. 本節源碼 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-bind實例</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>v-bind實例</h1> <hr> <div id="app"> <p><img v-bind:src="imgsrc" width="200px"/></p> <p><a :href="webUrl" target="_blank">技術群</a></p> <hr> <div :class="className">1、綁定class</div> <div :class="{classA:isOk}">2、綁定class中的判斷</div> <div :class="[classA,classB]">3、綁定class中的數組</div> <div :class="isOk?classA:classB">4、綁定class中的三元運算符</div> <hr> <div> <input type="checkbox" id="isOk" v-model="isOk"> <label for="isOk">isOk={{isOk}}</label> </div> <hr> <div :style="{color:red,fontSize:font}">5、綁定style</div> <div :style="styleobject">5、綁定style</div> </div> <style> .classA{ color:red; } .classB{ font-size: 150%; } </style> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'hello world!', imgsrc:'http://jspang.com/wp-content/uploads/2018/01/dashangwx.jpg', webUrl:'http://www.baidu.com', className:'classA', isOk:false, classA:'classA', classB:'classB', red:'red', font:'20px', styleobject:{ color:'green', fontSize:'24px' } } }) </script> </body> </html> ``` ## 其他內部指令(v-pre & v-cloak & v-once) v-pre指令在模板中跳過vue的編譯，直接輸出原始值。就是在標簽中加入v-pre就不會輸出vue中的data值了。 ``` <div v-pre>{{message}}</div> ``` 這時并不會輸出我們的message值，而是直接在網頁中顯示{{message}} v-cloak指令在vue渲染完指定的整個DOM后才進行顯示。它必須和CSS樣式一起使用， ``` [v-cloak] { display: none; } ``` ``` <div v-cloak> {{ message }} </div> ``` v-once指令在第一次DOM時進行渲染，渲染完成后視為靜態內容，跳出以后的渲染過程。 ``` <div v-once>第一次綁定的值：{{message}}</div> <div><input type="text" v-model="message"></div> ``` 源碼 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-pre&v-cloak&v-once實例</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>v-pre&v-cloak&v-once實例</h1> <hr> <div id="app">  <div v-pre>{{message}}</div> <div v-cloak>渲染完成后，才顯示!</div> <div v-once>{{message}}</div> <div><input type="text" v-model="message"></div> <div>{{message}}</div> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'hello world!' } }) </script> </body> </html> ``` 總結：我們學習了Vue中的指令，這也是Vue中最容易理解的部分，以前我也只是使用Vue，通過這個課程的制作，我也對Vue指令有了全面和更深刻的了解。對于小伙伴們的學習，我想說的是，你看完視頻后一定要動手去敲寫代碼，這樣你才能理解并記住,接下來我們將講解Vue的全局API。 # 全局API ## Vue.directive 自定義指令一、什么是全局API？全局API并不在構造器里，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API，比如我們今天要學習的指令Vue.directive。說的簡單些就是，在構造器外部用Vue提供給我們的API函數來定義新的功能。二、Vue.directive自定義指令三、自定義指令中傳遞的三個參數 el: 指令所綁定的元素，可以用來直接操作DOM。 binding: 一個對象，包含指令的很多信息。 vnode: Vue編譯生成的虛擬節點。四、自定義指令的生命周期自定義指令有五個生命周期（也叫鉤子函數），分別是 **bind,inserted,update,componentUpdated,unbind** **bind:** 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個綁定時執行一次的初始化動作。 **inserted:** 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于document中）。 **update:** 被綁定于元素所在的模板更新時調用，而無論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。 **componentUpdated:** 被綁定元素所在模板完成一次更新周期時調用。 **unbind:** 只調用一次，指令與元素解綁時調用。 bind:function(){//被綁定 console.log('1 - bind'); }, inserted:function(){//綁定到節點 console.log('2 - inserted'); }, update:function(){//組件更新 console.log('3 - update'); }, componentUpdated:function(){//組件更新完成 console.log('4 - componentUpdated'); }, unbind:function(){//解綁 console.log('1 - bind'); } ## Vue.extend構造器的延伸一、什么是Vue.extend？ Vue.extend 返回的是一個“擴展實例構造器”,也就是預設了部分選項的Vue實例構造器。經常服務于Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件名稱作為標簽的自定義元素時，會自動調用“擴展實例構造器”來生產組件實例，并掛載到自定義元素上。由于我們還沒有學習Vue的**自定義組件**，所以我們先看跟組件無關的用途。二、自定義無參數標簽我們想象一個需求，需求是這樣的，要在博客頁面多處顯示作者的網名，并在網名上直接有鏈接地址。我們希望在html中只需要寫<author></author> ，這和自定義組件很像，但是他沒有傳遞任何參數，只是個靜態標簽。我們的Vue.extend該登場了，我們先用它來編寫一個擴展實例構造器。代碼如下： ``` var authorExtend = Vue.extend({ template:"<p><a :href='authorUrl'>{{authorName}}</a></p>", data:function(){ return{ authorName:'pxs', authorUrl:'http://www.baidu.com'' } } }); ``` 這時html中的標簽還是不起作用的，因為擴展實例構造器是需要掛載的，我們再進行一次掛載。 ``` new authorExtend().$mount('author'); ``` 這時我們在html寫<author><author>就是管用的。我們來看一下全部代碼： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>vue.extend-擴展實例構造器</title> </head> <body> <h1>vue.extend-擴展實例構造器</h1> <hr> <author></author> <script type="text/javascript"> var authorExtend = Vue.extend({ template:"<p><a :href='authorUrl'>{{authorName}}</a></p>", data:function(){ return{ authorName:'pxs', authorUrl:'http://www.baidu.com' } } }); new authorExtend().$mount('author'); </script> </body> </html> ``` 三、掛載到普通標簽上還可以通過HTML標簽上的id或者class來生成擴展實例構造器，Vue.extend里的代碼是一樣的，只是在掛載的時候，我們用類似jquery的選擇器的方法，來進行掛載就可以了。 ``` new authorExtend().$mount('#author'); ``` ## Vue.set全局操作 Vue.set 的作用就是在構造器外部操作構造器內部的數據、屬性或者方法。比如在vue構造器內部定義了一個count為1的數據，我們在構造器外部定義了一個方法，要每次點擊按鈕給值加1.就需要用到Vue.set。一、引用構造器外部數據：什么是外部數據，就是不在Vue構造器里里的data處聲明，而是在構造器外部聲明，然后在data處引用就可以了。外部數據的加入讓程序更加靈活，我們可以在外部獲取任何想要的數據形式，然后讓data引用。看一個簡單的代碼： ``` //在構造器外部聲明數據 var outData={ count:1, goodName:'car' }; var app=new Vue({ el:'#app', //引用外部數據 data:outData }) ``` 二、在外部改變數據的三種方法： 1、用Vue.set改變 function add(){ Vue.set(outData,'count',4); } 1 2 3 function add(){ Vue.set(outData,'count',4); } 2、用Vue對象的方法添加 app.count++; 1 app.count++; 3、直接操作外部數據 outData.count++; 1 outData.count++; 其實這三種方式都可以操作外部的數據，Vue也給我們增加了一種操作外部數據的方法。三、為什么要有Vue.set的存在? 由于Javascript的限制，Vue不能自動檢測以下變動的數組。 *當你利用索引直接設置一個項時，vue不會為我們自動更新。 *當你修改數組的長度時，vue不會為我們自動更新。看一段代碼： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Vue.set 全局操作</title> </head> <body> <h1>Vue.set 全局操作</h1> <hr> <div id="app"> <ul> <li v-for=" aa in arr">{{aa}}</li> </ul> </div> <button onclick="add()">外部添加</button> <script type="text/javascript"> function add(){ console.log("我已經執行了"); app.arr[1]='ddd'; //Vue.set(app.arr,1,'ddd'); } var outData={ arr:['aaa','bbb','ccc'] }; var app=new Vue({ el:'#app', data:outData }) </script> </body> </html> ``` 這時我們的界面是不會自動跟新數組的，我們需要用Vue.set(app.arr,1,’ddd’)來設置改變，vue才會給我們自動更新，這就是Vue.set存在的意義。 ## Vue的生命周期（鉤子函數） Vue一共有10個生命周期函數，我們可以利用這些函數在vue的每個階段都進行操作數據或者改變內容。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>構造器的聲明周期</title> </head> <body> <h1>構造器的聲明周期</h1> <hr> <div id="app"> {{message}} <p><button @click="jia">加分</button></p> </div> <button onclick="app.$destroy()">銷毀</button> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:1 }, methods:{ jia:function(){ this.message ++; } }, beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ console.log('2-created 創建完成'); }, beforeMount:function(){ console.log('3-beforeMount 掛載之前'); }, mounted:function(){ console.log('4-mounted 被創建'); }, beforeUpdate:function(){ console.log('5-beforeUpdate 數據更新前'); }, updated:function(){ console.log('6-updated 被更新后'); }, activated:function(){ console.log('7-activated'); }, deactivated:function(){ console.log('8-deactivated'); }, beforeDestroy:function(){ console.log('9-beforeDestroy 銷毀之前'); }, destroyed:function(){ console.log('10-destroyed 銷毀之后') } }) </script> </body> </html> ``` ## Template 制作模版一、直接寫在選項里的模板直接在構造器里的template選項后邊編寫。這種寫法比較直觀，但是如果模板html代碼太多，不建議這么寫。 javascript代碼： ``` var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:` <h1 style="color:red">我是選項模板</h1> ` }) ``` 這里需要注意的是模板的標識不是單引號和雙引號，而是，就是Tab上面的鍵。二、寫在<template>標簽里的模板這種寫法更像是在寫HTML代碼，就算不會寫Vue的人，也可以制作頁面。 ``` <template id="demo2"> <h2 style="color:red">我是template標簽模板</h2> </template> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:'#demo2' }) </script> ``` 三、寫在<script>標簽里的模板這種寫模板的方法，可以讓模板文件從外部引入。 ``` <script type="x-template" id="demo3"> <h2 style="color:red">我是script標簽模板</h2> </script> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:'#demo3' }) </script> ``` 這節課我們學習了Template的三種寫法，以后學習到vue-cli的時候還會學到一種xxx.vue的寫法。 ## Component 初識組件★★★ component組件是Vue學習的重點、重點、重點，重要的事情說三遍。所以你必須學好Vue component。其實組件就是制作自定義的標簽，這些標簽在HTML中是沒有的。比如：<pxs></pxs>，那我們就開始學習這種技巧吧。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1</title> </head> <body> <h1>component-1</h1> <hr> <div id="app"> <pxs></pxs> </div> <script type="text/javascript"> //注冊全局組件 Vue.component('pxs',{ template:`<div style="color:red;">全局化注冊的jspang標簽</div>` }) var app=new Vue({ el:'#app', data:{ } }) </script> </body> </html> ``` 我們在javascript里注冊了一個組件，在HTML中調用了他。這就是最簡單的一個組件的編寫方法，并且它可以放到多個構造器的作用域里。二、局部注冊組件局部注冊組件和全局注冊組件是向對應的，局部注冊的組件只能在組件注冊的作用域里進行使用，其他作用域使用無效。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1</title> </head> <body> <h1>component-1</h1> <hr> <div id="app"> <panda></panda> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">局部注冊的panda標簽</div>` } } }) </script> </body> </html> ``` 從代碼中你可以看出局部注冊其實就是寫在構造器里，但是你需要注意的是，構造器里的components 是加s的，而全局注冊是不加s的。三、組件和指令的區別組件注冊的是一個標簽，而指令注冊的是已有標簽里的一個屬性。在實際開發中我們還是用組件比較多，指令用的比較少。因為指令看起來封裝的沒那么好，這只是個人觀點。 ## Component 組件props 屬性設置一、全局注冊組件全局注冊組件適用于可復用的內容 **Vue.component**來注冊全局組件 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1組件實例</title> </head> <body> <h1>component-1組件實例</h1> <hr> <div id="app"> <pxs1></pxs1> </div> <script type="text/javascript"> //注冊全局組件 Vue.component('jspang',{ template:`<div style="color:red;">全局化注冊的pxs1標簽</div>` }) var app=new Vue({ el:'#app', data:{ } }) </script> </body> </html> ``` 二、局部注冊組件局部注冊組件局部注冊組件和全局注冊組件是相對應的，局部注冊的組件只能在組件注冊的作用域里進行使用，**其他作用域使用無效**。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>component-1組件實例</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>component-1組件實例</h1> <hr> <div id="app"> <pxs2></pxs2> </div> <hr> <div id="ppa"> <pxs2></pxs2> <pps></pps> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'hello world!' } }) //局部注冊組件 var app = new Vue({ el:'#ppa', components:{ pxs2:{template:`<div style="color:green;">局部注冊pxs2標簽</div>`}, pps:{template:`<div style="color:blue;">局部注冊pps標簽</div>`} } }) </script> </body> </html> ``` 從代碼中你可以看出局部注冊其實就是寫在構造器里，但是你需要注意的是，構造器里的components 是加s的，而全局注冊是不加s的。三、組件和指令的區別組件注冊的是一個標簽，而指令注冊的是已有標簽里的一個屬性。在實際開發中我們還是用組件比較多，指令用的比較少。因為指令看起來封裝的沒那么好，這只是個人觀點。 ## Component 組件props 屬性設置 props選項就是設置和獲取標簽上的屬性值的，可以結合data從后來傳過來的數據靈活的綁定在標簽上。一、定義屬性并獲取屬性值定義屬性我們需要用props選項，加上數組形式的屬性名稱，例如：props:[‘here’]。在組件的模板里讀出屬性值只需要用插值的形式，例如{{ here }}. ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-2</title> </head> <body> <h1>component-2</h1> <hr> <div id="app"> <panda here="China"></panda> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['here'] } } }) </script> </body> </html> ``` 上面的代碼定義了panda的組件，并用props設置了here的屬性值，在here屬性值里傳遞了China給組件。最后輸出的結果是紅色字體的Panda from China. 二、屬性中帶’-‘的處理方式我們在寫屬性時經常會加入’-‘來進行分詞，比如：<panda from-here=”China”></panda>，那這時我們在props里如果寫成props:[‘form-here’]是錯誤的，我們必須用 **小駝峰** 式寫法props:[‘formHere’]。 html文件： ``` <panda from-here="China"></panda> ``` javascript文件： ``` var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['fromHere'] } } }) ``` **因為這里有坑，所以還是少用-為好。** 三、在構造器里向組件中傳值把構造器中data的值傳遞給組件，我們只要進行綁定就可以了。就是我們第一季學的v-bind:xxx. 我們直接看代碼: Html文件： ``` <panda v-bind:here="message"></panda> ``` javascript文件： ``` var app=new Vue({ el:'#app', data:{ message:'SiChuan' }, components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['here'] } } }) ``` ## Component 父子組件關系在實際開發中我們經常會遇到在一個自定義組件中要使用其他自定義組件，這就需要一個父子組件關系。一、構造器外部寫局部注冊組件上面上課我們都把局部組件的編寫放到了構造器內部，如果組件代碼量很大，會影響構造器的可讀性，造成拖拉和錯誤。我們把組件編寫的代碼放到構造器外部或者說單獨文件。我們需要先聲明一個對象,對象里就是組件的內容。 ``` var jspang = { template:`<div>Panda from China!</div>` } ``` 聲明好對象后在構造器里引用就可以了。 ``` components:{ "jspang":jspang } ``` html中引用 ``` <jspang></jspang> ``` 二、父子組件的嵌套我們先聲明一個父組件，比如叫jspang，然后里邊我們加入一個city組件，我們來看這樣的代碼如何寫。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-3</title> </head> <body> <h1>component-3</h1> <hr> <div id="app"> <jspang></jspang> </div> <script type="text/javascript"> var city={ template:`<div>Sichuan of China</div>` } var jspang = { template:`<div> <p> Panda from China!</p> <city></city> </div>`, components:{ "city":city } } var app=new Vue({ el:'#app', components:{ "jspang":jspang } }) </script> </body> </html> ``` ## Component 標簽 <component></component>標簽是Vue框架自定義的標簽，它的用途就是可以動態綁定我們的組件，根據數據的不同更換不同的組件。 1.我們先在構造器外部定義三個不同的組件，分別是componentA,componentB和componentC. ``` var componentA={ template:`<div>I'm componentA</div>` } var componentB={ template:`<div>I'm componentB</div>` } var componentC={ template:`<div>I'm componentC</div>` } ``` 2.我們在構造器的components選項里加入這三個組件。 ``` components:{ "componentA":componentA, "componentB":componentB, "componentC":componentC, } ``` 3.我們在html里插入component標簽，并綁定who數據，根據who的值不同，調用不同的組件。 ``` <component v-bind:is="who"></component> ``` 這就是我們的組件標簽的基本用法。我們提高以下，給頁面加個按鈕，每點以下更換一個組件。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-4</title> </head> <body> <h1>component-4</h1> <hr> <div id="app"> <component v-bind:is="who"></component> <button @click="changeComponent">changeComponent</button> </div> <script type="text/javascript"> var componentA={ template:`<div style="color:red;">I'm componentA</div>` } var componentB={ template:`<div style="color:green;">I'm componentB</div>` } var componentC={ template:`<div style="color:pink;">I'm componentC</div>` } var app=new Vue({ el:'#app', data:{ who:'componentA' }, components:{ "componentA":componentA, "componentB":componentB, "componentC":componentC, }, methods:{ changeComponent:function(){ if(this.who=='componentA'){ this.who='componentB'; }else if(this.who=='componentB'){ this.who='componentC'; }else{ this.who='componentA'; } } } }) </script> </body> </html> ``` # 構造器里的選項 ## propsData Option 全局擴展的數據傳遞 propsData 不是和屬性有關，他用在全局擴展時進行傳遞數據。先回顧一下全局擴展的知識，作一個<header></header>的擴展標簽出來。實際我們并比推薦用全局擴展的方式作自定義標簽，我們學了組件，完全可以使用組件來做，這里只是為了演示propsData的用法。代碼如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>PropsData Option Demo</title> </head> <body> <h1>PropsData Option Demo</h1> <hr> <header></header> <script type="text/javascript"> var header_a = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message:'Hello,I am Header' } } }); new header_a().$mount('header'); </script> </body> </html> ``` 擴展標簽已經做好了，這時我們要在掛載時傳遞一個數字過去，我們就用到了propsData。我們用propsData三步解決傳值： 1、在全局擴展里加入props進行接收。propsData:{a:1} 2、傳遞時用propsData進行傳遞。props:[‘a’] 3、用插值的形式寫入模板。{{ a }} 完整代碼： ``` var header_a = Vue.extend({ template:`<p>{{message}}-{{a}}</p>`, data:function(){ return { message:'Hello,I am Header' } }, props:['a'] }); new header_a({propsData:{a:1}}).$mount('header'); ``` 總結：propsData在實際開發中我們使用的并不多，我們在后邊會學到Vuex的應用，他的作用就是在單頁應用中保持狀態和數據的。 ## computed Option 計算選項 computed 的作用主要是對原數據進行改造輸出。改造輸出：包括格式的編輯，大小寫轉換，順序重排，添加符號……。一、格式化輸出結果：我們先來做個讀出價格的例子：我們讀書的原始數據是price:100 但是我們輸出給用戶的樣子是（￥100元）。主要的javascript代碼： ``` computed:{ newPrice:function(){ return this.price='￥' + this.price + '元'; } } ``` 全部代碼： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Computed Option 計算選項</title> </head> <body> <h1>Computed Option 計算選項</h1> <hr> <div id="app"> {{newPrice}} </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ price:100 }, computed:{ newPrice:function(){ return this.price='￥' + this.price + '元'; } } }) </script> </body> </html> ``` 現在輸出的結果就是：￥100元。二、用計算屬性反轉數組例如：我們得到了一個新聞列表的數組，它的順序是安裝新聞時間的順序正序排列的，也就是早反生的新聞排在前面。這是反人類的，我們需要給他反轉。這時我們就可以用到我們的計算屬性了。沒有排序的新聞列表，是安裝日期正序排列的。 ``` var newsList=[ {title:'香港或就“裝甲車被扣”事件追責起訴涉事運輸公司',date:'2017/3/10'}, {title:'日本第二大準航母服役外媒：針對中國潛艇',date:'2017/3/12'}, {title:'中國北方將有明顯雨雪降溫天氣南方陰雨持續',date:'2017/3/13'}, {title:'起底“最短命副市長”：不到40天落馬，全家被查',date:'2017/3/23'},] ``` 我們希望輸出的結果：起底“最短命副市長”：不到40天落馬，全家被查-2017/3/23 中國北方將有明顯雨雪降溫天氣南方陰雨持續-2017/3/13 日本第二大準航母服役外媒：針對中國潛艇-2017/3/12 香港或就“裝甲車被扣”事件追責起訴涉事運輸公司-2017/3/10 我們的在computed里的javascript代碼：我們用js原生方法給數組作了反轉。 ``` computed:{ reverseNews:function(){ return this.newsList.reverse(); } } ``` 總結：computed 屬性是非常有用，在輸出數據前可以輕松的改變數據。所以說這節課的代碼必須要多敲幾遍，加深印象。 ## Methods Option方法選項在以前的學習中，已經大量的使用了構造器里的methods選項，但是并沒有仔細和系統的講解過，這節課我們用點時間把methods這個選項涉及的東西都講一講。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>methods Option</title> </head> <body> <h1>methods Option</h1> <hr> <div id="app"> {{ a }} <p><button @click="add">add</button></p> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ a:1 }, methods:{ add:function(){ this.a++ } } }) </script> </body> </html> ``` 一、methods中參數的傳遞使用方法和正常的javascript傳遞參數的方法一樣，分為兩部： 1、在methods的方法中進行聲明，比如我們給add方法加上一個num參數，就要寫出add:function(num){}. 2、調用方法時直接傳遞，比如我們要傳遞2這個參數，我們在button上就直接可以寫。<button @click=”add(2)”></button>. 現在知道了加參數的方法，看一段完整的代碼，代碼中給add添加了num參數，并在按鈕上調用傳遞了。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>methods Option</title> </head> <body> <h1>methods Option</h1> <hr> <div id="app"> {{ a }} <p><button @click="add(2)">add</button></p> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ a:1 }, methods:{ add:function(num){ if(num!=''){this.a+=num} else{this.a++} } } }) </script> </body> </html> ``` 這時，再點擊按鈕是每次加2個數字。二、methods中的$event參數傳遞的$event參數都是關于你點擊鼠標的一些事件和屬性。我們先看看傳遞的方法。傳遞：<button @click=”add(2,$event)”>add</button> 。我們這時候可以打印一下，看看event到底是個怎樣的對象。你會發現，它包含了大部分鼠標事件的屬性。三、native 給組件綁定構造器里的原生事件。在實際開發中經常需要把某個按鈕封裝成組件，然后反復使用，如何讓組件調用構造器里的方法，而不是組件里的方法。就需要用到我們的.native修飾器了。現在我們把我們的add按鈕封裝成組件：聲明btn對象： ``` var btn={ template:`<button>組件Add</button>` } ``` 在構造器里聲明： ``` components:{ "btn":btn } ``` 用.native修飾器來調用構造器里的add方法 ``` <p><btn @click.native="add(3)"></btn></p> ``` 四、作用域外部調用構造器里的方法這種不經常使用，如果你出現了這種情況，說明你的代碼組織不夠好。 ``` <button onclick="app.add(4)" >外部調用構造器里的方法</button> ``` ## Watch 選項監控數據數據變化的監控經常使用，我們可以先來看一個簡單的數據變化監控的例子。例如天氣預報的穿衣指數，它主要是根據溫度來進行提示的，當然還有其它的，咱們就不考慮了。一、看一個監控變化的案例溫度大于26度時，我們建議穿T恤短袖，溫度小于26度大于0度時，我們建議穿夾克長裙，溫度小于0度時我們建議穿棉衣羽絨服。先來模擬一個溫度變化的情況：我們使用按鈕來加減溫度。二、用實例屬性寫watch監控有些時候我們會用實例屬性的形式來寫watch監控。也就是把我們watch卸載構造器的外部，這樣的好處就是降低我們程序的耦合度，使程序變的靈活。 ``` app.$watch('xxx',function(){}) ``` 還是上邊的案例我們改成實例方法的模式。 ``` app.$watch('temperature',function(newVal,oldVal){ if(newVal>=26){ this.suggestion=suggestion[0]; }else if(newVal<26 && newVal >=0) { this.suggestion=suggestion[1]; }else{ this.suggestion=suggestion[2]; } }) ``` 效果和上面是一樣的。源碼 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Watch選項監控數據</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>Watch選項監控數據</h1> <hr> <div id="app"> <p>今日溫度: {{wendu}} 度</p> <p>穿衣建議：{{chuanyi}}</p> <p><button @click="shengao">升高溫度</button><button @click="jiangdi">降低溫度</button></p> </div> <script type="text/javascript"> var chuanyiarr=['T恤短袖','夾克長裙','棉衣羽絨服'] var app = new Vue({ el:'#app', data:{ wendu:14, chuanyi:'夾克長裙' }, methods:{ shengao:function(){ this.wendu+=5; }, jiangdi:function(){ this.wendu-=5; } }, // watch:{ // wendu:function(newVal,oldVal){ // if(newVal>=26){ // this.chuanyi=chuanyiarr[0]; // }else if(newVal<26&&newVal>0){ // this.chuanyi=chuanyiarr[1]; // }else{ // this.chuanyi=chuanyiarr[2]; // } // } // } }) //獨立聲明方法 app.$watch('wendu',function(newVal,oldVal){ if(newVal>=26){ this.chuanyi=chuanyiarr[0]; }else if(newVal<26&&newVal>0){ this.chuanyi=chuanyiarr[1]; }else{ this.chuanyi=chuanyiarr[2]; } }) </script> </body> </html> ``` ## Mixins 混入選項操作 Mixins一般有兩種用途： 1、在你已經寫好了構造器后，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少源代碼的污染。 2、很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實現代碼重用。一、Mixins的基本用法我們現在有個數字點擊遞增的程序，假設已經完成了，這時我們希望每次數據變化時都能夠在控制臺打印出提示：“數據發生變化”. 代碼實現過程: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Mixins Option Demo</title> </head> <body> <h1>Mixins Option Demo</h1> <hr> <div id="app"> <p>num:{{ num }}</p> <P><button @click="add">增加數量</button></P> </div> <script type="text/javascript"> //額外臨時加入時，用于顯示日志 var addLog={ updated:function(){ console.log("數據放生變化,變化成"+this.num+"."); } } var app=new Vue({ el:'#app', data:{ num:1 }, methods:{ add:function(){ this.num++; } }, mixins:[addLog]//混入 }) </script> </body> </html> ``` 二、mixins的調用順序從執行的先后順序來說，都是混入的先執行，然后構造器里的再執行，需要注意的是，這并不是方法的覆蓋，而是被執行了兩邊。在上邊的代碼的構造器里我們也加入了updated的鉤子函數： ``` updated:function(){ console.log("構造器里的updated方法。") }, ``` 這時控制臺輸出的順序是： ``` mixins數據放生變化,變化成2. 構造器里的updated方法。 ``` PS：當混入方法和構造器的方法重名時，混入的方法無法展現，也就是不起作用。三、全局API混入方式我們也可以定義全局的混入，這樣在需要這段代碼的地方直接引入js，就可以擁有這個功能了。我們來看一下全局混入的方法： ``` Vue.mixin({ updated:function(){ console.log('我是全局被混入的'); } }) ``` PS：全局混入的執行順序要前于混入和構造器里的方法。 ## Extends Option 擴展選項通過外部增加對象的形式，對構造器進行擴展。它和我們上節課講的混入非常的類似。一、extends我們來看一個擴展的實例。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Extends Optin Demo</title> </head> <body> <h1>Extends Optin Demo</h1> <hr> <div id="app"> {{message}} <p><button @click="add">add</button></p> </div> <script type="text/javascript"> var bbb={ created:function(){ console.log("我是被擴展出來的"); }, methods:{ add:function(){ console.log('我是被擴展出來的方法！'); } } }; var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, methods:{ add:function(){ console.log('我是原生方法'); } }, extends:bbb }) </script> </body> </html> ``` 二、delimiters 選項因為這節課內容比較少，所以我們把要講的最后一個選項一起講了。delimiters的作用是改變我們插值的符號。Vue默認的插值是雙大括號{{}}。但有時我們會有需求更改這個插值的形式。 ``` delimiters:['${','}'] ``` 現在我們的插值形式就變成了${}。 # 實例和內置組件 ## 實例入門-實例屬性一、Vue和Jquery.js一起使用 1、下載并引入jquery框架下載可以去官網進行下載，我這里使用的版本是3.1.1，下載好后在需要的頁面引入就可以了。當然你還有很多其它的方法引入jquery，只要可以順利引入就可以了。 ``` <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> ``` 試著作一個案例，在DOM被掛載后修改里邊的內容。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> <title>Early Examples Demo</title> </head> <body> <h1>Early Examples Demo</h1> <hr> <div id="app"> {{message}} </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, //在Vue中使用jQuery mounted:function(){ $('#app').html('我是jQuery!'); } }) </script> </body> </html> ``` 現在頁面顯示是：我是jQuery，而不是hello Vue了。二、實例調用自定義方法在Vue的構造器里我們寫一個add方法，然后我們用實例的方法調用它。構造器里的add方法： ``` methods:{ add:function(){ console.log("調用了Add方法"); } } ``` 實例調用： ``` app.add(); ``` PS：我們有可能把app.add()的括號忘記或省略，這時候我們得到的就是方法的字符串，但是并沒有執行，所以必須要加上括號。 ## 實例方法一、$mount方法 $mount方法是用來掛載我們的擴展的，我們先來復習一下擴展的寫法。這里我們作了jspang的擴展，然后用$mount的方法把jspang掛載到DOM上，我們也生成了一個Vue的實例，直接看代碼。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Examples Method Demo</title> </head> <body> <h1>Examples Method Demo</h1> <hr> <div id="app"> {{message}} </div> <script type="text/javascript"> var jspang = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message:'Hello ,I am JSPang' } } }) var vm = new jspang().$mount("#app") </script> </body> </html> ``` 這段代碼我們在學習extends的時候已經寫過一次，這里就不作過多解釋了。二、$destroy() 卸載方法用$destroy()進行卸載。我寫了一個button按鈕，點擊后卸載整個掛載。 html： ``` <p><button onclick="destroy()">卸載</button></p> ``` javascript ``` function destroy(){ vm.$destroy(); } ``` PS:$destroy()后邊必須要有括號，沒有括號是無用的。三、$forceUpdate() 更新方法 ``` vm.$forceUpdate() ``` 四、$nextTick() 數據修改方法當Vue構造器里的data值被修改完成后會調用這個方法，也相當于一個鉤子函數吧，和構造器里的updated生命周期很像。 ``` function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log('message更新完后我被調用了'); }) } ``` 五、安裝Vue的控制臺調試工具。每個人的安裝方法不同，不作太多的介紹，可能需要你科學上網。 ## 實例事件實例事件就是在構造器外部寫一個調用構造器內部的方法。這樣寫的好處是可以通過這種寫法在構造器外部調用構造器內部的數據。我們還是寫一個點擊按鈕，持續加1的例子。一、$on 在構造器外部添加事件。 ``` app.$on('reduce',function(){ console.log('執行了reduce()'); this.num--; }); ``` $on接收兩個參數，第一個參數是調用時的事件名稱，第二個參數是一個匿名方法。如果按鈕在作用域外部，可以利用$emit來執行。 ``` //外部調用內部事件 function reduce(){ app.$emit('reduce'); } ``` 二、$once執行一次的事件 ``` app.$once('reduceOnce',function(){ console.log('只執行一次的方法'); this.num--; }); ``` 三、$off關閉事件 ``` //關閉事件 function off(){ app.$off('reduce'); } ``` ## 內置組件 -slot講解 slot是標簽的內容擴展，也就是說你用slot就可以在自定義組件時傳遞給組件內容，組件接收內容并輸出。先來定義一個<jspang></jspang>的組件，這個組件用來顯示博主的一些信息。我們在Vue 構造器里的data中給出了信息，信息如下：（博客地址，網名，使用技能） ``` data:{ jspangData:{ bolgUrl:'http://jspang.com', netName:'技術胖', skill:'Web前端' } }, ``` 我們用<template></template>標簽的方式定義了組件： ``` <template id="tmp"> <div> <p>站酷地址：</p> <p>站酷名稱：</p> <p>技術類型：</p> </div> </template> ``` 我們現在就可以用slot功能讓組件接收傳遞過來的值，并在模板中接收顯示。 slot的使用需要兩步： 1、在HTML的組件中用slot屬性傳遞值。 ``` <pxs> <span slot="Url">{{pxsData.Url}}</span> <span slot="netName">{{pxsData.netName}}</span> <span slot="skill">{{pxsData.skill}}</span> </pxs> ``` 2、在組件模板中用<slot></slot>標簽接收值。 ``` <template id="tmp"> <div> <p>站酷地址:<slot name="Url"></slot></p> <p>站酷名稱:<slot name="netName"></slot></p> <p>技術類型:<slot name="skill"></slot></p> </div> </template> ``` 我們貼出這個案例的全部代碼： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>slot</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>slot</h1> <hr> <div id="app"> <pxs> <span slot="Url">{{pxsData.Url}}</span> <span slot="netName">{{pxsData.netName}}</span> <span slot="skill">{{pxsData.skill}}</span> </pxs> </div> <template id="tmp"> <div> <p>站酷地址:<slot name="Url"></slot></p> <p>站酷名稱:<slot name="netName"></slot></p> <p>技術類型:<slot name="skill"></slot></p> </div> </template> <script type="text/javascript"> var pxs={ template:'#tmp' } var app = new Vue({ el:'#app', data:{ pxsData:{ Url:'https://luckpty.zcool.com.cn/', netName:'像素獅', skill:'web前端,UI' } }, components:{ "pxs":pxs } }) </script> </body> </html> ```