Vue基礎二之全域性API、例項屬性和全域性配置，以及元件進階（mixins）的詳細教程（案列實現，詳細圖解，附原始碼）
前言
本篇隨筆主要講解Vue中的全域性API、例項屬性和全域性配置，以及元件進階的基礎知識，作為自己對Vue框架基礎語法知識的總結與筆記。
因內容有案例解讀，程式碼實現，導致篇幅稍長，大約3分鐘可以瀏覽完，如有幫助的話（請筆友耐心看完）
長話不說，直接進入正題......
案例實現模版：
以下案例均是基於此模版實現的（以第一個案例為例）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模版</title> 6<script src="vue.js"></script> 7 </head> 8 <body> 9 10 <!-- 以下是第一個小案例 --> 11 <div id="app"> 12 <input type="text" v-focus="true"> 13 </div> 14 <script> 15 Vue.directive('focus', { 16 inserted (el, binding) { 17 if(binding.value) { 18 el.focus() 19 } 20 } 21 }) 22 var vm = new Vue({ el: '#app' }) 23 </script> 24 25 26 </body> 27 </html>
一、全域性API
全域性API並不在構造器裡，而是先宣告全域性變數或者直接在Vue上定義一些新功能，Vue內建了一些全域性API。說的簡單些就是，在構造器外部用Vue提供給我們的API函式來定義新的功能。
1.Vue.directive
用來註冊自定義指令，對低階DOM元素進行訪問，為DOM元素新增新的特性。
案例：自定義註冊指令v-focus。
1.1 實現步驟
- 定義根標籤div。
- 控制input文字框是否自動獲得焦點。
1.2 程式碼實現
1 <div id="app"> 2 <input type="text" v-focus="true"> 3 </div> 4 <script> 5 Vue.directive('focus', { 6 inserted (el, binding) { 7 if (binding.value) { 8 el.focus() 9 } 10 } 11 }) 12 var vm = new Vue({ el: '#app' }) 13 </script>
1.3 效果展示
2.Vue.use
Vue.use主要用於在Vue中安裝外掛，通過外掛可以為Vue新增全域性功能。外掛可以是一個物件或函式，如果是物件，必須提供install()方法，用來安裝外掛；如果是一個函式，則該函式將被當成install()方法。
2.1 實現步驟
- 建立vm例項
- 定義外掛
- 使用外掛
2.2 程式碼實現
1 <div id="app" v-my-directive></div> 2 <script> 3 // 定義一個MyPlugin（自定義外掛）物件 4 let MyPlugin = {} 5 // 編寫外掛物件的install方法 6 MyPlugin.install = function (Vue, options) { 7 console.log(options) 8 // 在外掛中為Vue新增自定義指令 9 Vue.directive('my-directive', { 10 bind (el, binding) { 11 // 為自定義指令v-my-directive繫結的DOM元素設定style樣式 12 el.style = 'width:100px;height:100px;background-color:#ccc;' 13 } 14 }) 15 } 16 Vue.use(MyPlugin, { someOption: true }) 17 var vm = new Vue({ 18 el: '#app' 19 }) 20 // var Vue = require('Vue') 21 // var vueRouter = require('vue-router') 22 // Vue.use(vueRouter) 23 </script>
2.3 效果展示
PS：
Vue.js官方提供的一些外掛（如vue-router）在檢測到 Vue 是可訪問的全域性變數時，會自動呼叫 Vue.use()。但是在CommonJS等模組環境中，則始終需要Vue.use()顯式呼叫。
3.Vue.extend
Vue.extend用於基於Vue構造器建立一個Vue子類，可以對Vue構造器進行擴充套件。它有一個options引數，表示包含元件選項的物件。
3.1 實現步驟
- 頁面結構
- 建立子類Vue2
3.2 程式碼實現
1 <div id="app1">app1: {{title}}</div> 2 <div id="app2">app2: {{title}}</div> 3 <script> 4 var Vue2 = Vue.extend({ 5 data () { 6 return { title: 'hello' } 7 } 8 }) 9 var vm1 = new Vue({ el: '#app1' }) 10 var vm2 = new Vue2({ el: '#app2' }) 11 </script>
3.3 效果展示
4.Vue.set
Vue的核心具有一套響應式系統，簡單來說就是通過監聽器監聽資料層的資料變化，當資料改變後，通知檢視也自動更新。
Vue.set用於向響應式物件中新增一個屬性，並確保這個新屬性同樣是響應式的，且觸發檢視更新。
4.1 實現步驟
- 頁面結構
- 建立vm物件動態設定屬性b
4.2 程式碼實現
1 <div id="app"> 2 <div>{{a}}</div> 3 <div>{{obj.b}}</div> 4 </div> 5 <script> 6 var vm = new Vue({ 7 el: '#app', 8 data: { 9 a: '我是根級響應式屬性a', 10 obj: {} 11 } 12 }) 13 Vue.set(vm.obj, 'b', '我是Vue.set新增的響應式屬性obj.b') 14 </script>
4.3 效果展示
5.Vue.mixin
Vue.mixin用於全域性註冊一個混入，它將影響之後建立的每個Vue例項。該介面主要是提供給外掛作者使用，在外掛中向元件注入自定義的行為。該介面不推薦在應用程式碼中使用。
案例：Vue.mixin用於全域性註冊一個混入（ Mixins ），實現外掛功能。
5.1 實現步驟
- myOption是一個自定義屬性。
- 使用Vue.mixin
5.2 程式碼實現
1 <div id="app"></div> 2 <script> 3 Vue.mixin({ 4 created () { 5 var myOption = this.$options.myOption 6 if (myOption) { 7 console.log(myOption.toUpperCase()) 8 } 9 } 10 }) 11 var vm = new Vue({ 12 myOption: 'hello vue!' 13 }) 14 </script>
5.3 效果展示
二、例項屬性
1.vm.$props
使用vm.$props屬性可以接收上級元件向下傳遞的資料。
案例：通過$props實現手機資訊搜尋。
1.1 實現步驟
- 定義唯一根標籤div。
- 定義父元件模板。
- 定義子元件模板。
- 註冊父元件my-parent。
- 註冊子元件my-child。
- 在子元件的data中定義手機的資料資訊。
- 在子元件的data中定義props用來接收name的值。
- 如果獲取到name值就查詢手機資訊，否則返回。
- 通過forEach()方法對手機資料進行查詢操作。
1.2 程式碼實現
1 <div id="app"> 2 <!-- 父元件 --> 3 <my-parent></my-parent> 4 </div> 5 6 <!-- 父元件模板 --> 7 <template id="parent"> 8 <div> 9 <h3>手機資訊搜尋</h3> 10 手機品牌：<input type="text" v-model="brand"> 11 <!-- 子元件 --> 12 <my-child v-bind:name="brand"></my-child> 13 </div> 14 </template> 15 16 <!-- 子元件模板 --> 17 <template id="child"> 18 <ul> 19 <li>手機品牌：{{show.brand}}</li> 20 <li>手機型號：{{show.type}}</li> 21 <li>市場價格：{{show.price}}</li> 22 </ul> 23 </template> 24 25 <script> 26 Vue.component('my-parent', { 27 template: '#parent', 28 data () { 29 return { 30 brand: '' 31 } 32 } 33 }) 34 Vue.component('my-child', { 35 template: '#child', 36 data () { 37 return { 38 content: [ 39 {brand: '華為', type: 'Mate20', price: 3699}, 40 {brand: '蘋果', type: 'iPhone7', price: 2949}, 41 {brand: '三星', type: 'Galaxy S8+', price: 3299}, 42 {brand: 'vivo', type: 'Z5x', price: 1698}, 43 {brand: '一加', type: 'OnePlus7', price: 2999}, 44 {brand: '360', type: 'N7 Pro', price: 1099}, 45 {brand: 'oppo', type: 'Reno', price: 2599} 46 ], 47 show: {brand: '', type: '', price: ''} 48 } 49 }, 50 props: ['name'], 51 watch: { 52 name () { 53 if (this.$props.name) { 54 var found = false 55 this.content.forEach((value, index) => { 56 if (value.brand === this.$props.name) { 57 found = value 58 } 59 }) 60 this.show = found ? found : {brand: '', type: '', price: ''} 61 } else { 62 return 63 } 64 } 65 } 66 }) 67 var vm = new Vue({ 68 el: '#app', 69 data: {} 70 }) 71 </script>
1.3 效果展示
2.vm.$options
Vue例項初始化時，除了傳入指定的選項外，還可以傳入自定義選項。自定義選項的值可以是陣列、物件、函式等，通過vm.$options來獲取。
2.1 實現步驟
- 定義根標籤
- 建立vm例項
- 在vm例項配置物件中新增$options。
2.2 程式碼實現
1 <div id="app"> 2 <p>{{base}}</p> 3 <p>{{noBase}}</p> 4 </div> 5 <script> 6 var vm = new Vue({ 7 el: '#app', 8 customOption: '我是自定義資料', 9 data: { 10 base: '我是基礎資料' 11 }, 12 created () { 13 this.noBase = this.$options.customOption 14 } 15 }) 16 </script>
2.3 效果展示
3.vm.$el
vm.$el用來訪問vm例項使用的根DOM元素
3.1 實現步驟
- 定義根標籤
- 修改內容
3.2 程式碼實現
1 <div id="app"> 2 <p>我是根標籤結構</p> 3 </div> 4 <script> 5 var vm = new Vue({ 6 el: '#app' 7 }) 8 vm.$el.innerHTML = '<div>我是替換後的div標籤</div>' 9 </script>
3.3 效果展示
4.vm.$children
該屬性只針對vue元件，與js中childNodes還是有區別的。
$children: 獲取子元件例項集合。
childNodes: 獲取子節點集合。
4.1 實現步驟
- 定義根標籤
- 定義子元件
- 獲取子元件
4.2 程式碼實現
1 <div id="app"> 2 <button @click="child">檢視子元件</button> 3 <my-component></my-component> 4 </div> 5 <script> 6 Vue.component('my-component', {template: '<div>myComponent</div>'}) 7 var vm = new Vue({ 8 el: '#app', 9 methods: { 10 child () { 11 console.log(this.$children) 12 } 13 } 14 }) 15 </script>
4.3 效果展示
5.vm.$root
vm.$root用來獲取當前元件樹的根Vue例項，如果當前例項沒有父例項，則獲取到的是該例項本身。
5.1 實現步驟
- 建立vm例項
- 獲取根Vue例項
5.2 程式碼實現
1 <div id="app"> 2 <my-component></my-component> 3 </div> 4 <script> 5 Vue.component('my-component', { 6 template: '<button @click="root">檢視根例項</button>', 7 methods: { 8 root () { 9 console.log(this.$root) 10 console.log(this.$root === vm.$root) 11 } 12 } 13 }) 14 var vm = new Vue({ el: '#app' }) 15 </script>
5.3 效果展示
6.vm.$slots
Vue中的元件中使用template模板定義HTML結構，為了方便使用template公共模板結構。
Vue提出了插槽（Slots）的概念，插槽就是定義在元件內部的template模板，可以通過$slots動態獲取。
案例一：通過<slot></slot>展示元件中的內容。
6.1 實現步驟
- 定義元件模板
- 註冊my-component元件
- 通過v-slot定義插槽物件。
6.2 程式碼實現
1 <div id="app"> 2 <my-component>你好</my-component> 3 </div> 4 5 <template id="first"> 6 <div> 7 <slot></slot> 8 </div> 9 </template> 10 11 <script> 12 Vue.component('my-component', { template: '#first' }) 13 var vm = new Vue({ el: '#app' }) 14 </script>
6.3 效果展示
案例二：通過v-slot定義插槽物件。
6.4 實現步驟
- 定義元件模板。
- 註冊my-component元件和列印插槽物件的文字內容。
6.5 程式碼實現
1 <div id="app"> 2 <my-component>你好 3 <template v-slot:second> 4 <div>內部結構</div> 5 </template> 6 </my-component> 7 </div> 8 9 <template id="first"> 10 <div> 11 <slot></slot> 12 <slot name="second"></slot> 13 </p> 14 </template> 15 16 <script> 17 Vue.component('my-component', { template: '#first' }) 18 var vm = new Vue({ el: '#app' }) 19 // 在控制檯檢視插槽內容 20 console.log(vm.$children[0].$slots.second[0].children[0].text) 21 </script>
6.6 效果展示
7.vm.$attrs
vm.$attrs可以獲取元件的屬性，但其獲取的屬性中不包含class、style以及被宣告為props的屬性。
7.1 實現步驟
- 定義id屬性
- 檢視id屬性
7.2 程式碼實現
1 <div id="app"> 2 <my-component id="test"></my-component> 3 </div> 4 <script> 5 Vue.component('my-component', { 6 template: '<button @click="showAttrs">檢視屬性</button>', 7 methods: { 8 showAttrs () { 9 console.log(this.$attrs) 10 } 11 } 12 }) 13 var vm = new Vue({ el: '#app' }) 14 </script>
7.3 效果展示
三、全域性配置
1.productionTip
開啟或關閉生產資訊提示資訊，預設為開啟狀態。
1.1 實現步驟
- 設定屬性值為false，表示關閉生產資訊提示資訊。
- 重新整理瀏覽器頁面，檢視執行結果。
1.2 程式碼實現
1 <script> 2 Vue.config.productionTip = false 3 </script>
1.3 效果展示
2.silent
silent可以取消Vue日誌和警告，silent預設值為false，開啟警告功能。
2.1 實現步驟
- silent的值設定為true，可以取消Vue日誌和警告。
2.2 程式碼實現
1 <div id="app">{{msg}}</div> 2 <script> 3 Vue.config.silent = true 4 var vm = new Vue({ el: '#app' }) 5 </script>
2.3 效果展示
3.devtools
表示開啟或關閉vue-devtools除錯工具，預設值為true，表示vue-devtools工具可用。
3.1 實現步驟
- devtools的值設定為false，關閉vue-devtools功能。
- 重新整理瀏覽器頁面，檢視執行結果。
3.2 程式碼實現
1 <script> 2 Vue.config.devtools = false 3 </script>
3.3 效果展示
重新整理瀏覽器頁面
四、元件進階
1.mixins
mixins是一種分發Vue元件中可複用功能的方式。
mixins物件可以包含任何元件選項，將定義的mixins物件引入元件中即可使用，mixins中的所有選項將會混入到元件自己的選項中。
1.1 實現步驟
- 定義myMixin物件
- 配置mixins選項
1.2 程式碼實現
1 <script> 2 // 定義myMixin物件 3 var myMixin = { 4 created () { 5 this.hello() 6 }, 7 methods: { 8 hello () { 9 console.log('hello from mixin!') 10 } 11 } 12 } 13 var Component = Vue.extend({ 14 mixins: [myMixin] 15 }) 16 var component = new Component() 17 </script>
1.3 效果展示
2.render
在Vue中可以使用Vue.render()實現對虛擬DOM的操作。在Vue中一般使用template來建立HTML，但這種方式可程式設計性不強，而使用Vue.render()可以更好地發揮JavaScript的程式設計能力。
2.1 實現步驟
- 定義根標籤
- 渲染頁面結構
- 使用render()函式
2.2 程式碼實現
1 <div id="app"> 2 <my-component>成功渲染</my-component> 3 </div> 4 <script> 5 Vue.component('my-component', { 6 render (createElement) { 7 return createElement('p', { 8 style: { 9 color: 'red', 10 fontSize: '16px', 11 backgroundColor: '#eee' 12 } 13 }, this.$slots.default) 14 } 15 }) 16 var vm = new Vue({ el: '#app' }) 17 </script>
2.3 效果展示
3.createElement
createElement()函式返回的並不是一個實際的DOM元素，它返回的其實是一個描述節點（createNodeDescription）。
- 第1個引數可以是一個HTML標籤名或元件選項物件。
- 第2個引數是可選的，可以傳入一個與模板中屬性對應的資料物件。
- 第3個引數是由createElement()構建而成的子級虛擬節點，也可以使用字串來生成文字虛擬節點。
案例：使用render()函式渲染頁面結構。
3.1 實現步驟
- 定義插槽
- 建立vm例項物件
- 使用createElement()函式建立header、content和footer元素。
3.2 程式碼實現
1 <div id="app"> 2 <my-component> 3 <template v-slot:header> 4 <div style="background-color:#ccc;height:50px"> 5 這裡是導航欄 6 </div> 7 </template> 8 <template v-slot:content> 9 <div style="background-color:#ddd;height:50px"> 10 這裡是內容區域 11 </div> 12 </template> 13 <template v-slot:footer> 14 <div style="background-color:#eee;height:50px"> 15 這裡是底部資訊 16 </div> 17 </template> 18 </my-component> 19 </div> 20 <script> 21 Vue.component('my-component', { 22 render (createElement) { 23 return createElement('div', [ 24 createElement('header', this.$slots.header), 25 createElement('content', this.$slots.content), 26 createElement('footer', this.$slots.footer) 27 ]) 28 } 29 }) 30 var vm = new Vue({ el: '#app' }) 31 </script>
3.3 效果展示
總結：
以上便是本篇文章所寫的關於Vue.directive()、Vue.use()等常用全域性API的使用，vm.$props、vm.$options、vm.$slots等例項屬性的使用，以及Vue全域性配置、元件的mixins、元件中渲染函式的使用。
通過以上的學習，各位·筆友應能夠熟練使用Vue完成一些簡單的頁面操作。
碼字不易，覺得樓主寫的還不錯，對你有幫助的話，請給個三連（關注、點贊、收藏）另外有問題可評論區留言討論。
後期會完善Vue進階語法的相關知識，有幫助的話，敬請關注樓主持續更新中ing 。。。（不定時發文）
轉載時請註明出處連結
參考文件：
1.vue官方文件：Vue.js (vuejs.org)
2.傳智播客-黑馬程式設計師（教材）：http://stu.ityxb.com/
其他隨筆推薦：
1. Vue開發環境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html
2. Vue基礎入門一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html