寫在前面

學習Vue之前最好有前端三駕馬車的基礎【HTML+CSS+JavaScript】

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

筆者接項目的時候Vue零基礎，前端基礎也是除了div幾個標簽和一些常用的style就啥也不會了，以前前端基本都是靠復制粘貼的

(資料圖片)

所以學起來很痛苦，因此學習Vue之前最好有一定前端基礎，Vue編程在頁面布局設計上和HTML+CSS+JavaScript沒有特別明顯的差別

有些同學可能看了半天還學不會，大可不用擔心，筆者學到第三個月剛剛入門，還得靠量變產(chǎn)生質變，之前學到自閉的時候還向公司請了三天假在家休息

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

理由很簡單，同學們平時怎么漲經(jīng)驗的：面向csdn編程

寫一個簡單的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>

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

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

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

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

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

Q2：Vue項目的項目結構是什么

Vue.js項目的典型結構如下：

├── 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

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

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

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

<script setup></script>

App.vue

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

什么是Vue.js

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

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

它使用漸進式的方式去擴展，使得你可以使用盡量少的時候去掌握它，并逐步應用于需要更復雜的項目中。

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

Vue.js的特點包括易學易用、性能卓越、靈活性強、擴展性好、生態(tài)豐富等等。

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

Vue.js的基礎語法是什么？

Vue.js的基礎語法可以分為以下幾個方面：

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

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

v-bind

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

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

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

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

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

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

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

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

v-on

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

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

點擊我

在上面的例子中，v-on指令綁定了click事件到handleClick方法上。當按鈕被點擊時，handleClick方法會被調用。

我們還可以傳遞事件對象和自定義參數(shù)到事件處理函數(shù)中。例如，`v-on:click="handleClick("hello", $event)"`，代表使用handleClick方法處理click事件，傳入?yún)?shù) "hello" 和一個事件對象 $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方法上。當按鈕被點擊時，reverseMessage方法會被調用，反轉message中的文本。

v-model

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

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

{{ message }}

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

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

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

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

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

v-show

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

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

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

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

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

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

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

在上面的代碼中，我們使用v-show指令將一個div元素的顯示狀態(tài)綁定到了一個變量isVisible上。當用戶點擊按鈕時，toggleVisibility方法會被調用，isVisble的值會被切換，從而根據(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來判斷是否顯示一段文本：

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

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

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

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

在上面的例子中，當score變量的值大于等于90時，第一個div元素會被渲染，否則判斷score的值是否大于等于80，如果大于等于80則顯示第二個div元素，以此類推。如果以上條件都不成立，則顯示最后一個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的值來判斷文本內容應該顯示還是隱藏。當用戶點擊按鈕時，toggleVisibility方法會被調用，從而改變isVisible的值，決定文本內容顯示或隱藏。

v-for

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

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

  
{{ item }}

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

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

  
第 {{ index + 1 }} 項：{{ item }}

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

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

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

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

v-text

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

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

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

另外，如果我們要在HTML中輸出一個Vue.js表達式的值，也可以使用雙大括號的語法：

{{ message }}

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

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

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

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

在上面的代碼中，我們使用v-text指令和雙大括號語法分別將一個變量message的值輸出到div元素中。當message的值改變時，這個div元素的文本內容也會隨之改變。

v-html

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

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

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

需要注意的是，使用v-html指令會帶來一定的安全風險，因為它可以注入任意的HTML代碼。如果我們要輸出的HTML字符串來自用戶輸入或其他不受信任的來源，則需要對其進行特殊處理，以避免注入攻擊。

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

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

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

什么是Vue組件

Vue組件是一個Vue實例，它可以復用在不同的Vue實例中，提高代碼的可維護性、可重用性和可讀性。

Vue組件能夠將一些 HTML、CSS 和 JS 代碼封裝成一個獨立的、可重用的元素，并且提供了可配置的接口。

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

下面是一個簡單的Vue組件案例：

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

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