【Vue】vue基本模板語法

初階應用介紹

 發表於 2021-02-01  |  3 分鐘  |  512 個字

【Vue】vue基本模板語法

初階應用介紹

 發表於 2021-02-01  |  3 分鐘  |  512 個字

Vue.js是以資料狀態操作畫面，偏向MVVM軟體設計模式。

MVVM(Model View Viewmodel)

英文 Model View Viewmodel
中文 模型 視圖 資料聯繫器

  • [視圖]←綁定→[資料聯繫器]→←[模型]

MVC(Model View Controller)

英文 Model View Controller Database
中文 模型 視圖 控制器 資料庫

  • [視圖]→發送請求→[控制器]→[模型]→[資料庫]→回傳資料→[模型]→[控制器]→渲染→[視圖]

生命週期

英文 中文 說明
開始創建
beforeCreate 準備載入資料
數據觀測建立
created 載入資料 要載入ajax要在這階段之後
編譯模板
beforeMount 準備繪製元件
模板建立完成
mounted 繪製元件 要操作DOM元素要在這階段之後
資料變動
updated 更新資料時觸發
activated 有<keep-alive>時才會觸發
deactivated 有<keep-alive>時才會觸發
beforeDestroy 準備移除資料
移除觀測、子元件、監聽事件
destroyed 移除資料

開始使用Vue.js

  • 使用 element (簡化:el)綁定HTML上的DOM元素。

  • #app裡不能再建立#app。

  • 若有多個.app只會綁定一個。

1
2
3

var app = new Vue({
  el: "#app"
});

v-text

  • 使用 v-text 可將資料裡的"文字"帶入<標籤>。

  • 簡化寫法 {{}}。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// <-----html----->
#app
  p(v-text="a")
  //簡化:p {{a}}

// <-----js----->
var app = new Vue({
  el: "#app",
  data:{
    a: "蘋果"
  }
});

// <-----結果----->
#app
  p 蘋果

v-html

  • 使用 v-html 可將資料裡的HTML帶入<標籤>。

不建議在網頁上任意使用v-html，因為會容易遭受XSS攻擊，例如:輸入框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// <-----html----->
#app
  ul(v-html="a")

// <-----js----->
var app = new Vue({
  el:"#app",
  data:{
    a:"<li>蘋果</li>"
  }
});
// <-----結果----->
#app
  ul
    li 蘋果

v-model

  • 使用v-model可以產生雙向綁定，在修改值時會同時改變。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// <-----html----->
#app
  input(v-model="a")
  p {{a}}

// <-----js----->
var app = new Vue({
  el:"#app",
  data:{
    a:"蘋果"
  }
});

// <-----結果----->
//<input>一開始會顯示"蘋果"
//<p>一開始會顯示"蘋果"
//當<input>裡的文字被更動了，，<p>也會跟著改變

v-bind

  • 使用 v-bind 是用來綁定<標籤>上的屬性。

  • 簡化寫法 :。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// <-----html----->
#app
  img(v-bind:src="a" v-bind:class="b")
  //簡化:img(:src="a" v-bind:class="b")

// <-----js----->
var app = new Vue({
  el:"#app",
  data:{
    a:"images/picture.png",
    b:"img-fluid"
    //Bootstrap的語法
  }
});

// <-----結果----->
#app
  img(src="images/picture.png" class="img-fluid")

v-for

  • 使用 v-for 會以迴圈的方式列印出資料。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// <-----html----->
#app
  ul
    li(v-for="(item,key) in a") {{key+1}}{{item.name}}
    //key等於陣列[第幾項]

// <-----js----->
var app = new Vue({
  el:"#app",
  data:{
    a:[
      {name: "蘋果", amount: 100},
      {name: "香蕉", amount: 300}
    ]
  }
});

// <-----結果----->
#app
  ul
    li 1蘋果
    li 2香蕉

v-if

  • 使用 v-if 可判斷該<標籤>是否顯示。

  • v-if 與 v-show 的差異 :

名稱 v-if v-show
效果 DOM元素消失 display:none 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// <-----html----->
#app
  ul
    li(v-for="item in a" v-if="item.amount > 200") {{item.name}}
    //判斷陣列裡的[amount]大於200的才顯示

// <-----js----->
var app = new Vue({
  el: "#app",
  data:{
    a:[
      {name: "蘋果", amount: 100},
      {name: "香蕉", amount: 300}
    ]
  }
});

// <-----結果----->
#app
  ul
    li 香蕉

v-on

  • 使用 v-on 可增加使用者事件，例如滑鼠點擊、按下鍵盤等。

  • 簡化寫法 @ 。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// <-----html----->
#app
  button(v-on:click="add") 按鈕
  //簡化寫法
  //button(@click="add") 按鈕
  p {{price}}

// <-----js----->
var app = new Vue({
  el:"#app",
  data:{
    price: 25
  },
  methods:{
    add:function(){
      this.price = this.price + 5;
    }
  }
});

// <-----結果----->
//<p>一開始顯示25
//每次點擊"按鈕"時，25都+5

v-class動態切換效果

  • 使用 :class 可綁定<標籤>，判斷是否套用CSS樣式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// <-----html----->
#app
  button(@click="a=!a" :class="{'red':a}") 按鈕
  //:class="{'css樣式名稱':判斷式}"

// <-----css----->
.red
  background-color: red
  
// <-----js----->
var app = new Vue({
  el:"#app",
  data:{
    a: false
  }
});

// <-----結果----->
//當點擊的時候"按鈕"時會變紅色
vue 

其他相關