寫在前面

學(xué)習(xí)Vue之前最好有前端三駕馬車的基礎(chǔ)【HTML+CSS+JavaScript】

筆者接了一個(gè)從頭開發(fā)的Vue項(xiàng)目，由于公司急著要，沒有時(shí)間慢慢像在學(xué)校里學(xué)了，只能邊學(xué)邊做，現(xiàn)在項(xiàng)目雛形已經(jīng)做的差不多了，因此正好以自己的方式來寫筆記

筆者接項(xiàng)目的時(shí)候Vue零基礎(chǔ)，前端基礎(chǔ)也是除了div幾個(gè)標(biāo)簽和一些常用的style就啥也不會(huì)了，以前前端基本都是靠復(fù)制粘貼的

(資料圖片)

所以學(xué)起來很痛苦，因此學(xué)習(xí)Vue之前最好有一定前端基礎(chǔ)，Vue編程在頁面布局設(shè)計(jì)上和HTML+CSS+JavaScript沒有特別明顯的差別

有些同學(xué)可能看了半天還學(xué)不會(huì)，大可不用擔(dān)心，筆者學(xué)到第三個(gè)月剛剛?cè)腴T，還得靠量變產(chǎn)生質(zhì)變，之前學(xué)到自閉的時(shí)候還向公司請(qǐng)了三天假在家休息

看筆者其他博客同學(xué)們肯定也會(huì)奇怪，為什么筆者一直堅(jiān)持碎片化學(xué)習(xí)，系統(tǒng)學(xué)習(xí)不是更好

理由很簡(jiǎn)單，同學(xué)們平時(shí)怎么漲經(jīng)驗(yàn)的：面向csdn編程

寫一個(gè)簡(jiǎn)單的Vue入門程序

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Hello {{ message }}
<script type="text/javascript">var app = new Vue({el: "#app",data: {message: "World"}});</script>

在這個(gè)例子中，我們引用了Vue.js的CDN，然后定義了一個(gè)id為“app”的HTML元素。接著，在JavaScript中，我們定義了一個(gè)Vue實(shí)例，將它與HTML元素綁定起來，并定義了一個(gè)數(shù)據(jù)屬性message，這個(gè)屬性的初始值為“World”。然后，在HTML中使用雙括號(hào)綁定，將message顯示在

元素中。最后，網(wǎng)頁將顯示一行字："Hello World"。

Q1：這些代碼看不懂，或者看懂了不會(huì)舉一反三怎么辦

筆者剛接觸Vue的時(shí)候也看不懂，網(wǎng)上找了好些教程，基本上Vue入門都是這樣的案例，拿一個(gè)html，導(dǎo)入一下js文件，就可以教vue了，然后看了很多課但是vue項(xiàng)目往往并不是這樣，例如新建Vue項(xiàng)目，往往格式是這樣的

所以筆者根據(jù)自己的學(xué)習(xí)經(jīng)驗(yàn)直接從這里開始介紹，逐漸往回推送

Q2：Vue項(xiàng)目的項(xiàng)目結(jié)構(gòu)是什么

Vue.js項(xiàng)目的典型結(jié)構(gòu)如下：

├── node_modules├── public│   ├── favicon.ico│   └── index.html├── src│   ├── assets│   ├── components│   ├── router│   ├── services│   ├── store│   ├── views│   ├── App.vue│   └── main.js├── .gitignore├── babel.config.js├── package-lock.json├── package.json└── README.md

接下來，我們逐一了解每個(gè)文件夾及文件的含義。

