提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue文档摘录二：应用 API

Vue文档应用API 摘录
2023-09-11 14:19:17 时间

参考文档：https://v3.cn.vuejs.org/api/application-api.htmlhttps://v3.cn.vuejs.org/api/application-api.html

component：

API文档：

  • 参数：

    • {string} name
    • {Function | Object} [definition]

  • 返回值：

    • 如果传入 definition 参数，则返回应用实例。
    • 如果不传入 definition 参数，则返回组件定义。

  • 用法：

    注册或检索全局组件。注册还会使用给定的 name 参数自动设置组件的 name。

  • 示例：

import { createApp } from 'vue'

const app = createApp({})

// 注册一个选项对象
app.component('my-component', {
  /* ... */
})

// 检索注册的组件
const MyComponent = app.component('my-component')

测试代码：

import { createApp } from 'vue'

var app  = createApp({})//创建实例

//注册组件
app.component('component-test',{
	data(){
		return {
			msg:'1111'
		}
	},
	template:'消息：<span >{{msg}}</span>'
});

//挂载到也没上
app.mount('#app')

//获取组件实例
var component_test = app.component('component-test')
console.log(component_test);

运行结果：

config：

API文档：

  • 用法：

一个包含应用配置的对象。

  • 示例：
import { createApp } from 'vue'
const app = createApp({})

app.config = {...}

测试代码：

//配置：
app.config = {
	errorHandler:function(err, vm, info){
		//异常信息
	},
	warnHandler:function(msg, vm, trace) {
		//告警信息
	},
	globalProperties:{//全局属性
		mm:'111'
	}
}
console.log(app.config);

运行结果：

directive：

API文档：

  • 参数：

    • {string} name
    • {Function | Object} [definition]

  • 返回值：

    • 如果传入 definition 参数，则返回应用实例。
    • 如果不传入 definition 参数，则返回指令定义。

  • 用法：

    注册或检索全局指令。

  • 示例：

import { createApp } from 'vue'
const app = createApp({})

// 注册
app.directive('my-directive', {
  // 指令具有一组生命周期钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 在绑定元素的父组件挂载之后调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 在绑定元素的父组件卸载之后调用
  unmounted() {}
})

// 注册 (函数指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})

// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

测试代码：

// 注册
app.directive('my-directive', {
  // 指令具有一组生命周期钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 在绑定元素的父组件挂载之后调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 在绑定元素的父组件卸载之后调用
  unmounted() {}
})

// 注册 (函数指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})

// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')
console.log(myDirective);

运行结果：

mixin：

API文档：

  • 参数：

    • {Object} mixin

  • 返回值：

    • 应用实例

  • 用法：

    将一个 mixin 应用在整个应用范围内。一旦注册，它们就可以在当前的应用中任何组件模板内使用它。插件作者可以使用此方法将自定义行为注入组件。不建议在应用代码中使用。

测试代码：

// 为自定义的选项 'myOption' 注入一个处理器。
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

mount：

API文档：

  • 参数：

    • {Element | string} rootContainer
    • {boolean} isHydrate

  • 返回值：

    • 根组件实例

  • 用法：

    所提供 DOM 元素的 innerHTML 将被替换为应用根组件的模板渲染结果。

  • 示例：

<body>
  <div id="my-app"></div>
</body>

import { createApp } from 'vue'

const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')

provide：

API文档：

  • 参数：

    • {string | Symbol} key
    • value

  • 返回值：

    • 应用实例

  • 用法：

    设置一个可以被注入到应用范围内所有组件中的值。组件应该使用 inject 来接收 provide 的值。

    从 provide/inject 的角度来看，可以将应用程序视为根级别的祖先，而根组件是其唯一的子级。

    该方法不应该与 provide 组件选项或组合式 API 中的 provide 方法混淆。虽然它们也是相同的 provide/inject 机制的一部分，但是它们是用来配置组件而非应用所 provide 的值。

    通过应用提供值在编写插件时尤其有用，因为插件一般不能使用组件来提供值。这是对 globalProperties 的替代选择。

    注意

    provide 和 inject 绑定不是响应式的。这是有意为之的。不过，如果你向下传递一个响应式对象，这个对象上的 property 会保持响应式。

  • 示例：

    向根组件中注入一个 property，值由应用提供：

import { createApp } from 'vue'

const app = createApp({
  inject: ['user'],
  template: `
    <div>
      {{ user }}
    </div>
  `
})

app.provide('user', 'administrator')

unmount：

API文档：

  • 用法：

    卸载应用实例的根组件。

  • 示例：

<body>
  <div id="my-app"></div>
</body>

import { createApp } from 'vue'

const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')

// 挂载 5 秒后，应用将被卸载
setTimeout(() => app.unmount(), 5000)

use：

API文档：

  • 参数：

    • {Object | Function} plugin
    • ...options (可选)

  • 返回值：

    • 应用实例

  • 用法：

    安装 Vue.js 插件。如果插件是一个对象，则它必须暴露一个 install 方法。如果插件本身是一个函数，则它将被视为 install 方法。

    该 install 方法将以应用实例作为第一个参数被调用。传给 use 的其他 options 参数将作为后续参数传入该安装方法。

    当在同一个插件上多次调用此方法时，该插件将仅安装一次。

  • 示例：

    import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'

const app = createApp({})

app.use(MyPlugin)
app.mount('#app')

version：

API文档：

  • 用法：

    以字符串形式提供已安装的 Vue 的版本号。这对于基于不同版本使用不同策略的社区插件来说特别有用。

  • 示例：

    export default {
  install(app) {
    const version = Number(app.version.split('.')[0])
    if (version < 3) {
      console.warn('This plugin requires Vue 3')
    }
    // ...
  }
}

测试代码：

const version = Number(app.version.split('.')[0])
console.log(version);

运行结果：

相关文章