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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