### node_modules`node_modules`文件夾是存放項(xiàng)目的依賴和第三方庫的文件夾。在安裝完該項(xiàng)目的依賴庫后，該文件夾中會(huì)自動(dòng)生成相應(yīng)依賴庫的文件夾及文件。### public`public`文件夾主要是存放打包后的靜態(tài)資源，例如`index.html`、`favicon.ico`等文件。其中，`index.html`是整個(gè)項(xiàng)目的入口文件。`Vue.js`會(huì)在該文件中掛載根組件，并將整個(gè)應(yīng)用渲染到該文件中。### src`src`文件夾是存放項(xiàng)目源碼的文件夾，其中包含了項(xiàng)目的主要邏輯。該文件夾下包含了如下幾個(gè)子文件夾及文件：- assets：存放項(xiàng)目需要的靜態(tài)資源，如圖片、樣式表等；- components：存放項(xiàng)目中的組件，可自定義封裝不同的功能組件或公用組件；- router：存放路由配置文件，用于控制不同路徑下的頁面跳轉(zhuǎn)；- services：存放項(xiàng)目的接口請(qǐng)求邏輯；- store：存放`vuex`相關(guān)代碼，即管理應(yīng)用中組件之間共享的狀態(tài)；- views：存放視圖組件；- App.vue：根組件；- main.js：入口文件。### .gitignore`.gitignore`文件是`git`工具的忽略文件配置文件，用于指定哪些文件或文件夾不需要加入到版本控制系統(tǒng)中。該文件往往會(huì)指定一些構(gòu)建工具生成的文件、依賴庫文件等。### babel.config.js`babel.config.js`文件是`babel`工具的配置文件，用于指定`babel`如何轉(zhuǎn)換項(xiàng)目的代碼。該文件中指定了哪些`babel`插件和預(yù)設(shè)以及轉(zhuǎn)換后的代碼的輸出目標(biāo)等。### package-lock.json`package-lock.json`文件是自動(dòng)生成的`npm`依賴文件，其中保存了當(dāng)前項(xiàng)目的依賴庫列表以及依賴包的版本信息等。### package.json`package.json`文件也是自動(dòng)生成的`npm`文件，其中包含了項(xiàng)目的相關(guān)信息，如項(xiàng)目名稱、版本等。此外，還有諸如依賴庫、構(gòu)建命令、測(cè)試命令等相關(guān)信息。### README.md`README.md`文件是項(xiàng)目的說明文件，用于詳細(xì)介紹該項(xiàng)目的功能、安裝與使用方式、協(xié)作規(guī)范等。

Q3：HelloWorld項(xiàng)目在Vue項(xiàng)目中怎么實(shí)現(xiàn)TestComponent.vue

<script setup></script>

App.vue

<script setup>import TestComponent from "@/components/TestComponent.vue";</script>

什么是Vue.js

Vue.js是一種漸進(jìn)式JavaScript框架，用于構(gòu)建交互式用戶界面。Vue.js的設(shè)計(jì)目標(biāo)是通過盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)綁定和組合視圖組件。

Vue.js是一種輕量級(jí)的框架，通過提供數(shù)據(jù)和模板分離的方式以及組件化的代碼結(jié)構(gòu)，簡(jiǎn)化和優(yōu)化了Web開發(fā)。所以構(gòu)建模板組件的時(shí)候一般不寫數(shù)據(jù)

它使用漸進(jìn)式的方式去擴(kuò)展，使得你可以使用盡量少的時(shí)候去掌握它，并逐步應(yīng)用于需要更復(fù)雜的項(xiàng)目中。

Vue.js既可以作為一個(gè)獨(dú)立的庫使用，也可以用于簡(jiǎn)單的頁面。這種多樣化的使用方式使得Vue.js可以滿足不同規(guī)模和類型的項(xiàng)目需求。

Vue.js的特點(diǎn)包括易學(xué)易用、性能卓越、靈活性強(qiáng)、擴(kuò)展性好、生態(tài)豐富等等。

總之，Vue.js是一款功能強(qiáng)大、靈活性高、易于上手的JavaScript框架，可以通過其簡(jiǎn)潔的API和易于理解的文檔使Web開發(fā)人員輕松構(gòu)建高效、可維護(hù)、可擴(kuò)展的Web應(yīng)用程序。

