您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它提供了一系列的 API，帮助开发者更高效地构建应用。本文将详细介绍 Vue.js 中常用的 API，包括全局 API、实例 API、选项 API、生命周期钩子、指令、组件、插件等。
Vue 提供了一些全局 API，可以在任何地方使用。
Vue.extend 用于创建一个 Vue 组件的子类。
const MyComponent = Vue.extend({
template: '<div>Hello, Vue!</div>'
});
new MyComponent().$mount('#app');
Vue.nextTick 用于在下次 DOM 更新循环结束之后执行回调函数。
Vue.nextTick(() => {
console.log('DOM updated');
});
Vue.set 用于向响应式对象添加一个属性，并确保这个新属性也是响应式的。
Vue.set(vm.someObject, 'newProperty', 'value');
Vue.delete 用于删除对象的属性，并确保视图更新。
Vue.delete(vm.someObject, 'propertyToDelete');
Vue.directive 用于注册或获取全局指令。
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
Vue.filter 用于注册或获取全局过滤器。
Vue.filter('capitalize', function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});
Vue.component 用于注册或获取全局组件。
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
Vue.use 用于安装 Vue.js 插件。
Vue.use(MyPlugin);
Vue.mixin 用于全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。
Vue.mixin({
created: function () {
console.log('Global mixin created hook');
}
});
Vue.compile 用于在运行时编译模板字符串。
const res = Vue.compile('<div><span>{{ msg }}</span></div>');
Vue.version 提供当前 Vue 的版本号。
console.log(Vue.version);
Vue 实例提供了一些方法和属性，可以在组件内部使用。
vm.$data 是 Vue 实例的数据对象。
console.log(vm.$data);
vm.$props 是 Vue 实例的 props 对象。
console.log(vm.$props);
vm.$el 是 Vue 实例使用的根 DOM 元素。
console.log(vm.$el);
vm.$options 是 Vue 实例的初始化选项。
console.log(vm.$options);
vm.$parent 是 Vue 实例的父实例。
console.log(vm.$parent);
vm.$root 是 Vue 实例的根实例。
console.log(vm.$root);
vm.$children 是 Vue 实例的子组件数组。
console.log(vm.$children);
vm.$slots 是 Vue 实例的插槽对象。
console.log(vm.$slots);
vm.$scopedSlots 是 Vue 实例的作用域插槽对象。
console.log(vm.$scopedSlots);
vm.$refs 是 Vue 实例的引用对象。
console.log(vm.$refs);
vm.$isServer 用于检查 Vue 实例是否运行在服务器端。
console.log(vm.$isServer);
vm.$attrs 是 Vue 实例的非 prop 属性对象。
console.log(vm.$attrs);
vm.$listeners 是 Vue 实例的事件监听器对象。
console.log(vm.$listeners);
vm.$watch 用于观察 Vue 实例上的表达式或计算属性。
vm.$watch('someData', function (newVal, oldVal) {
console.log('someData changed:', newVal, oldVal);
});
vm.$set 是 Vue.set 的别名，用于向响应式对象添加属性。
vm.$set(vm.someObject, 'newProperty', 'value');
vm.$delete 是 Vue.delete 的别名，用于删除对象的属性。
vm.$delete(vm.someObject, 'propertyToDelete');
vm.$on 用于监听当前实例上的自定义事件。
vm.$on('custom-event', function (msg) {
console.log('Custom event triggered:', msg);
});
vm.$once 用于监听当前实例上的自定义事件，但只触发一次。
vm.$once('custom-event', function (msg) {
console.log('Custom event triggered once:', msg);
});
vm.$off 用于移除事件监听器。
vm.$off('custom-event');
vm.$emit 用于触发当前实例上的事件。
vm.$emit('custom-event', 'Hello, Vue!');
vm.$mount 用于手动挂载 Vue 实例。
vm.$mount('#app');
vm.$forceUpdate 用于强制 Vue 实例重新渲染。
vm.$forceUpdate();
vm.$nextTick 是 Vue.nextTick 的别名，用于在下次 DOM 更新循环结束之后执行回调函数。
vm.$nextTick(() => {
console.log('DOM updated');
});
vm.$destroy 用于完全销毁一个 Vue 实例。
vm.$destroy();
Vue 实例的选项 API 用于配置 Vue 实例的行为。
data 是 Vue 实例的数据对象。
new Vue({
data: {
message: 'Hello, Vue!'
}
});
props 是 Vue 实例的 props 数组或对象。
new Vue({
props: ['message']
});
computed 是 Vue 实例的计算属性对象。
new Vue({
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
}
});
methods 是 Vue 实例的方法对象。
new Vue({
methods: {
greet: function () {
alert('Hello, Vue!');
}
}
});
watch 是 Vue 实例的观察器对象。
new Vue({
watch: {
message: function (newVal, oldVal) {
console.log('Message changed:', newVal, oldVal);
}
}
});
components 是 Vue 实例的局部组件对象。
new Vue({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
});
directives 是 Vue 实例的局部指令对象。
new Vue({
directives: {
focus: {
inserted: function (el) {
el.focus();
}
}
}
});
filters 是 Vue 实例的局部过滤器对象。
new Vue({
filters: {
capitalize: function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});
el 是 Vue 实例的挂载元素。
new Vue({
el: '#app'
});
template 是 Vue 实例的模板字符串。
new Vue({
template: '<div>Hello, Vue!</div>'
});
render 是 Vue 实例的渲染函数。
new Vue({
render: function (h) {
return h('div', 'Hello, Vue!');
}
});
renderError 是 Vue 实例的渲染错误处理函数。
new Vue({
renderError: function (h, err) {
return h('pre', { style: { color: 'red' }}, err.stack);
}
});
beforeCreate 是 Vue 实例的生命周期钩子，在实例初始化之后，数据观测和事件配置之前被调用。
new Vue({
beforeCreate: function () {
console.log('beforeCreate');
}
});
created 是 Vue 实例的生命周期钩子，在实例创建完成后被调用。
new Vue({
created: function () {
console.log('created');
}
});
beforeMount 是 Vue 实例的生命周期钩子，在挂载开始之前被调用。
new Vue({
beforeMount: function () {
console.log('beforeMount');
}
});
mounted 是 Vue 实例的生命周期钩子，在挂载完成后被调用。
new Vue({
mounted: function () {
console.log('mounted');
}
});
beforeUpdate 是 Vue 实例的生命周期钩子，在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
new Vue({
beforeUpdate: function () {
console.log('beforeUpdate');
}
});
updated 是 Vue 实例的生命周期钩子，在数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。
new Vue({
updated: function () {
console.log('updated');
}
});
beforeDestroy 是 Vue 实例的生命周期钩子，在实例销毁之前调用。
new Vue({
beforeDestroy: function () {
console.log('beforeDestroy');
}
});
destroyed 是 Vue 实例的生命周期钩子，在实例销毁之后调用。
new Vue({
destroyed: function () {
console.log('destroyed');
}
});
errorCaptured 是 Vue 实例的生命周期钩子，在捕获一个来自后代组件的错误时被调用。
new Vue({
errorCaptured: function (err, vm, info) {
console.error('Error captured:', err, vm, info);
return false; // 阻止错误继续向上传播
}
});
Vue 实例的生命周期钩子函数允许在实例的不同阶段执行自定义逻辑。
在实例初始化之后，数据观测和事件配置之前被调用。
new Vue({
beforeCreate() {
console.log('beforeCreate');
}
});
在实例创建完成后被调用，此时已完成数据观测、属性和方法的运算，但尚未挂载 DOM。
new Vue({
created() {
console.log('created');
}
});
在挂载开始之前被调用，相关的 render 函数首次被调用。
new Vue({
beforeMount() {
console.log('beforeMount');
}
});
在挂载完成后被调用，此时 DOM 元素已经插入到文档中。
new Vue({
mounted() {
console.log('mounted');
}
});
在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
new Vue({
beforeUpdate() {
console.log('beforeUpdate');
}
});
在数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。
new Vue({
updated() {
console.log('updated');
}
});
在实例销毁之前调用，此时实例仍然完全可用。
new Vue({
beforeDestroy() {
console.log('beforeDestroy');
}
});
在实例销毁之后调用，此时所有的事件监听器和子实例都已被移除。
new Vue({
destroyed() {
console.log('destroyed');
}
});
在捕获一个来自后代组件的错误时被调用。
new Vue({
errorCaptured(err, vm, info) {
console.error('Error captured:', err, vm, info);
return false; // 阻止错误继续向上传播
}
});
Vue 提供了一些内置指令，用于在模板中进行常见的 DOM 操作。
v-text 用于更新元素的 textContent。
<div v-text="message"></div>
v-html 用于更新元素的 innerHTML。
<div v-html="htmlContent"></div>
v-show 用于根据表达式的值切换元素的 display CSS 属性。
<div v-show="isVisible">Visible</div>
v-if 用于根据表达式的值条件性地渲染元素。
<div v-if="isVisible">Visible</div>
v-else 用于表示 v-if 的“else 块”。
<div v-if="isVisible">Visible</div>
<div v-else>Not Visible</div>
v-else-if 用于表示 v-if 的“else if 块”。
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>
v-for 用于基于源数据多次渲染元素或模板块。
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
v-on 用于监听 DOM 事件。
<button v-on:click="handleClick">Click me</button>
v-bind 用于动态绑定一个或多个属性，或一个组件 prop 到表达式。
<img v-bind:src="imageSrc">
v-model 用于在表单控件或组件上创建双向绑定。
<input v-model="message">
v-slot 用于定义具名插槽或作用域插槽。
<template v-slot:header>
<h1>Header</h1>
</template>
v-pre 用于跳过这个元素和它的子元素的编译过程。
<div v-pre>{{ this will not be compiled }}</div>
v-cloak 用于保持在元素上直到关联实例结束编译。
<div v-cloak>{{ message }}</div>
v-once 用于只渲染元素和组件一次。
<div v-once>{{ message }}</div>
Vue 组件是 Vue.js 的核心概念之一，允许你将 UI 拆分为独立、可复用的代码片段。
组件可以通过 Vue.component 全局注册，也可以在组件内部局部注册。
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
组件之间可以通过 props 和 events 进行通信。
Vue.component('child', {
props: ['message'],
template: '<div>{{ message }}</div>'
});
new Vue({
el: '#app',
data: {
parentMessage: 'Hello from parent'
}
});
插槽允许你在组件中插入内容。
Vue.component('my-component', {
template: `
<div>
<slot></slot>
</div>
`
});
作用域插槽允许你将子组件的数据传递给父组件。
Vue.component('my-component', {
template: `
<div>
<slot :text="message"></slot>
</div>
`,
data() {
return {
message: 'Hello from child'
};
}
});
动态组件允许你在多个组件之间动态切换。
<component :is="currentComponent"></component>
异步组件允许你按需加载组件。
Vue.component('async-component', function (resolve, reject) {
setTimeout(() => {
resolve({
template: '<div>Async Component</div>'
});
}, 1000);
});
Vue 插件通常用于添加全局功能或资源。
插件通常是一个对象或函数，包含 install 方法。
const MyPlugin = {
install(Vue, options) {
Vue.prototype.$myMethod = function () {
console.log('MyPlugin method called');
};
}
};
Vue.use(MyPlugin);
插件可以通过 Vue.use 方法安装。
Vue.use(MyPlugin);
Vue.js 提供了丰富的
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。