Vue - 基本概念

本篇主要紀錄學習 Vue 的基本觀念，將比較重要的學習點紀錄起來，可以搭配 Vue 官方的文件一起

基本觀念：MVVM

認識Vue 之前，要先知道 Vue 是屬於 MVVM 的架構，著重在於 MVVM （Model–view–viewmodel）的 VM (ViewModel)

透過 wiki 的圖來了解一下：wiki

Model: 資料部分
View: 畫面部分
ViewModel: 串起資料與畫面的橋樑

Vue 擔任的角色就是「串起資料與畫面的橋樑 ViewModel 」

我們對應一下程式碼比較有感覺：

View : 下方 html 的部分
Model : 下方 Js 中 message 的部分
ViewModel : Vue 將資料與畫面的部分綁起來

載入 CDN

將下方官網提供的 CDN 連結放進程式中的<head> 之間

1	<script src="https://cdn.jsdelivr.net/npm/vue"> </script>

Hello Vue

學習每個程式都要透過 Hello World 來了解一下 :
html:

1
2
3

<div id="app">
  {{ message }}
</div>

js:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})

output:

1	Hello World

這樣就已經完成基本 Vue 的應用了，來看一下是什麼意思吧！

el: 指定掛載的元素
data: 綁定的資料來源
其中在若要將資料呈現在前端就在程式碼中加入 {{ }} 裡面填入，畫面上就會顯示所指定的資料．

條件渲染

v-if

v-if 可以單獨使用或是搭配 v-else-if v-else一起使用，若條件成立就會顯示該元素，且只有成立的條件會渲染，我們直接看例子：

語法：
1
v-if="判斷式"
v-if 單獨使用：
1
<span v-if="isBoy">Hi!Boy!</span>

v-if 搭配 v-else-if v-else：

1
2
3

<span v-if="type === 'A'">Hi!A!</span>
<span v-else-if="type === 'B'">Hi!B!</span>
<span v-else>Not A or B</span>

v-show

與 v-if 相似，但差別在於不管如何都會留在 DOM 中，只是利用 CSS 屬性中的 display

1	<span v-show="show">Hi!</span>

V-if & v-show

差別：

v-if : 直接新增/刪除 DOM元素
v-show : display:none與移除 display

列表渲染

v-for

語法：
1
v-for="(key,index) in list"

HTML:

<div id="app">
    <ul>
      <li v-for="(item,index) in list">
      {{ index +1 }} - {{ item.name }} 是 {{ item.age}} 歲
      </li>
    </ul>
</div>

Vue:

var app = new Vue({
  el: '#app',
  data :{
    list:[
        {
            name:'Bob',
            age:20
        },
        {
            name:'Tony',
            age:40         
        }   
    ]
  }

結果:

事件處理

監聽事件 v-on

以監聽點擊事件為例：v-on:click

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p> clicked {{ counter }} times.</p>
</div>

也可以用＠縮寫代替v-on:

<div id="example-1">
  <button @click="counter += 1">Add 1</button>
  <p> clicked {{ counter }} times.</p>
</div>

事件修飾符

在寫網頁時經常會使用preventDefault()、stopPropagation() Vue 有提供多個事件修飾符：

stop- event.stopPropagation()
prevent - event.preventDefault()
capture
self
once

passive
以常用的

1	<a href="#" v-on:click.stop="doFun">連結</a>

表单输入绑定

v-model

看標題就會想到跟表單有關，在 Vue 裡想綁定資料在 <input>、<textarea>、<select>中，就可以用v-model 來實現，

特別要注意的是：v-model 實現了「資料雙向綁定」，「資料雙向綁定」就是使用者在前端 input 裡輸入值，可以直接修改 vue 中資料來源 data 內容

看個例子，當使用者在 input 裡可以直接修改資料來源message 的內容:

1 2	<input v-model="message" > <p>Message is: {{ message }}</p>

屬性绑定

v-bind

語法：

1 2	<div v-bind:class="divClass"></div> <img v-bind:src="imageSrc">

也可以透過：縮寫 v-bind:

1 2	<div :class="divClass"></div> <img :src="imageSrc">

模版語法

v-once

v-once 只會表達「一次」，若更改資料來源，是不會重新渲染的
1
<span v-once>長官留言: {{ message }}</span>

v-html

v-html 可依 html 格式呈現於畫面上
HTML:

1
2
3

<div id="app">
  <div v-html="message"></div>
</div>

Vue:

var app = new Vue({
  el: '#app',
  data :{
    message:'<b>Hi~ Vue</b>'
  }

參考：
Vue 官方
 Alex 宅幹嘛

tags: `Vue`

Tags: Vue

← Node.js | FireBase Node.js | fashe購物網站 →