Vue基礎二之全局API、實例屬性和全局配置，以及組件進階（mixins）的詳細教程（案列實現，詳細圖解，附源碼）

本文轉載自查看原文 2022-04-08 20:24 726 前端技術/ 前端Vue框架/ vue框架學習

前言

本篇隨筆主要講解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. 十大排序算法（Java實現）（作者力推）：https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

2. Vue開發環境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html

3. Vue基礎入門一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 java基礎:switch語句應用,循環的詳細介紹以及使用,附練習案列 Vue.js 源碼分析(二) 基礎篇全局配置 vue組件的配置屬性 vue3-配置全局組件 Vue3全局APi解析-源碼學習 VueJS筆記-Vue中實現全局唯一單例組件思路及實例[TS](Vue Plugins) Vue.js 源碼分析(十三) 基礎篇組件 props屬性詳解 vue mixins vue全局配置----小白基礎篇 C#進階系列——一步一步封裝自己的HtmlHelper組件：BootstrapHelper（三：附源碼）