第 1 篇:Vue.js 很高興認識你

削微寒發表於2020-10-30

作者:HelloGitHub——追夢人物

Hello Vue

既然是學習程式設計,那就遵循一下那個古老的傳統儀式。

首先我們新建一個 todos.html 檔案,用任何一個你喜歡的文字編輯器或者 IDE 開啟(例如 vscode、sublime、記事本、notepad++、webstorm 等等),然後寫上下面的程式碼:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title></head>
<body>
<div id="app">{{ message }}</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {message: 'Hello Vue!'}
        }
    })
</script>
</html>

我們寫了一個簡單的 HTML 檔案,使用 Script 標籤引入了 Vue,版本是 2.5.16。然後我們寫了幾行 js 程式碼。在程式碼中我們 new(建立) 了一個 Vue 物件,並向這個物件傳遞了一些選項,例如告訴 Vue 掛載的元素(el,即elements 的縮寫)是 idapp 的那個 div,並且在 data 中繫結了一個名為 message 的變數,其值為 'Hello Vue!',然後我們就可以在 HTML 文件中引用這個 message 。Vue 在後面幫我們做麼很多神奇的事情,它把 {{ message }} 替換成了 Vue 物件中對應的值。

儲存程式碼並用瀏覽器開啟,可以看到瀏覽器顯示了 “Hello Vue!”,你也可以嘗試修改 message 的值,發現顯示的內容會跟著變化。

表單繫結

再來看一個神奇的例子,我們把程式碼換成下面這樣:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title></head>
<body>
<div id="app">
  <input type="text" v-model="value">
  <input type="button" value="傳送">
  <div>value 的值是:{{ value }}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {value: ''}
        }
    })
</script>
</html>

這裡要關注一下文件的 input 標籤裡 v-model="value" 這個東西。v-model 被稱為 Vue 的指令,指令可以用來做很多事,比如用於 if 條件判斷的 v-if,用於繫結值的 v-bind、用於繫結監聽事件的 v-on 等等,這在以後會接觸到。而這個 v-model 指令的作用是將 input 元素 value 屬性的值和我們建立的 Vue 物件中 value 的值進行繫結,我們知道 input 有一個 value 屬性,它的值會在瀏覽器顯示(例如後面那個 button 按鈕的傳送),Vue 將這個值繫結後,在 input 中引起的 value 值變化就會實時反映到關聯的 Vue 物件,所以會看到下方引用的 {{ value }} 也會跟著變化。

開啟瀏覽器,然後在文字框做一些輸入,試試效果!

加點方法

接下來我們在 Vue 物件中加點方法,還是上面的例子,只是在 Vue 物件中加了一個方法:

var app = new Vue({
        el: '#app',
        data: function () {
            return {value: ''}
        },
    	// 這是新增的方法
        methods: {
            send: function () {
                alert('傳送成功!');
                this.value = ''
            }
        }
    })

方法宣告在 method 物件中,key 為方法名,值為對應的函式。我們想做的事情很簡單,就是點選傳送按鈕後顯示一個傳送成功的訊息,然後將 value 的值清空。

開啟瀏覽器,發現怎麼點都沒有效果!因為 Vue 並不知道我們點選了按鈕,為了讓 Vue 監聽到我們點選按鈕的事件,需要在被點選的元素上繫結一個 click 事件,前面說過繫結事件用 v-on,因此在傳送按鈕上加上相應的程式碼:

<input type="button" value="傳送" v-on:click="send"/>

在輸入框輸入一些文字,然後點選傳送按鈕試試。

計算屬性

Vue 還可以根據繫結的資料做一些計算,然後我們就可以引用計算的結果。假設我們想實時統計輸入的字數,我們可以在 Vue 物件里加上對 value 長度的計算值:

var app = new Vue({
        el: '#app',
        data: function () {
            return {value: ''}
        },
        methods: {
            // 省略...
        },
    	// 這是新增的計算屬性
        computed: {
            count: function () {
                return this.value.length
            }
        }
    })

計算屬性申明到 computed 物件裡,這個物件的鍵是計算的結果,值是計算函式,這裡我們計算了 value 的長度。以後在 Vue 物件中就可以使用 this.count 引用計算結果,也可以在關聯的模板中直接引用,和繫結的資料 value 的用法非常類似。比如我們在文件中引用這個 count:

<div id="app">
  <input type="text" v-model="value">
  <input type="button" value="傳送" v-on:click="send"/>
  <div>value 的值是:{{ value }}</div>
  <!-- 引用 count -->
  <div>字數:{{ count }}</div>
</div>

開啟瀏覽器看看效果。

加點樣式

Vue 還可以動態地幫我們為元素繫結樣式(class 屬性),假設如果我們希望 input 中沒有任何值輸入,即 value 的值為空時,input 的邊框為紅色以提醒使用者沒有內容。首先我們寫一個簡單的樣式(這個樣式非常簡單,不需要有 CSS 基礎也看得懂),樣式通常寫到 head 標籤裡,用 style 包裹:

<head>
  <meta charset="UTF-8"><title>Vue Todo Tutorial</title>
  <style>
    .empty {
      border-color: red;
    }
  </style>
</head>

然後將這個 empty 用於 input 的 class 屬性,瀏覽器就會渲染對應的樣式:

<div id="app">
  <input type="text" class='empty' v-model="value">
  ...
</div>

當然現在無論 value 為何值邊框都是紅色的,因為 class 始終為 empty,現在讓 Vue 來幫我們。前面說了,繫結值用 v-bind 指令,我們修改一下程式碼,為 input 的 class 繫結一個值:

<div id="app">
  <input type="text" 
         v-bind:class='{empty: !count}' 
         v-model="value">
  ...
</div>

Vue 會根據 empty 後的表示式 !count 的真假來判斷 class 的值是否為 empty,如果為真(即 count = 0 的情況),則 class 的值為 empty,否則為空。

開啟瀏覽器看看效果!

練習

我們通過這幾個循序漸進的例子體會了 Vue 的部分核心特性,這些特性對我們開發 Todo 應用非常有幫助。當然這個例子還有一點小瑕疵,就由你來作為練習改進一下。

練習一: 儘管我們在使用者沒有輸入時用紅色邊框提醒使用者內容為空,但是使用者點選按鈕後仍然顯示提交成功的通知,這是不合理的。合理的情況應該是彈出通知提示使用者請輸入內容。修改示例的程式碼,使其達到上述效果。(提示:修改 send 方法)

練習二: 即使內容為空,輸入框下方依然顯示 value 的值是:,這看起來很奇怪。我們希望只有使用者真正地輸入了內容後,才提示 value 的值,請參閱 Vue 關於指令的官方文件,找到滿足我們需求的指令,修改示例程式碼以達到上述效果。(提示:我們應該通過判斷 value 是否有值來決定是否顯示輸入框下邊的 div 元素。)

Vue 的指令文件:https://cn.vuejs.org/v2/guide/conditional.html

接下來正式開始我們的 Todo 應用的開發吧!

相關文章