VUE 入门及应用 ( API )

VUE 入门及应用 ( API )
4.API

4.1. 全局API

通过 Vue 调用的就是全局 api, 如前面的 Vue.component()

4.1.1.Vue.directive 自定义指令

Vue.js 中的 Vue.directive 是 Vue 提供的一种自定义指令（Directives）的功能。

自定义指令允许开发者扩展 HTML 元素的功能，为其绑定特殊的响应式行为。

创建一个自定义指令的基本格式如下：
```
Vue.directive('指定名', {
 钩子函数(el, binding, vnode){}
});
1
2
3
```
4.1.1.1.常用钩子函数
1. bind
  - 在指令第一次绑定到元素上时调用。可以在这里执行一次性初始化设置。
  - 参数：el（绑定元素），binding（一个对象，包含指令的各种信息，如值、旧值、参数、修饰符等），vnode（Vue编译生成的虚拟节点）。
2. inserted
  - 当元素被插入到父节点时调用（仅保证父节点存在，但不保证元素已插入到文档流中）。
  - 参数与 bind 相同。
3. update
  - 当指令所在组件的 VNode 更新时调用，指令的值可能发生了变化。
  - 参数与 bind 相同。
4. componentUpdated
  - 当指令所在组件的 VNode 以及其子 VNode 完全更新后调用。
  - 参数与 bind 相同。
5. unbind
  - 只调用一次，指令与元素解绑时调用。
  - 参数与 bind 相同。
钩子函数的参数
- el：指令所绑定元素的真实 DOM 对象。
- binding：一个对象，包含以下属性：
  - value：指令的绑定值，可读可写。
  - oldValue：上一次指令绑定值，在 update 钩子中可用。
  - arg：指令的参数，如果在指令使用时指定了参数（如 v-my-directive:foo，则 arg 为 "foo"）。
  - modifiers：一个对象，包含指令的修饰符，如 v-my-directive.modifier 中的 modifier。
- vnode：Vue 编译生成的虚拟节点。
4.1.1.2.实例一: 使元素背景色随时间变换：
```
Vue.directive('color-change', {
  bind(el, binding) {
    el.style.backgroundColor = binding.value;
    
    const intervalId = setInterval(() => {
      el.style.backgroundColor = getRandomColor(); // 假设有个函数能生成随机颜色
    }, 1000);

    // 在解绑指令时清除定时器
    el._intervalId = intervalId;
  },
  
  unbind(el) {
    clearInterval(el._intervalId);
  },
});

new Vue({
  // ...
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
```
在模板中使用自定义指令：
```
<div v-color-change="'red'">div>
1
```
这样，v-color-change 指令就会被应用到 div 元素上，并在绑定时设置初始背景色，然后每隔一秒更改一次背景色。当 Vue 实例销毁或指令解除绑定时，定时器会被清理。

4.1.1.3.实例二: 获得焦点：
```
<body>
    <div id="app">
        <input type="text"   v-focus="true" name="" id="" value="" />
    div>
body>
<script type="text/javascript">
    // 自定义 focus 指令
    Vue.directive("focus",{
        // el: 当前绑定的元素  binding : 指令本身
        inserted(el, binding){
            if(binding.value){
                el.focus();
            }
        }
    })
    var vm= new Vue({el:"#app"})
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
**4.1.2.Vue.use 安装插件

Vue.use() 是用于安装 Vue 插件或者其他 Vue 兼容的库。

当你开发或者使用一个遵循 Vue 插件规范的第三方模块时，通常会通过这个方法将其注册到 Vue 上。

如: 在项目中引入 ElementUI时
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 引入默认主题样式

Vue.use(ElementUI); // 注册 Element UI 到 Vue 的原型上
1
2
3
4
```
4.1.2.1.自定义插件时

插件可以是一个对象或函数

如果是对象,必须提供 install()方法, 来安装插件

而函数将被当成 install()方法
```
<body>
    <div id="app" v-my-directive >div>
body>
<script type="text/javascript">
    // 定义一个MyPlugin(自定义插件)对象
    let MyPlugin = {}
    // 对象的 install() 方法
    MyPlugin.install = function(Vue, options){
        console.log(options)
        // 在插件中为Vue添加自定义指令
        Vue.directive("my-directive", {
            bind(el, binding){
                // 为绑定元素 设置 样式
                el.style = "width:100px;height:100px;background-color:#ccc;"
            }
        })
    }

    Vue.use(MyPlugin, {someOption: true})
    var vm = new Vue({el:"#app"})
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
```
4.1.3.Vue.extend