Vue.js的基礎(chǔ)語法是什么？

Vue.js的基礎(chǔ)語法可以分為以下幾個(gè)方面：

數(shù)據(jù)綁定：Vue.js的核心特性之一就是數(shù)據(jù)綁定。Vue.js通過數(shù)據(jù)綁定來自動(dòng)更新視圖，并保持視圖和數(shù)據(jù)的同步。可以使用{{}}和v-bind指令在模板中綁定數(shù)據(jù)。指令：Vue.js提供了很多指令，用于操作DOM元素。常見的指令包括v-bind、v-if、v-for等。指令可以通過v-前綴添加到普通的HTML屬性中。計(jì)算屬性：計(jì)算屬性是由Vue.js計(jì)算出來的屬性，而不是手動(dòng)設(shè)置的。計(jì)算屬性可以接收其他屬性或響應(yīng)式數(shù)據(jù)的變化，計(jì)算并返回新的屬性值。事件處理器：Vue.js提供了v-on指令用于綁定事件處理器。事件處理器可以使用methods選項(xiàng)中定義的方法來處理。生命周期：Vue.js的組件生命周期包括創(chuàng)建、更新、銷毀等階段。在每個(gè)階段，Vue.js提供了不同的鉤子函數(shù)，可以用來監(jiān)聽和處理組件狀態(tài)變化。組件：在Vue.js中，組件是可復(fù)用的Vue實(shí)例。組件可以包含自己的視圖模板、數(shù)據(jù)、方法等，并可以嵌套在其他組件中使用。模板語法：Vue.js的模板語法支持JSX和Hyperscript?？梢允褂肑SX或Hyperscript來聲明Vue組件并編寫Vue模板。Vue中的常見指令有哪些v-bind：將數(shù)據(jù)綁定到HTML元素屬性上，可以簡(jiǎn)寫為“:”v-on：綁定事件，可以簡(jiǎn)寫為“@”【例如@click表示點(diǎn)擊事件，即點(diǎn)一下會(huì)發(fā)生什么】v-model：實(shí)現(xiàn)雙向數(shù)據(jù)綁定v-show：根據(jù)表達(dá)式的值，控制元素的顯示或隱藏【相當(dāng)于Java中的if】v-if / v-else-if / v-else：根據(jù)表達(dá)式的值，條件性地渲染元素，當(dāng)表達(dá)式為假時(shí)不渲染【相當(dāng)于Java中的if/else if/else】v-for：遍歷一個(gè)數(shù)組或?qū)ο?，生成相?yīng)的DOM元素【相當(dāng)于Java中的for循環(huán)，一個(gè)組件出現(xiàn)幾次，塞不同的數(shù)據(jù)進(jìn)去】v-text：將表達(dá)式的值作為元素的文本內(nèi)容，可以簡(jiǎn)寫為“{{ }}”v-html：將表達(dá)式的值作為HTML內(nèi)容輸出

總之，Vue的指令非常豐富，可以很靈活地實(shí)現(xiàn)各種數(shù)據(jù)和視圖之間的綁定關(guān)系。同時(shí)，Vue還支持自定義指令的開發(fā)，可以根據(jù)實(shí)際需求來擴(kuò)展和定制指令。

v-bind

v-bind是Vue.js中的一個(gè)指令，其作用是將數(shù)據(jù)綁定到HTML元素的屬性上。v-bind可以簡(jiǎn)寫為“:”。

例如，我們可以將背景顏色綁定到一個(gè)data中的變量color上：

這里的背景顏色會(huì)根據(jù)color變量的值而改變

在上面的例子中，v-bind指令將style屬性和一個(gè)JavaScript對(duì)象綁定在一起，這個(gè)JavaScript對(duì)象的屬性名是CSS樣式名，其屬性值是綁定的數(shù)據(jù)color變量。

