Vue.js基礎教程

文章鏈接：Vue.js基礎教程

開發工具準備：

1. 根據個人喜歡選擇IDE，我使用的是WebStorm，推薦使用Atom和VSCode；
2. 安裝git base和node.js；
3. 安裝vue-cli，命令npm i -g @vue/cli；

4. 新建vue-cli項目：

   1. 方法一：通過圖形界面進行安裝vue ui；
   2. 方法二：通過命令行安裝vue create project-name
5. 運行項目npm run serve，端口8080。

<!--more-->

雙向綁定v-model

雙向綁定大多用於表單事件，通過監聽使用者輸入的事件來更新內容。

現階段大部分工作在App.vue上，template與普通寫法一致，js寫法：

export default {
    name: 'app',
    data() {
        return {
            title: 'vue.js',
            myname: '請輸入名字'
        }
    }
}

去掉空白符.trim

直接在v-model後加上.trim即可。

<input type="text" v-model.trim="name" value="name">

懶加載.lazy

在離開input時才更新輸入的內容，在v-model後加上.lazy即可。

限定輸入數字.number

在v-model後加上.number即可。

遍歷v-for

遍歷有一個基本的模板：

<div id="app">
    <ul v-for="(item,index) in member" :key="index">
        <li>{{item}}</li>
    </ul>
</div>

組件component

在App.vue中引入components中的組件：

<template>
  <div id="app">
    <Card />
  </div>
</template>

<script>
  import Card from './components/Card'
  
  export default {
    components: {
      Card
    }
  }
</script>

數據傳遞props

<template>
    <div id="app">
        <Card :cardData="cardData"/>
    </div>
</template>

其中:cardData="cardData"是這個組件的核心，用於綁定屬性cardData。其他數據展示工作放在Card.vue組件中進行。

JS Result
EDIT ON
 <template>
    <div class="card_wall">
        <div class="card" v-for="item in cardData" :key="item.name">
            <div class="card_title">{{item.name}}</div>
            <div class="card_body">
                <p>生日：{{item.birthday}}</p>
                <p>E-mail：{{item.mail}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            cardData: {
                type: Array,
                required: true
            }
        }
    }
</script>

這裏解析一下<div class="card_wall"></div>包裹<div class="card"></div>主要是方便後期應用擴展，以及讓應用整體更穩定。

生命週期

我不喜歡用官網的生命流程圖來講解這個內容，使用文字表達更加讓思維清晰。

1. 初始化：設置數據監聽，編譯模板，掛載到DOM並在數據變化時更新DOM等；
2. 生命週期鉤子：其實就是一個過程處理，類似於服務站。

生命週期鉤子簡介

1. beforeCreate：實例初始化
2. created：實例建立完成（可以取得$data）
3. beforeMount：模板掛載之前（還沒有生成html）
4. mounted：模板掛載完成
5. beforeUpdate：如果data發生變化，觸發組件更新，重新渲染
6. updated：更新完成
7. beforeDestroy：實例銷燬之前（實例還可以使用）
8. destroyed：實例已銷燬（所有綁定被解除、所有事件監聽器被移除、所有子實例被移除）

生命週期鉤子用得最多的是mounted，主要用在調用屬性、方法的時候，

指令

v-once指令

第一次渲染完成後變爲靜態內容，其下的所有子元素都是這樣的效果。

v-pre指令

v-pre指令會讓指定元素被忽略。

v-cloak指令

v-cloak指令用於去除頁面渲染數據時出現閃現的情況，使用方法：

<template>
  <div id="app">
    <div v-cloak>${ item.title }</div>
  </div>
</template>

<style>
  [v-cloak] {
      display: none;
  }
</style>

v-html指令

v-html指令會把html標籤渲染成DOM顯示在頁面上。

v-html指令只能對可信任的用戶使用，否則容易受到XSS攻擊。

動畫

Vue動畫一般在真正需要使用的情況下才加入頁面，推薦在CSS中使用動畫。

加入漸變的時機

1. v-if條件渲染
2. v-show條件顯示
3. 動態組件
4. 組件的根節點

漸變的分類

1. v-enter定義進入漸變時開始的樣式。

   • 只存在組件插入前，組件插入後就移除。

2. v-enter-active定義進入漸變的過程效果，可以設定漸變過程的時間（duration）和速度曲線（easing curve）。

   • 在組件被插入前生效，在完成動畫時移除。

3. v-enter-to定義進入漸變後結束的樣式。

   • 在組件被插入後生效，同時v-enter被移除，並在完成進入漸變動畫時移除。