Vue.extend() 是用于创建一个 Vue 组件的构造器。

这个构造器继承自 Vue，允许我们基于 Vue 的原型方法和属性创建一个子类，

并可以在子类中定义额外的选项，如组件的模板、数据、方法、生命周期钩子等。

基本语法：
```
const ExtendedVue = Vue.extend(options)
1
```
- options：这是一个对象，包含 Vue 组件的选项，如 data、methods、computed、template 或 render 函数等。
使用 Vue.extend() 创建的构造器可以用来生成 Vue 组件实例，这在动态组件或者需要多次复用相同配置的场景中特别有用。

示例：
```
const MyComponent = Vue.extend({
  template: '{{ message }}
',
  data() {
    return {
      message: 'Hello from extended Vue instance!'
    }
  }
});

// 创建并挂载一个组件实例
new MyComponent().$mount('#app');
1
2
3
4
5
6
7
8
9
10
11
```
此外，Vue Router 和 Vuex 在创建组件时也会经常用到 Vue.extend()，以确保生成的组件具有完整的 Vue 生态系统支持。

**4.1.4.Vue.set

Vue.set() 主要用于响应式地向现有对象上添加新的属性或修改已存在的属性值，并确保这些改变能够触发视图更新。

由于 Vue 使用了基于 getter 和 setter 的观察系统来实现数据绑定和反应性，

直接通过 JavaScript 的点操作符（.）或索引操作符（[]）对对象属性进行增加或修改时，

新增的属性可能不会被 Vue 系统跟踪，因此不会触发相应的视图更新。

Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。

Vue.set用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

4.1.4.1.基本语法

Vue.set() 方法的用法如下：
```
Vue.set(target, key, value)
1
```
- target: 需要更改的对象，即你想要在其上添加或修改属性的对象。
- key: 要添加或修改的属性名。
- value: 要赋予新属性的值，或者是要更新的已有属性的新值。
例如：
```
let vm = new Vue({
  data: {
    user: {
      name: '王小二'
    }
  }
})

// 直接添加新属性不会触发视图更新
vm.user.age = 30; // 这里不响应

// 使用 Vue.set 添加新属性会触发视图更新
Vue.set(vm.user, 'age', 30);
1
2
3
4
5
6
7
8
9
10
11
12
13
```
4.1.4.2.更新数组
```
// 对于数组，也可以使用 Vue.set 来响应式地向指定索引添加元素
vm.someArray = []
Vue.set(vm.someArray, 0, '新增元素');
1
2
3
```
另外，对于数组而言，Vue 还提供了 vm.$set() 实例方法，它与 Vue.set() 功能相同，但可以直接在实例上下文中调用：
```
vm.$set(vm.someArray, 0, '新增元素');
1
```
4.1.5.Vue.minxin

Vue.mixin() 是用于向 Vue 的所有组件实例注入全局混合（mixin）选项。

混合是一种在多个组件间复用共同功能的方式，它可以包含任意数量的组件选项，如数据、计算属性、方法、生命周期钩子等。

Vue.mixin用于全局注册一个混入（Mixins), 它将影响之后创建的每个Vue实例。

该接口主要是提供给插件作者使用，在插件中向组件注入自定义的行为。

该接口不推荐在应用代码中使用。使用Vue.mixin为Vue实例注入created()函数。