我們還可以將屬性名簡(jiǎn)寫為不含有參數(shù)的指令名。例如，`v-bind:title="message"` 可以簡(jiǎn)寫為 `:title="message"`。

以下案例展示了v-bind的使用：

<script>export default {  data() {    return {      message: "歡迎來到我的Vue應(yīng)用",      count: 0    };  },  methods: {    increment() {      this.count++;    }  },  computed: {    isClickable() {      return this.count < 5;    }  }};</script>

在上面的代碼中，我們使用`v-bind:disabled`指令將按鈕的disable屬性綁定到了計(jì)算屬性isClickable，當(dāng)計(jì)數(shù)器值count大于等于5時(shí)，isClickable為false，按鈕被禁用。在點(diǎn)擊按鈕時(shí)，計(jì)數(shù)器值會(huì)增加，綁定計(jì)數(shù)器值的文本會(huì)進(jìn)行更新。

v-on

v-on是Vue.js中的一個(gè)指令，其作用是給HTML元素綁定事件。v-on可以簡(jiǎn)寫為“@”。

例如，我們可以給一個(gè)按鈕綁定click事件:

點(diǎn)擊我

在上面的例子中，v-on指令綁定了click事件到handleClick方法上。當(dāng)按鈕被點(diǎn)擊時(shí)，handleClick方法會(huì)被調(diào)用。

我們還可以傳遞事件對(duì)象和自定義參數(shù)到事件處理函數(shù)中。例如，`v-on:click="handleClick("hello", $event)"`，代表使用handleClick方法處理click事件，傳入?yún)?shù) "hello" 和一個(gè)事件對(duì)象 $event。

以下案例展示了v-on的使用：

<script>export default {  data() {    return {      message: "Hello Vue!"    };  },  methods: {    reverseMessage() {      this.message = this.message.split("").reverse().join("")    }  }};</script>

在上面的代碼中，我們使用`v-on:click`指令將按鈕的click事件綁定到了reverseMessage方法上。當(dāng)按鈕被點(diǎn)擊時(shí)，reverseMessage方法會(huì)被調(diào)用，反轉(zhuǎn)message中的文本。

v-model

v-model是Vue.js中的一個(gè)指令，其作用是雙向綁定表單元素和數(shù)據(jù)。

例如，我們可以使用v-model將input元素的value屬性和data中的變量message綁定在一起：

{{ message }}

在上面的例子中，當(dāng)input的值發(fā)生變化時(shí)，data中的message變量會(huì)自動(dòng)更新，同時(shí)p標(biāo)簽中的文本也會(huì)被更新。

v-model指令通常用于處理表單元素，例如input、select和textarea。它會(huì)自動(dòng)監(jiān)聽表單元素的input事件，并將最新的值同步到綁定的數(shù)據(jù)中，同時(shí)也會(huì)將綁定的數(shù)據(jù)同步到表單元素上。

以下案例展示了v-model的使用：

<script>export default {  data() {    return {      message: ""    };  }};</script>

在上面的代碼中，我們使用v-model將input元素的value屬性綁定到data中的變量message上。當(dāng)用戶在輸入框中輸入文字時(shí)，data中的message變量會(huì)自動(dòng)更新，同時(shí)p標(biāo)簽中的文本也會(huì)被更新。

v-show

v-show是Vue.js中的一個(gè)指令，其作用是根據(jù)表達(dá)式的值，在HTML元素之間切換顯示和隱藏。

例如，我們可以使用v-show根據(jù)一個(gè)變量isShow的值來顯示或隱藏一段文本：

  這是一個(gè)需要根據(jù)表達(dá)式值來判斷是否顯示的文本。
點(diǎn)擊我切換顯示狀態(tài)

在上面的例子中，v-show指令將div元素的顯示狀態(tài)綁定到了一個(gè)變量isShow上。當(dāng)isShow的值為true時(shí)，這個(gè)div元素會(huì)被顯示，當(dāng)isShow的值為false時(shí)，這個(gè)div元素會(huì)被隱藏。

