Vue.js是一個(gè)流行的JavaScript框架，用于構(gòu)建用戶界面和單頁(yè)應(yīng)用程序。它以簡(jiǎn)潔、易用和高效而著稱，使得開發(fā)者能夠快速上手并開發(fā)出功能豐富的Web應(yīng)用。本文將帶你走進(jìn)Vue的世界，從基礎(chǔ)知識(shí)到實(shí)踐應(yīng)用，一步步引導(dǎo)你掌握Vue的核心概念和開發(fā)技巧。9L228資訊網(wǎng)——每日最新資訊28at.com

9L228資訊網(wǎng)——每日最新資訊28at.com

一、Vue簡(jiǎn)介

Vue.js（通常簡(jiǎn)稱為Vue）是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。與其他重量級(jí)框架（如Angular、React）不同，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。9L228資訊網(wǎng)——每日最新資訊28at.com

二、Vue基礎(chǔ)

1. 聲明式渲染

Vue.js的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn)DOM的系統(tǒng)：9L228資訊網(wǎng)——每日最新資訊28at.com

<div id="app">  {{ message }}</div>

var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})

這段代碼創(chuàng)建了一個(gè)Vue實(shí)例，并將其掛載到匹配選擇器#app的第一個(gè)元素上。當(dāng)這些數(shù)據(jù)對(duì)象上的數(shù)據(jù)改變時(shí)，視圖會(huì)進(jìn)行重渲染。9L228資訊網(wǎng)——每日最新資訊28at.com

2. 組件系統(tǒng)

組件是Vue應(yīng)用中的基本單位，用于構(gòu)建用戶界面。每個(gè)Vue組件都包含預(yù)定義選項(xiàng)的一個(gè)對(duì)象，其中大多數(shù)選項(xiàng)是函數(shù)，用于定義組件的行為：9L228資訊網(wǎng)——每日最新資訊28at.com

Vue.component('todo-item', {  props: ['todo'],  template: '<li>{{ todo.text }}</li>'})

你可以通過(guò)簡(jiǎn)單的方式在父組件中使用這個(gè)組件：9L228資訊網(wǎng)——每日最新資訊28at.com

<ol>  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item></ol>

3. 指令

Vue.js提供了一系列指令，用于將數(shù)據(jù)綁定到DOM上。最常用的指令包括v-bind、v-model、v-for等。9L228資訊網(wǎng)——每日最新資訊28at.com

• v-bind：動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，或一個(gè)組件 prop 到表達(dá)式。
• v-model：在表單輸入和應(yīng)用狀態(tài)之間創(chuàng)建雙向數(shù)據(jù)綁定。
• v-for：基于源數(shù)據(jù)多次渲染元素或模板塊。

4. Vue實(shí)例

每個(gè)Vue應(yīng)用都是通過(guò)構(gòu)造函數(shù)Vue創(chuàng)建一個(gè)新的Vue實(shí)例開始的：9L228資訊網(wǎng)——每日最新資訊28at.com

