vue文档摘录二：应用 API

已于 2022-02-28 11:09:04 修改
阅读量315 收藏 1
点赞数
分类专栏： # VUE文档摘录 前端知识学习合集 文章标签： vue vue.js
于 2022-02-18 18:29:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37631110/article/details/122866410
版权

参考文档：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);

运行结果：

军军君01
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
3.vue文档API（1）：基础的配置
official business
06-30 572
1.简介: 对vue可调用的接口API集合：https://cn.vuejs.org/v2/api/ 2.全局配置： 即可直接对Vue的属性进行配置操作。 silent： 取消 Vue 所有的日志与警告。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>silent</title> <script src="https:
Vue基础笔记
最新发布
weixin_68915174的博客
11-16 7479
每个Vue应用都是通过createApp函数创建一个新的应用实例const app = createApp({ //根组件选项})
vue.createApp与data与const App
weixin_40945354的博客
02-28 814
有data就vue.createApp，不用直接const App 根组件，也不用带name：’‘，就直接可以Vue.createApp下面跟data()了。或者说父组件。
vue全局API
good god~的博客
08-12 501
vue api
Vue项目实战（五）配置 Axios api 接口调用文件
huangshulang1234的博客
01-08 9161
Vue项目实战（五）配置 Axios api 接口调用文件 这一篇介绍v配置 Axios api 接口调用文件，公众号已经准备了vue实战教程，如果您有需要，可以在公众号回复“vue”获取。 在上一篇《Vue项目实战（四）调整 App.vue 和 router 路由》，我们通过配置基本的信息，已经让我们的项目能够正常的跑起来了。但是，这里还没有涉及到 AJAX 请求
vue官方API开发文档
03-04
Vue的官方API开发文档是学习和掌握Vue核心概念、组件化开发以及相关工具的重要参考资料。本文将深入解析这份`vue2.0API文档.chm`中的关键知识点，帮助读者更好地理解和运用Vue.js。 一、基础概念 1. Vue实例：Vue的...
app-vue:Futbol Vue应用程序API
04-09
综上所述，Futbol Vue项目是一个利用Vue.js、PWA技术、API接口和Vue生态工具构建的足球应用，旨在提供流畅、离线可用且高度互动的用户体验。通过组件化开发、状态管理和路由控制，该应用实现了复杂的功能和良好的...
Flask_VUE_API_SQL:Restfull API应用
03-21
**Flask_VUE_API_SQL: RESTful API应用详解** RESTful API是一种软件架构风格，用于设计网络应用程序，特别是在Web服务中。它强调了简洁、可读的URL结构和标准HTTP方法，如GET、POST、PUT、DELETE等，来实现客户端...
vue + ArcGIS 地图应用系列二：加载地图
01-08
1. 创建 Vue 项目 我们利用 Vue-CLI 工具进行快捷创建 下载 Vue-CLI 工具 yarn add global @vue/cli # or: npm i @vue/cli -g 创建 Vue 项目 根据自己项目需求进行配置，这里不过多的赘述。 vue create example # ...
vue-api离线文档详解.rar
07-28
Vue API离线文档是开发者在没有网络连接时依然可以查阅Vue.js官方API的重要资源。这份文档通常包含了Vue的核心概念、组件系统、指令、生命周期、计算属性、响应式原理、插槽、事件处理以及 Vue 的高级特性等所有内容...
VUE 2.0 中文api
03-04
VUE 2.0 中文api ，使用此文档可以查看vue的使用函数的方法
Vue-选项/数据
知其白，守其黑；和其光，同其尘。
12-20 660
Vue.extend( options ) Vue.set( target, key, value )
Vue3 学习总结笔记 (十三)
IT_Holmes的博客
08-18 2058
1. Vue3 简介 2. 创建Vue3项目工程 3. Vue3 之 分析工程结构 3. Vue3 之 安装开发者工具 4. Vue3 之 setup 5. Vue3 之 ref函数 6. Vue3 之 reactive函数 7. Vue3 之 与vue2进行比较 8. reactive函数 和 ref函数 有什么区别 9. 重点注意事项 10. Vue3 之 Computed 计算属性 11. Vue3 之 watch属性 12. Vue3 之 watch的 .value问题 13. Vue3 之 wat
vue 自定义分模块写api 文件
Beth__hui的博客
04-23 992
一、vue的实例属性$options。 vue的实例属性$options是用来获取定义在data外的数据和方法的。 二、 在每个模块定义自己的api 文件 vue 中引用 <script> import xxxapi from './xxxapi'; export default{ api: [xxxapi], data(){ return {} }, method...
vue3新特性和新用法
感恩、奋进、自信
04-17 4938
下面是关于vue3的一些新特性和新用法的讲解 一、新增内置组件：teleport 官文解释teleport：Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件 场景：在组件A中使用alert弹窗，但不希望alert弹窗渲染的DOM结构嵌套在组件A中；而是渲染在我们指定的位置上 实现方式： 1）使用<teleport to="#alert">包裹自定义的alert组件，to属性：是有效的查询选择器..
Vue.js中文API阅读笔记以及踩坑总结
xuehu837769474的博客
08-26 1741
api地址：Vue.js中文API Vue参考MVVM模式，使用vm (ViewModel 的简称)来表示Vue实例，这也是官方推荐的使用vm表示vue实例   vue是一个虚拟DOM的，以数据驱动为核心的前端框架。数据驱动也可以称为响应式系统，当属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。 实例生命周期钩子函数        每个 Vue 实例在被创建之前，都要经过...
Vue 常用API整理
热门推荐
欧阳的技术博客
12-19 2万+
关于API这东西，前端各个框架都是不同的，且都经常更新，不用死记，所以本篇博客记录一下Vue中业务上常用的API（稍复杂些的API，简单的略） Vue中的数组操作 循环 <ul> // FAQ: key值一般不取index（数组下标值） 取唯一的id值 //（若一个页面有多个数组，index会有多个，key值则失去了唯一性） <li v-for="(item, index) in list" :key="item.id">{{item.name}}</li>
vue 的全局API
zt_vicky的博客
08-30 3622
vue 的全局API：在构造器外部用vue提供给我们的API函数来定义新的功能 vue2.0_Vue.directive自定义指令  自定义的指令： Vue.directive('');自定义指令中传递的3个参数： el:指令所绑定的元素，可以用来直接操作DOM。 binding:一个对象，包含指令的很多信息。 vnode:Vue编译生成的虚拟节点 V
Vue的应用方法，实例属性，实例方法
sl105105的博客
09-09 598
总结errorHandler和warnHandler可以在项目开发完成后,对真个vue的程序错误进行兜底。vue的一个应用程序开发时只能被挂载一次,不能反复挂载操作,所以unmount卸载就不能再挂载回去。1.nextTick的作用是什么:将执行函数体延迟到页面DOM更新完成后执行。可以在控制台看到各种方法等等执行的时间线,默认值是true。unmount:卸载应用实例的根组件,页面容器也会被卸载。warnHandler:修改程序运行警告是的执行方法。是以new vue的方式完成对应容器的。
vue脚手架——axios
03-30
VueCLI，全称Vue CLI，是Vue.js官方推出的一个命令行工具，用于快速搭建复杂的单页面应用（SPA）项目。VueCLI提供了自动化的项目配置和模板生成，大大降低了初始化项目的复杂度。开发者可以通过VueCLI轻松创建新的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

军军君01

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值