我們還可以通過方法來改變isShow的值，例如定義一個(gè)toggleShow方法來切換isShow的值。

以下案例展示了v-show的使用：

<script>export default {  data() {    return {      isVisible: true    };  },  methods: {    toggleVisibility() {      this.isVisible = !this.isVisible;    }  }};</script>

在上面的代碼中，我們使用v-show指令將一個(gè)div元素的顯示狀態(tài)綁定到了一個(gè)變量isVisible上。當(dāng)用戶點(diǎn)擊按鈕時(shí)，toggleVisibility方法會(huì)被調(diào)用，isVisble的值會(huì)被切換，從而根據(jù)isVisible的值來控制div元素的顯示和隱藏狀態(tài)。

v-if / v-else-if / v-else

v-if / v-else-if / v-else 是Vue.js中的條件渲染指令，用來根據(jù)條件顯示或隱藏HTML元素。

v-if指令用來判斷條件是否成立，如果條件為true，則渲染元素，否則不渲染。

例如，我們可以使用v-if來判斷是否顯示一段文本：

這是一個(gè)需要根據(jù)條件是否顯示的文本。

在上面的例子中，v-if指令將這個(gè)div元素的渲染狀態(tài)綁定到了一個(gè)變量isShow上，如果isShow的值為true，則這個(gè)div元素會(huì)被渲染，否則不會(huì)渲染。

我們還可以使用v-else-if和v-else來實(shí)現(xiàn)條件分支，例如：

優(yōu)秀
良好
合格
不及格

在上面的例子中，當(dāng)score變量的值大于等于90時(shí)，第一個(gè)div元素會(huì)被渲染，否則判斷score的值是否大于等于80，如果大于等于80則顯示第二個(gè)div元素，以此類推。如果以上條件都不成立，則顯示最后一個(gè)div元素。

以下案例展示了v-if / v-else-if / v-else的使用：

<script>export default {  data() {    return {      isVisible: true    };  },  methods: {    toggleVisibility() {      this.isVisible = !this.isVisible;    }  }};</script>

在上面的代碼中，我們使用v-if / v-else指令來根據(jù)isVisible的值來判斷文本內(nèi)容應(yīng)該顯示還是隱藏。當(dāng)用戶點(diǎn)擊按鈕時(shí)，toggleVisibility方法會(huì)被調(diào)用，從而改變isVisible的值，決定文本內(nèi)容顯示或隱藏。

v-for

v-for是Vue.js中的一個(gè)指令，其作用是根據(jù)一組數(shù)據(jù)循環(huán)渲染HTML元素。

例如，我們可以使用v-for指令循環(huán)渲染一個(gè)列表：

  
{{ item }}

在上面的例子中，v-for指令根據(jù)一個(gè)名為list的數(shù)組，循環(huán)渲染li元素。循環(huán)過程中，每次迭代都會(huì)將list數(shù)組中的元素賦值給item變量，然后渲染li元素，最終生成一個(gè)包含所有數(shù)組元素的列表。

我們還可以在v-for指令中使用索引變量：

  
第 {{ index + 1 }} 項(xiàng)：{{ item }}

在上面的例子中，我們使用了一個(gè)索引變量index，它代表了list數(shù)組中當(dāng)前元素的下標(biāo)，然后使用index來輸出當(dāng)前項(xiàng)的序號(hào)。

以下案例展示了v-for的使用：

<script>export default {  data() {    return {      fruits: [        { name: "蘋果", price: 5 },        { name: "香蕉", price: 3 },        { name: "西瓜", price: 10 }      ]    };  }};</script>