4. v-leave定義離開漸變時開始的樣式。

   • 在觸發組件離開漸變時生效，接着馬上移除。

5. v-leave-active定義離開漸變的過程效果，可以設定漸變過程的時間（duration）和速度曲線（easing curve）。

   • 在觸發組件離開漸變時生效，在完成動畫時移除。

6. v-leave-to定義離開漸變後結束的樣式。

   • 在觸發組件離開漸變時生效，同時v-enter被移除，並在完成離開漸變動畫時移除。

transition自定義名稱

<template>
  <div id="app">
    <div class="main">
      <button @click="change = !change">縮放控制器</button>
      <transition name="zoom">
        <div v-if="change" class="ant_man_style"></div>
      </transition>
    </div>
  </div>
</template>

.zoom-enter, .zoom-leave-to {
width: 0px;
height: 0px;
}
.zoom-enter-active, .zoom-leave-active {
transition: width 1s, height 1s;
}

animation

可以使用CSS中的animation動畫設計更爲華麗的效果。

.zoom-leave-active {
animation: special_effects 1.5s;
}

.zoom-enter-active {
animation: special_effects 1.5s reverse;
}

@keyframes special_effects {}

transition自定義動畫類別

除了在<transition>中設定name自定義前綴（屬性），還可以預設動畫類別。

• enter-class定義進入動畫時開始的樣式。
• enter-active-class定義進入動畫的過程效果。
• enter-to-class定義進入動畫後結束的樣式。
• leave-class定義離開動畫時開始的樣式。
• leave-active-class定義離開動畫的過程效果。
• leave-to-class定義離開動畫後結束的樣式。

以上六個自定義屬性優先級別高於一般漸變類別。

CSS動畫庫：Animation.css

JavaScript鉤子

<transition>還可以綁定JavaScriptHooks，除了單獨使用，也能結合CSS transition和animations一起使用。

• beforeEnter(el)在進入漸變或動畫前生效。
• enter(el,callback)在進入漸變或動畫的組件插入時生效。
• afterEnter(el)在進入漸變或動畫結束時生效。
• enterCanceled(el)在未完成漸變或動畫時取消。
• beforeLeave(el)在離開漸變或動畫前生效。
• leaveCancelled(el)在未完成漸變或動畫時取消。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled">
  <div v-if="change" class="ant_man_style"></div>
</transition>

在enter和leave中必須使用done，不然它們會同時生效，動畫也會瞬間完成。

設定初始載入時的漸變

如果想要設定一開始載入畫面時組件的漸變效果，可以通過設定appear屬性來實現。

• appear-class載入時開始的樣式。
• appear-to-class載入過程的樣式。
• appear-active-class載入結束時樣式。

<transition
        appear
        appear-class="show-appear-class"
        appear-to-class="show-appear-to-class"
        appear-active-class="show-appear-active-class">
</transition>

先在<transition>標籤內加入appear，接着類似自定義動畫可以給class name命名。

初始載入JavaScript Hooks

• beforeAppear載入前
• appear載入時
• afterAppear載入後
• appearCancelled取消載入（載入開始後）

<div id="app">
  <transition
    appear
    @before-appear="beforeAppear"
    @appear="appear"
    @after-appear="afterAppear"
    @appear-cancelled="appearCancelled">
    <div v-if="change" class="ant_man_style"></div>
  </transition>
</div>

key

對相同的標籤元素使用key進行區分。

漸變模式in-out和out-in

in-out模式

1. 新加入的元素做漸變進入。
2. 漸變進入結束後，原存在的元素再漸變離開。

out-in模式

1. 原存在的元素漸變離開。
2. 漸變離開結束後，新元素再漸變進入。

<transition mode="out-in"></transition>
<transition mode="in-out"></transition>

列表過渡

• <transition-group>會渲染出一個html標籤，預設是<span>，也可以選擇自定義tag爲其他標籤。
• 無法使用（漸變模式in-out和out-in），因爲不再是元素之間來回切換。
• 每個元素需要設定一個key值，不能重複。

列表亂數排序

<transition-group>能夠改變數組的排序，使用前需要先安裝shuffle

npm i --save lodash.shuffle

let shuffle = require('lodash.shuffle')

過濾器filter

filters串聯

filter可以同時串聯多個filter函數。

filters參數

$emit

1. 父組件可以使用props把數據傳遞給子組件。
2. 子組件可以使用$emit觸發父組件的自定義事件。