Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码） - JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

本篇随笔主要讲解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 效果展示

二、实例属性