在上面的代碼中，我們使用v-for指令循環(huán)渲染li元素，并使用索引變量index來輸出當(dāng)前項(xiàng)的序號(hào)。注意，在使用v-for指令時(shí)需要添加:key屬性，以便Vue.js能夠跟蹤數(shù)據(jù)項(xiàng)的變化。

v-text

v-text是Vue.js中的一個(gè)指令，其作用是將元素的textContent屬性與數(shù)據(jù)的值綁定在一起。

例如，我們可以使用v-text指令將一個(gè)變量的值顯示在HTML中：

在上面的例子中，v-text指令將這個(gè)div元素的textContent屬性綁定到了一個(gè)變量message上，當(dāng)message的值改變時(shí)，這個(gè)div元素的文本內(nèi)容也會(huì)相應(yīng)地發(fā)生改變。

另外，如果我們要在HTML中輸出一個(gè)Vue.js表達(dá)式的值，也可以使用雙大括號(hào)的語法：

{{ message }}

在上面的例子中，雙大括號(hào)語法將這個(gè)div元素的textContent屬性綁定到了一個(gè)表達(dá)式message上，與v-text指令的效果是一樣的。

需要注意的是，雙大括號(hào)語法并不會(huì)替換元素的innerHTML，而是替換textContent。如果我們需要在元素中包含HTML標(biāo)簽，則需要使用v-html指令。

以下案例展示了v-text的使用：

<script>export default {  data() {    return {      message: "Hello, Vue!"    };  }};</script>

在上面的代碼中，我們使用v-text指令和雙大括號(hào)語法分別將一個(gè)變量message的值輸出到div元素中。當(dāng)message的值改變時(shí)，這個(gè)div元素的文本內(nèi)容也會(huì)隨之改變。

v-html

v-html是Vue.js中的一個(gè)指令，其作用是將元素的innerHTML屬性與數(shù)據(jù)的值綁定在一起。

例如，我們可以使用v-html指令將一個(gè)變量的值作為HTML代碼輸出到HTML中：

在上面的例子中，v-html指令將這個(gè)div元素的innerHTML屬性綁定到了一個(gè)變量message上，當(dāng)message的值改變時(shí)，這個(gè)div元素的HTML內(nèi)容也會(huì)相應(yīng)地發(fā)生改變。

需要注意的是，使用v-html指令會(huì)帶來一定的安全風(fēng)險(xiǎn)，因?yàn)樗梢宰⑷肴我獾腍TML代碼。如果我們要輸出的HTML字符串來自用戶輸入或其他不受信任的來源，則需要對(duì)其進(jìn)行特殊處理，以避免注入攻擊。

以下案例展示了v-html的使用：

<script>export default {  data() {    return {      message: "Hello, Vue.js!"    };  }};</script>

在上面的代碼中，我們使用v-html指令將一個(gè)包含HTML標(biāo)簽的字符串輸出到div元素中，結(jié)果會(huì)被解析為粗體樣式的文本。

什么是Vue組件

Vue組件是一個(gè)Vue實(shí)例，它可以復(fù)用在不同的Vue實(shí)例中，提高代碼的可維護(hù)性、可重用性和可讀性。

Vue組件能夠?qū)⒁恍?HTML、CSS 和 JS 代碼封裝成一個(gè)獨(dú)立的、可重用的元素，并且提供了可配置的接口。

Vue組件可以通過 `.vue` 單文件組件進(jìn)行創(chuàng)建。

下面是一個(gè)簡(jiǎn)單的Vue組件案例：

<script>export default {  name: "counter",  props: {    initialValue: {      type: Number,      default: 0    }  },  data() {    return { count: this.initialValue }  },  methods: {    increment() {      this.count += 1    }  }}</script>

這個(gè)案例中，定義了一個(gè)名為 `counter` 的Vue組件，它有一個(gè)初始值為0的計(jì)數(shù)器，每次點(diǎn)擊按鈕可以對(duì)計(jì)數(shù)器進(jìn)行加1操作。這個(gè)組件通過 `