文末抽書

創建 Vue 應用

vue的安裝有多種方式，本文只討論基礎知識，其他安裝方式請自行查閱官網

https://v3.cn.vuejs.org/guide/installation.html

本文使用CDN，

創建一個名為的檔案夾 vue3-base
index.html 在“vue3-base”里面
app.js 在“vue3-base”里面

創建 HTML 檔案

創建應用程式檔案夾和檔案后，打開index.html檔案并添加以下 HTML 代碼：

復制

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>使用Vue3學習Vue的基礎知識</title>
</head>
<body>
    <div id="app"></div>

    <script src="./app.js"></script>
</body>
</html>

代碼中有三行需要注意：

<script src="https://unpkg.com/vue@next"></script>- 使用CDN方式，引入最新版的Vue，
<div id="app"></div>- div代表應用程式，您可以使用此 div 和app.
<script src="./app.js"></script>- 引入app.js檔案，本檔案主要用來撰寫Vue代碼，

創建 JavaScript 代碼

這一步主要是在app.js中撰寫代碼，用來創建一個Vue程式，

const app = Vue.createApp({
    data() {
        return { 
            course: '使用Vue3學習Vue的基礎知識'
        }
    }
})

app.mount('#app');

上面的代碼，使用Vue.createApp創建了一個新的 Vue 實體，在創建 Vue 實體時，您還傳遞了一個“data”物件，允許您配置應用程式，例如：定義一個course，值為’使用Vue3學習Vue的基礎知識‘，然后就可以在Html中使用course變數，

createApp之后，程式還沒有掛在到DOM中，需要使用mount函式來掛載，這里是直接掛載到上面的id為app的div上

更新 index.html 檔案

現在我們已經成功創建了一個Vue程式，在html中，可以直接訪問course屬性，在Vue中是使用{{}}來訪問變數，我們在Html中添加訪問的代碼

現在您已經創建了一個 Vue 應用程式，您可以訪問該course屬性，讓我們更改index.html檔案以顯示“ Intro to Vue with Vue 3 ”，在#appdiv中寫入如下代碼：

復制

<div id="app">
        <h1>{{ course }}</h1>
</div>

測驗應用程式

在瀏覽器中打開index.html檔案，應該看到以下頁面：

此時，嘗試洗掉該app.mount('#app')行，然后嘗試訪問course. 你會有驚喜！

串列渲染

Vue 中使用v-for指令遍歷陣列，該v-for指令的形式為tag in tags. 舉個例子總是更容易理解，看下面的代碼：

const app = Vue.createApp({
    data() {
        return { 
            course: '使用Vue3學習Vue的基礎知識',
            description: '這是一篇關于vue基礎知識的文章',
            price: '免費閱讀',
            tags: ['Vue', 'Front-end', 'JavaScript']
        }
    }
})

app.mount('#app');

復制

<ul>
    <li v-for="tag in tags">
        {{ tag }}
    </li>
</ul>

上面的代碼回圈遍歷“tags”陣列并在頁面上呈現每個標簽，tags代表來自 Vue 應用程式的陣列，而tag是陣列的一個單獨元素，

瀏覽器打開index.html檔案，會看到下面的效果

截圖 2021-03-29 at 07.49.27.png

key屬性

當使用v-for遍歷陣列的時候，需要給每個DOM元素添加上唯一的key，通常key是元素的id，

通過提供 key 屬性，可以讓 Vue 在應用程式中更新時跟蹤節點的身份，因此，Vue 可以重用和重新排序現有元素，除此之外，它還提高了應用程式的性能，（備注：這里主要是diff演算法用的到）

回到前面的示例，您可以修改代碼以包含該index欄位，“索引”欄位表示元素在陣列中的位置，

<ul>
    <li v-for="(tag, index) in tags" :key="index">
        {{ tag }}
    </li>
</ul>

但是，如果有一組物件，例如：

tags: 
[
    { id: 1, name: 'Vue' },
    { id: 2, name: 'Front-end' },
    { id: 3, name: 'JavaScript' },
 ]

您可以提供物件的 id 作為鍵，回圈如下所示：

<ul>
    <li v-for="tag in tags" :key="tag.id">
        {{ tag }}
    </li>
</ul>

:key ->:key是的簡寫v-bind:key，用于將專案的 id 系結到“key”屬性，也就是說，每個專案都有一個唯一的“鍵”，您在:key欄位中指定，在這個例子中，每個標簽都有它的 id 作為鍵，

條件渲染

當根據條件在頁面上顯示元素，也就是說，使用 if 陳述句來決定是否呈現元素，或者根據條件渲染它，