使用 Vue.mixin() 的基本语法如下：
```
Vue.mixin({
  data() {
    return {
      mixinData: '混合的数据.'
    }
  },
  methods: {
    mixinMethod() {
      console.log('混合的方法.');
    }
  },
  created() {
    console.log('混合创建完成.');
  },
  // ... 其他组件选项
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
一旦定义了一个混合，它会被注入到每个新的 Vue 组件实例中，无论何时创建这些组件。

这意味着混合中的所有选项都会合并到组件的选项中，如果有冲突（例如，组件本身和混合中都定义了同名的数据属性或方法），组件本身的选项优先级更高。

需要注意的是，过度使用全局混合可能会让项目变得难以理解和维护，因为它会影响到每个 Vue 组件，建议谨慎使用，

并尽量将其限制在必要的情况下，比如全局状态管理和工具函数封装等。

在团队协作中，明确指出哪些组件受到了全局混合的影响也非常重要。

4.2.实例属性

 4.2.1.vm.$props

接收上级组件向下传递的数据.

4.2.2.vm.$options

获取在vue实例初始化时, 传入的自定义的选项( 选项值可以是数组,对角,函数),

4.2.3.vm.$el

用于访问根DOM元素

 4.2.4.vm.$children

获取当前实例的直接子组件, 但不保证顺序, 也不是响应式的

 4.2.5.vm.$root

获取当前组件树的根Vue实例, 没有父实例,就是当前实例

 4.2.6.vm.$slots

获取当前组件下的插槽

 4.2.7.vm.$attrs

获取当前组件的属性, 不包含 class, style以及被声明为props的属性

 *4.2.8.this.$refs

根据元素的 ref属性 , 获取元素

 4.3.全局配置 config

4.3.1.productionTip

当在网页中加载了vue.js(开发版本）文件时，浏览器的控制台会出现英文的提示信息，提醒用户“您正在开发模式下运行Vue,在为生产部署时，请确保打开生产模式”。如果要打开生产模式，使用vue.min.js文件代替vue.js文件即可。
```
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
1
2
3
```
或者 (但测试没好使)
```
<script>
Vue.config.productionTip=false
script>
1
2
3
```
4.3.2.silent

Vue全局配置对象中，silent可以取消Vue日志和警告，值类型为boolean,默认值为false,设为true表示忽略警告和日志，否则不忽略。

4.3.3.devtools

设置是否启用浏览器web调试工具

 4.4.组件强化

 4.4.1.mixins 混入

mixins是一种分发Vue组件中可复用功能的方式。

mixins对象可以包含任何组件选项，当组件使用mixins时，将定义的mixins对象引入组件中即可使用，

mixins中的所有选项将会混入到组件自己的选项中。
```
	
var myMixin = {
    created(){
        this.hello()
    },
    methods: {
        hello(){
            console.log("hello from mixin!")
        }
    }
}

var Component = Vue.extend({
	mixins:[myMixin]
})

var compent = new Component()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```
**4.4.2.render 渲染

在 Vue.js 中，render 函数是一种高级的组件定制方式，用于取代传统的模板。

在Vue中一般使用template来创建HTML, 但这种方式可编程性不强，而使用Vue.render()可以更好地发挥JavaScript的编程能力。

它接受一个函数，该函数需要返回一个虚拟 DOM 树（VNode），Vue.js 内部会根据 VNode 和实际 DOM 的差异进行高效的 DOM 更新。

4.4.2.1.案例一
```
export default {
  render(createElement) {
    return createElement('div', {}, [
      createElement('h1', {}, '标题'),
      createElement('p', {}, '内容')
    ]);
  }
}
1
2
3
4
5
6
7
8
```
在这个例子中，render 函数返回了一个包含 h1 和 p 元素的 div 元素的虚拟 DOM。createElement 函数（在 Vue 2.x 中可能是 this.$createElement 或外部导入的 createElement 函数）用于创建虚拟 DOM 节点，其参数依次为：
- 元素标签名（如 'div'、'h1'、'p'）；
- 一个对象，用于定义元素的属性、样式、事件等（如 {} 或 { class: ['container'] }）；
- 子节点数组，可以是更多的虚拟 DOM 节点，也可以是纯文本（如 ['内容']）。
使用 render 函数的优势在于它具有更高的灵活性和更好的性能优化潜力，特别是在需要大量动态渲染逻辑、组件递归渲染、直接操作DOM节点或者集成第三方库（如D3.js）等场景中。

然而，相比于模板，render 函数的可读性和维护性相对较低，一般情况下，除非有特殊需求，否则推荐优先使用模板语法。

4.4.2.2.案例二
```
<body>
    <div id="app">
        <my-component>成功渲染my-component>
    div>
body>
<script type="text/javascript">
    Vue.component("my-component", {
        render(createElement){
            return createElement('p', {
                style:{
                    color:"red",
                    fontSize: "16px",
                    backgroundColor: "#eee"
                }
            }, this.$slots.default)
        }
    })

    var vm = new Vue({el:"#app"})