var vm = new Vue({  // 選項(xiàng)})

在實(shí)例化時(shí)存在一系列選項(xiàng)，包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等。9L228資訊網(wǎng)——每日最新資訊28at.com

三、Vue進(jìn)階

1. 計(jì)算屬性和偵聽器

計(jì)算屬性用于聲明式地描述一個(gè)數(shù)據(jù)依賴于其他數(shù)據(jù)。Vue會(huì)自動(dòng)追蹤依賴數(shù)據(jù)的變化，并且僅在相關(guān)依賴發(fā)生變化時(shí)才重新計(jì)算。9L228資訊網(wǎng)——每日最新資訊28at.com

computed: {  reversedMessage() {    return this.message.split('').reverse().join('')  }}

偵聽器允許你執(zhí)行代碼響應(yīng)于數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，偵聽器非常有用。9L228資訊網(wǎng)——每日最新資訊28at.com

watch: {  message(newVal, oldVal) {    console.log(`Message changed from ${oldVal} to ${newVal}`);  }}

2. 條件渲染和列表渲染

Vue提供了v-if、v-else-if、v-else等指令用于條件渲染，以及v-for指令用于列表渲染。9L228資訊網(wǎng)——每日最新資訊28at.com

<div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div><ul>  <li v-for="item in items">{{ item.text }}</li></ul>

3. 事件處理

Vue允許你使用v-on指令監(jiān)聽DOM事件，并在觸發(fā)時(shí)執(zhí)行一些JavaScript代碼。9L228資訊網(wǎng)——每日最新資訊28at.com

<button v-on:click="counter += 1">Add 1</button>

4. 表單輸入綁定

使用v-model指令可以實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。9L228資訊網(wǎng)——每日最新資訊28at.com

<input v-model="message">

四、Vue實(shí)例生命周期

每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時(shí)更新DOM等。同時(shí)在這個(gè)過(guò)程中也會(huì)調(diào)用一些生命周期鉤子，給予用戶機(jī)會(huì)在一些特定的時(shí)刻加入自己的代碼。9L228資訊網(wǎng)——每日最新資訊28at.com

• beforeCreate：在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)（data observer）和event/watcher事件配置之前被調(diào)用。
• created：在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步，實(shí)例已完成數(shù)據(jù)觀測(cè)、屬性和方法的運(yùn)算、watch/event事件回調(diào)。然而，掛載階段還沒(méi)開始，$el屬性目前尚不可用。
• beforeMount：在掛載開始之前被調(diào)用：相關(guān)的render函數(shù)首次被調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
• mounted：el被新創(chuàng)建的vm.el也在文檔內(nèi)。
• beforeUpdate：數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前。這里適合在更新之前訪問(wèn)現(xiàn)有的DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器。
• updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件DOM已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作。
• beforeDestroy：實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
• destroyed：Vue實(shí)例銷毀后調(diào)用。調(diào)用后，Vue實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

五、Vue路由與狀態(tài)管理

1. Vue Router

Vue Router是Vue.js官方的路由管理器。它和Vue.js核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。9L228資訊網(wǎng)——每日最新資訊28at.com

const router = new VueRouter({  routes: [    { path: '/foo', component: Foo },    { path: '/bar', component: Bar }  ]})const app = new Vue({  router}).$mount('#app')

2. Vuex

Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。9L228資訊網(wǎng)——每日最新資訊28at.com

const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  }})

六、Vue實(shí)踐

1. 創(chuàng)建Vue項(xiàng)目

使用Vue CLI可以快速搭建Vue開發(fā)環(huán)境。首先，你需要安裝Node.js和npm。然后，通過(guò)npm安裝Vue CLI：9L228資訊網(wǎng)——每日最新資訊28at.com

npm install -g @vue/cli

創(chuàng)建一個(gè)新的Vue項(xiàng)目：9L228資訊網(wǎng)——每日最新資訊28at.com

vue create my-project

進(jìn)入項(xiàng)目目錄，啟動(dòng)開發(fā)服務(wù)器：9L228資訊網(wǎng)——每日最新資訊28at.com

cd my-projectnpm run serve

2. 組件化開發(fā)

在Vue中，推薦將UI拆分為獨(dú)立的、可復(fù)用的組件。每個(gè)組件都應(yīng)該包含獨(dú)立的邏輯和樣式。9L228資訊網(wǎng)——每日最新資訊28at.com

<template>  <div class="todo-item">    {{ todo.text }}  </div></template><script>export default {  props: ['todo']}</script><style scoped>.todo-item {  font-size: 24px;  color: #42b983;}</style>

3. 父子組件通信

在Vue中，父子組件之間的通信是非常常見的。父組件可以通過(guò)props向子組件傳遞數(shù)據(jù)，子組件可以通過(guò)$emit觸發(fā)事件來(lái)向父組件發(fā)送消息。9L228資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-98561-0.htmlVue入門指南：從基礎(chǔ)到實(shí)踐

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： len() 函數(shù)妙用：十個(gè)增強(qiáng) Python 程序可讀性的實(shí)踐

下一篇： 一篇文章帶你了解 JavaScript Object 對(duì)象