一個例子是 -如果評分超過 4 星，則顯示所有編程課程，為此，您可以使用該v-if指令，該指令僅在運算式回傳真值時呈現塊，但是，廢話不多說，讓我們看一個例子！

const app = Vue.createApp({
    data() {
        return {
            course: '使用Vue3學習Vue的基礎知識',
            description: '這是一篇關于vue基礎知識的文章',
            price: '免費閱讀',
            available: true,
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    }
})
app.mount('#app');

請注意名為“可用”的新欄位，“可用”欄位設定為 true，但是，您可以不斷在“true”和“false”之間更改它以查看條件渲染的作業原理，

復制

<p v-if="available">當前course可以獲取</p>
<p v-else>當前course不可以獲取</p>

上面的代碼根據available顯示是否可以獲取課程！如果available是true. 否則會顯示當前course不可以獲取！.

v-i會根據運算式的回傳值，true和false，來判斷當前元素是否顯示，

處理事件

在 Vue 中，可以使用v-on指令來監聽 DOM 事件并在它們被觸發時運行一段代碼，該v-on指令也有一個速記值，即符號“@”，

例如，可以按如下方式監聽按鈕上的點擊事件：

<button @click="doSomething()">Do something</button>

當有人單擊按鈕時，Vue 會觸發您指定的方法 -doSomething在這種情況下，當然也可以直接用代碼替換方法，例如，可以增加一個變數 - @click="sum = sum + 100"，

回到課程示例：

const app = Vue.createApp({
    data() {
        return {
            course: '使用Vue3學習Vue的基礎知識',
            description: '這是一篇關于vue基礎知識的文章',
            price: '免費閱讀',
            available: true,
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    },
    methods: {
        purchase() {
            console.log('Course 已經獲取!');
        }
    }
})

app.mount('#app');

可以看到，現在methods在 Vue 實體上有了一個欄位，此欄位允許您創建方法并在應用程式中使用它們，

在這種情況下，有一個purchase方法可以在每次呼叫時將文本輸出到控制臺，當然，這是一個基本的例子，但是，可以創建一個真正處理購買課程的函式！

要“進行獲取”，您必須在 HTML 代碼中添加以下行：

<button @click="purchase">立即獲取</button>

按鈕監聽點擊事件，當按鈕被點擊時，呼叫函式purchase，下圖說明了單擊按鈕時發生的情況：

屬性系結

const app = Vue.createApp({
    data() {
        return {
            course: '使用Vue3學習Vue的基礎知識',
            description: '這是一篇關于vue基礎知識的文章',
            imgURL: 'https://i.csdn.net/#/user-center/profile',
            imgDescription: '這是一篇關于vue基礎知識的文章的封面圖片',
            price: '免費閱讀',
            available: true,
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    },
    methods: {
        purchase() {
            console.log('Course 已經獲取!');
        }
    }
})

增加了：

圖片地址
圖片說明

同時在代碼中添加使用的代碼：

<img :src="imgURL" :alt="imgDescription" width="500" height="350">

這里我們使用了v-bind指令，將圖片地址和圖片說明分別給了src和alt，這里：是v-bind的簡寫，v-bind指令允許開發人員將屬性動態系結到運算式，通俗地說，它使我們能夠使用動態值而不是硬編碼值，

<img :src="imgURL" :alt="imgDescription" width="500" height="350">

可以使用v-bind如下方式重寫：

<img v-bind:src="imgURL" v-bind:alt="imgDescription" width="500" height="350">

感可以更新 Vue 實體中的影像 URL 和描述，并且 HTML 也會自動更新！您可以同樣添加“href”屬性，并從 Vue 實體中獲取 URL，作為練習，試一試吧！

如果您運行該應用程式，您可以看到正在顯示的影像！圖片鏈接是一樣的，唯一的區別是我使用我的域來屏蔽那個長 URL，如果你去 catalins.tech/img，你會看到它是同一張圖片！

計算屬性

Vue 的另一個有用的特性是計算屬性，使用計算屬性，可以操作資料并在 Vue 應用程式中復用結果，

使用與課程相同的示例，假設您想確保您的影像始終具有描述，您可以使用計算屬性來執行此操作，如下所示：

復制

const app = Vue.createApp({
    data() {
        return {
             course: '使用Vue3學習Vue的基礎知識',
            description: '這是一篇關于vue基礎知識的文章',
            imgURL: 'https://i.csdn.net/#/user-center/profile',
            imgDescription: '這是一篇關于vue基礎知識的文章的封面圖片',
            price: '免費閱讀',
            available: true,
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    },
    computed: {
        hasImageDescription() {
            return this.imgDescription.length > 0 ? this.imgDescription : 這是自動生成的圖片描述'
        }
    }
})

這里我們在computed中定義了一個新的hasImageDescription方法，這個方法主要是檢查是否有圖圖片描述，如果有則直接回傳，否則回傳新的值，

下面我們只需要在html中使用這個方法即可！

<img v-bind:src="imgURL" v-bind:alt="hasImageDescription" width="500" height="350">

您不使用屬性imgDescription，而是使用計算屬性hasImageDescription，

請注意：通過改變計算屬性中的現有資料很容易在應用程式中引入錯誤，您應該將這些計算屬性用于表示層，而不是用于更改現有資料（也就是說最好不要修改data中變數），

方法

盡管vue支持在html中撰寫和運行JS運算式，但是我勸你最好不要這么做！最好的方式是將代碼邏輯提取到一個單獨的函式中去，并且在需要該代碼的時候復用即可！

方法與計算屬性該怎么選

根據經驗，當您想要改變現有資料時，最好使用方法，另一方面，最好為表示層使用計算屬性，

組件和props

Vue 應用程式被拆分為組件，這些組件是應用程式的各個部分，例如，您的應用程式中可能有以下組件：

標題
導航
內容卡
頁腳

還有很多，此外，一個組件中可能嵌套了其他組件，我們可以將他們視為“父母”和“孩子”，換句話說，組件是應用程式的支柱，

要創建 Vue 組件，請進入專案的根檔案夾并執行以下命令：

mkdir components
touch components/CourseCard.js

這兩個命令創建一個components檔案夾和一個CourseCard組件，你也可以手動創建，

下一步是創建組件，可以通過呼叫Vue 實體component上的方法來完成app：

app.component('coursedisplay', {

})

第一個引數是組件名稱，在本例中為coursedisplay，第二個引數是一個帶有配置細節的物件，

現在，只需從app.js檔案中復制所有內容并將其添加到配置物件中，新組件應如下所示：

app.component('coursedisplay', {
    data() {
        return {
            course: '使用Vue3學習Vue的基礎知識',
            description: '這是一篇關于vue基礎知識的文章',
            imgURL: 'https://img-blog.csdnimg.cn/c197fb6f26c2423da1e5ed2eab8a6470.png',
            imgDescription: '這是一篇關于vue基礎知識的文章的封面圖片',
            price: '免費閱讀',
            available: true,
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    },
    computed: {
        hasImageDescription() {
            return this.imgDescription.length > 0 ? this.imgDescription : 這是自動生成的圖片描述
        }
    },
    methods: {
        purchase() {
            console.log('Course 已經獲取!');
        }
    },
    template: 
    /*html*/
    `
        <img v-bind:src="imgURL" v-bind:alt="hasImageDescription" width="500" height="350">
        <h1>{{ course }}</h1>
        <p>{{ description }}</p>
        <p>{{ price }}</p>
        <button @click="available = !available">立即獲取</button>
        <ul>
            <li v-for="tag in tags" :key="tag.id">
                {{ tag.name }}
            </li>
        </ul>
        <p v-if="available">可以獲取</p>
        <p v-else>不可以獲取</p>
    `
})

現在課程細節被封裝在一個組件中，而不是坐在主應用程式檔案中，但是，要使應用程式再次運行，您需要進行一些其他修改，進入該main.app檔案，修改如下：

const app = Vue.createApp({
    data() {
        return {
            allCourses: 0
        }
    }
})

另外，轉到index.html并修改body如下：

    <div id="app">
        <coursedisplay></coursedisplay>
    </div>

    <script src="./app.js"></script>
    <script src="./components/CourseCard.js"></script>

    <script>
        const mountedApp = app.mount('#app');
    </script>

這里會發生什么？

首先，在此行中匯入了組件：

其次，在這一行中使用了它：

<coursedisplay></coursedisplay>

第三，現在將應用掛載到 HTML 檔案中，而不是“main.js”：

const mountedApp = app.mount('#app');

Props

Props是屬性的簡稱，它允許組件在它們之間進行通信，每個組件都有特定的用途，但有時它需要訪問其范圍之外的資料，

讓我們修改現有的應用程式以接受一個名為的屬性paid，這個道具的目的是表明課程是付費的還是免費的，你可以這樣做：

props: {
    paid: {
        type: Boolean
    }
},

每當創建組件時，都可以指定它接受的prop，此外，可以指定prop的型別以及是否需要，在這個例子中，prop 不是必需的，但您可以通過在型別 - 后添加一行來使其成為必需的required: true，

通常，像 Vue 這樣的框架都有內置的驗證，也就是說，它確保傳遞的道具具有正確的型別，

在繼續之前，需要進入app.js檔案并回傳paid屬性，

const app = Vue.createApp({
    data() {
        return {
            allCourses: 1,
            paid: true
        }
    }
})

默認情況下，所有課程都是付費的，但是，可以默認將它們全部設定為“免費”，并且僅將高級課程設定為“付費”，

進一步，computed在CourseCard組件的屬性中添加以下方法：

premium() {
    return this.paid
 }

<coursedisplay :paid="paid"></coursedisplay>

現在需要進入index.html檔案并添加上面的代碼行，在這一行中，您傳遞了paidprop，以便您可以在組件中使用它，

最后一步是利用 prop 并基于它渲染資料，下面的代碼片段來自“課程”組件的模板，

<div v-if="premium()">
    <p v-if="available">可以獲取</p>
    <p v-else>不可以獲取</p>
    <button @click="available = !available">立即獲取</button>
</div>

如果paidprop 設定為 true （如果課程是付費的），它會呈現允許用戶購買課程的附加資訊，另一方面，如果課程是免費的，則資訊是“隱藏的”，

完整原始碼

index.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <title>使用Vue3學習Vue的基礎知識</title>
  </head>
  <body>
    <div id="app">
      <coursedisplay :paid="paid"></coursedisplay>
    </div>

    <script src="./app.js"></script>
    <script src="./components/CourseCard.js"></script>

    <script>
      const mountedApp = app.mount("#app");
    </script>
  </body>
</html>

app.js

const app = Vue.createApp({
    data() {
        return {
            allCourses: 0,
            paid: false
        }
    }
})

components/CourseCard.js

app.component('coursedisplay', {
    props: {
        paid: {
            type: Boolean
        }
    },
    data() {
        return {
            course: '使用Vue3學習Vue的基礎知識',
            description: '這是一篇關于vue基礎知識的文章',
            imgURL: 'https://img-blog.csdnimg.cn/c197fb6f26c2423da1e5ed2eab8a6470.png',
            imgDescription: '這是一篇關于vue基礎知識的文章的封面圖片',
            price: '免費閱讀',
            available: true,
            
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    },
    computed: {
        hasImageDescription() {
            return this.imgDescription.length > 0 ? this.imgDescription : 這是自動生成的圖片描述
        }
    },
    methods: {
        purchase() {
            console.log('Course 已經獲取!');
        },
        premium() {
            return this.paid
         }
    },
    template: 
    /*html*/
    `
        <img v-bind:src="imgURL" v-bind:alt="hasImageDescription" width="500" height="350">
        <h1>{{ course }}</h1>
        <p>{{ description }}</p>
        <p>{{ price }}</p>
        <ul>
            <li v-for="tag in tags" :key="tag.id">
                {{ tag.name }}
            </li>
        </ul>
        <div v-if="premium()">
            <p v-if="available">可以獲取</p>
            <p v-else>不可以獲取</p>
            <button @click="available = !available">立即獲取</button>
        </div>
    `
})

送書

《Vue.js全家桶零基礎入門到進階專案實戰》

簡介

1.技術全面、完整、系統—對標企業專案技術堆疊
2.講解詳細、通俗易懂——分析循序漸進且邏輯強
3.有學習討論交流群——快速成為前端工程師

內容

本書貫穿入門準備實操、基礎核心案例、中級進階實戰、綜合進階專案進行講解，循序漸進、環環相扣，通俗易懂，并分析為什么這樣使用，讓你知其所以然，包含的主要技術：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、攔截器、組件通信、跨域問題、上線部署等，
本書適合有 HTML、CSS、JavaScript 基礎的 Vue.js 零基礎小白、前端開發人員、后端開發人員，同時，也適合以下人員閱讀：在校生，需要掌握流行的新技術，做到與職場同步；在職人員，作業中需要學習使用Vue；有基礎學員，需要系統、全面、高效使用 Vue 技術，

購買鏈接

京東自營購買鏈接
https://item.jd.com/13441784.html
當當自營購買鏈接
http://product.dangdang.com/29303081.html
請添加圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/398701.html

標籤：其他

上一篇：html&&css

下一篇：Vue專案的打包方式（生成dist檔案）

【文內送Vue實戰書籍】使用Vue3學習Vue的基礎知識（HTML JS CSS 演算法 藍橋）