script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
```
4.4.3.createElement 创建元素

createElement 函数在 Vue 2.x 版本中作为底层方法存在，用于创建虚拟DOM节点。然而，在 Vue 3.x 中，这个方法被重命名为 h。

用于创建 Vue 组件的虚拟节点，它是 Vue 渲染函数的基础，常用于编写渲染函数（Render Function）替代传统的模板。

渲染函数可以返回虚拟DOM节点，Vue.js 内部会根据虚拟DOM和实际DOM的差异进行高效的DOM更新。

create Element()函数的参数

第1个参数可以是一个HTML标签名或组件选项对象；

第2个参数是可选的，可以传入一个与模板中属性对应的数据对象；

第3个参数是由 createElement()构建而成的子级虚拟节点，也可以使用字符串来生成文本虚拟节点，具体可以参考Vue的官方文档。

4.4.3.1.实例一
```
import { createElement } from 'vue'

export default {
  render(createElement) {
    return createElement(
      'div', // 标签名
      {
        class: ['container'], // 属性
        on: { click: this.handleClick } // 事件监听器
      },
      [ // 子节点数组
        createElement('span', 'Hello'),
        this.message ? createElement('p', this.message) : null
      ]
    )
  },
  methods: {
    handleClick() {
      // ...
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
```
4.4.3.2.虚拟DOM

createElement()函数返回的并不是一个实际的DOM元素，它返回的其实是一个描述节点（createNodeDescription),

用来告诉Vue在页面上需要渲染什么样的节点。

这个描述节点也可以称为虚拟节点（Virtual Node),简写为VNode。

而“虚拟DOM”是对由Vue 组件树建立起来的整个 VNode 树的称呼。

4.4.3.3.实例二
```
<body>
    <div id="app">
        <my-component>
            <template v-slot:header >
                <div style="background-color: #CCCCCC;height: 50px;">
                    这里是导航栏
                div>
            template>
            <template v-slot:content >
                <div style="background-color: #DDDDDD;height: 50px;">
                    这里是展示信息
                div>
            template>						
            <template v-slot:footer >
                <div style="background-color: #EEEEEE;height: 50px;">
                    这里是底部信息
                div>
            template>
        my-component>
    div>
body>
<script type="text/javascript">

    Vue.component('my-component',{
        render(createElement){
            return createElement('div',[
                createElement('header', this.$slots.header),
                createElement('content', this.$slots.content),
                createElement('footer', this.$slots.footer),
            ])
        }
    })	
    var vm = new Vue({el: "#app"})
script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
```
相关阅读:
java1.8新特性入门级讲解
 Android studio进入手机调试状态
 M-LVDS收发器MS2111，可替代SN65MLVD206
ubutu18.04 使用update-alternatives 对python和python3进行版本管理
 @Validated和@Valid 区别
 连续/离散的控制系统阶跃测试（包括MATLAB里的step()函数）
单链表算法经典OJ题
 【小笔记】MyBaits的Cursor
为什么要学Selenium自动化测试？
修改linux中tomcat的端口
原文地址：https://blog.csdn.net/yuanchun05/article/details/136381005

4.API

4.1. 全局API

4.1.1.Vue.directive 自定义指令

4.1.1.1.常用钩子函数

4.1.1.2.实例一: 使元素背景色随时间变换：

4.1.1.3.实例二: 获得焦点：

**4.1.2.Vue.use 安装插件

4.1.2.1.自定义插件时

4.1.3.Vue.extend

**4.1.4.Vue.set

4.1.4.1.基本语法

4.1.4.2.更新数组

4.1.5.Vue.minxin

4.2.实例属性

4.2.1.vm.$props

4.2.2.vm.$options

4.2.3.vm.$el

4.2.4.vm.$children

4.2.5.vm.$root

4.2.6.vm.$slots

4.2.7.vm.$attrs

*4.2.8.this.$refs

4.3.全局配置 config

4.3.1.productionTip

4.3.2.silent

4.3.3.devtools

4.4.组件强化

4.4.1.mixins 混入

**4.4.2.render 渲染

4.4.2.1.案例一

4.4.2.2.案例二

4.4.3.createElement 创建元素

4.4.3.1.实例一

4.4.3.2.虚拟DOM

4.4.3.3.实例二