【編程鹿】學Vue.js這一篇就夠了「萬字學會|通俗易懂」

時間  2021-01-09
標籤 javascript css html vue java node python react webpack ios 欄目 JavaScript 简体版
原文   原文鏈接

vue概述

mvvm模式javascript

  • M：即Model，模型，包括數據和一些基本操做
  • V：即View，視圖，頁面渲染結果
  • VM：即View-Model，模型與視圖間的雙向操做（無需開發人員干涉）

在MVVM以前，開發人員從後端獲取須要的數據模型，而後要經過DOM操做Model渲染到View中。然後當用戶操做視圖，咱們還須要經過DOM獲取View中的數據，而後同步到Model中。css

而MVVM中的VM要作的事情就是把DOM操做徹底封裝起來，開發人員不用再關心Model和View之間是如何互相影響的：html

  • 只要咱們Model發生了改變，View上天然就會表現出來。
  • 當用戶修改了View，Model中的數據也會跟着改變。

把開發人員從繁瑣的DOM操做中解放出來，把關注點放在如何操做Model上。vue

mvvm模式的優點：java

  1. 低耦合

視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化時Model能夠不變，當Model變化時View也能夠不變node

  1. 可重用性

能夠把一些視圖邏輯放在一個ViewModel裏面，讓多個View重用這段視圖邏輯代碼python

  1. 獨立開發

開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計。react

而咱們今天要學習的，就是一款MVVM模式的框架：Vuewebpack

快速入門

安裝vue

下載安裝

下載地址：https://github.com/vuejs/vueios

能夠下載2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下載解壓，獲得vue.js文件。能夠在頁面中直接經過script引入vue.js文件

使用cdn

或者也能夠直接使用公共的CDN服務：

<!-- 開發環境版本，包含了用幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue 入門案例（演示用，不作講解）

HTML模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{name}}，很是酷！</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app", // el即element，要渲染的頁面元素
        data: {
            name: "Vue測試"
        }
    });
</script>
</body>
</html>
  • 首先經過new Vue()來建立Vue實例
  • 而後構造函數接收一個對象，對象中有一些屬性：
    • el ：是element的縮寫，經過id 選中要渲染的頁面元素，本例中是一個 div
    • data：數據，數據是一個對象，裏面有不少屬性，均可以渲染到視圖中
      • name ：這裏指定了一個name屬性
  • 頁面中的 h2 元素中，經過{{name}} 的方式，來渲染剛剛定義的 name 屬性

更神奇的在於，當你修改name屬性時，頁面會跟着變化。

雙向綁定

對剛纔的案例進行簡單修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <h2>
      {{name}}，很是酷！
      有{{num}}個酷炫功能！
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app", // el即element，要渲染的頁面元素
        data: {
            name: "Vue測試",
            num: 1
        }
    });
</script>
</body>
</html>
  • 在data中添加了新的屬性： num
  • 在頁面中有一個 input 元素，經過 v-model 與 num 進行綁定
  • 同時經過 {{num}} 在頁面輸出

能夠觀察到，輸入框的變化引發了data中的num的變化，同時頁面輸出也跟着變化。

  • input與num綁定，input的value值變化，影響到了data中的num值
  • 頁面 {{num}} 與數據num綁定，所以num值變化，引發了頁面效果變化。

沒有任何dom操做，這就是雙向綁定的魅力。

事件處理

在頁面添加一個按鈕：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <button v-on:click="num++">點我</button>
    <h2>
      {{name}}，很是酷！
      有{{num}}個酷炫功能！
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app", // el即element，要渲染的頁面元素
        data: {
            name: "Vue測試",
            num: 1
        }
    });
</script>
</body>
</html>
  • 這裏用 v-on 指令綁定點擊事件，而不是普通的 onclick ，而後直接操做num
  • 普通onclick是沒法直接操做num的

Vue 實例

建立Vue實例

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的：

var vm = new Vue({
	// 選項
})

在構造函數中傳入一個對象，而且在對象中聲明各類Vue須要的數據和方法，包括：

  • el
  • data
  • methods
  • … …等

接下來，一一介紹。

模板或元素

每一個Vue實例都須要關聯一段Html模板，Vue會基於此模板進行視圖渲染；能夠經過el屬性來指定。

例如一段html模板：

<div id="app">

</div>

而後建立Vue實例，關聯這個div

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

這樣，Vue就能夠基於id爲 app 的div元素做爲模板進行渲染了。在這個div範圍之外的部分是沒法使用vue特性的。

數據

當Vue實例被建立時，它會嘗試獲取在data中定義的全部屬性，用於視圖的渲染，而且監視data中的屬性變化，當data發生改變，全部相關的視圖都將從新渲染，這就是「響應式「系統。

html：

<div id="app">
	<input type="text" v-model="name"/>
</div>

js：

var vm = new Vue({
		el:"#app",
		data:{
			name:"ZHANGSAN"
	}
})
  • name的變化會影響到 input 的值
  • input中輸入的值，也會致使vm中的name發生改變

方法

Vue實例中除了能夠定義data屬性，也能夠定義方法，而且在Vue的做用範圍內使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="add">點我</button>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            add: function () {
                console.log("點我了...233")
            }
        }
    });
</script>
</body>
</html>

生命週期鉤子函數

每一個 Vue 實例在被建立時都要通過一系列的初始化過程 ：建立實例，裝載模板，渲染模板等。Vue爲生命週期中的每一個狀態都設置了鉤子函數（監聽函數）。每當Vue實例處於不一樣的生命週期時，對應的函數就會被觸發調用。

全部的生命週期鉤子自動綁定 this 上下文到實例中，所以你能夠訪問數據，對屬性和方法進行運算。

20200710065238953

生命週期

每一個 Vue 實例在被建立以前都要通過一系列的初始化過程

生命週期函數 含義
beforeCreate（vue對象建立前） 組件實例剛被建立，組件屬性計算以前，好比data屬性等
created（建立後） 模板編譯、掛載以前
mounted（載入後） 模板編譯、掛載以後
beforeUpdate（更新前） 組件更新以前
updated（更新後） 組件更新以後
beforeDestroy（銷燬前） 組件銷燬前調用
destroyed（銷燬後） 組件銷燬後調用

vm.$el ：Vue 實例使用的根 DOM 元素

vm.$root ：當前的 Vue 實例。

Vue在實例化的過程當中，會調用這些生命週期的鉤子，給咱們提供了執行自定義邏輯的機會。那麼，在這些vue鉤子中，vue實例到底執行了那些操做，咱們先看下面執行的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs生命週期</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        },
        beforeCreate: function () {
            console.log(this);
            showData('建立vue實例前', this);
        },
        created: function () {
            showData('建立vue實例後', this);
        },
        beforeMount: function () {
            showData('掛載到dom前', this);
        },
        mounted: function () {
            showData('掛載到dom後', this);
        },
        beforeUpdate: function () {
            showData('數據變化更新前', this);
        },
        updated: function () {
            showData('數據變化更新後', this);
        },
        beforeDestroy: function () {
            showData('vue實例銷燬前', this);
        },
        destroyed: function () {
            showData('vue實例銷燬後', this);
        }
    });

    function showData(process, obj) {
        console.log(process);
        console.log('data 數據：' + obj.message)
        console.log('掛載的對象：')
        console.log(obj.$el)
    }
</script>
</body>
</html>

鉤子函數

例如：created表明在vue實例建立後；

能夠在Vue中定義一個created函數，表明這個時期的構造函數：

建立示例html頁面以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            // 初始化爲空
            msg: ""
        },
        // 鉤子函數
        created() {
            // this 表示Vue實例
            this.msg = "hello vue.created";
            console.log(this)
        }
    });
</script>
</body>
</html>

this

能夠看下在vue內部的this變量是誰，在created的時候，打印this

var app = new Vue({
        el:"#app",
        data:{
            msg: ""
        },
        //鉤子函數
        created() {
            //this表示vue實例
            this.msg = "hello vue. created.";
            console.log(this);
        }
    });

控制檯的輸出； 在這裏插入圖片描述 總結： this 就是當前的Vue實例，在Vue對象內部，必須使用 this 才能訪問到Vue中定義的data內屬性、方法等。

應用場景

  1. 在beforeCreate生命週期函數運行時，能夠添加loading動畫

  2. 在created生命週期函數運行時，能夠結束loading動畫，還能夠作一些初始化，實現函數自執行等操做

  3. 最常用的是mounted生命週期函數

能夠發起後端數據請求，取回數據

能夠接收頁面之間傳遞的參數

能夠子組件向父組件傳遞參數等

指令

什麼是指令？

指令 (Directives) 是帶有 v- 前綴的特殊屬性。例如在入門案例中的v-model，表明雙向綁定。

插值表達式

花括號

格式：

{{表達式}}

說明：

  • 該表達式支持JS語法，能夠調用js內置函數（必須有返回值）
  • 表達式必須有返回結果。例如 1 + 1，沒有結果的表達式不容許使用，如：var a = 1 + 1;
  • 能夠直接獲取Vue實例中定義的數據或函數

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue."
        }
    });
</script>
</body>
</html>

插值閃爍

使用{{}}方式在網速較慢時會出現問題。在數據未加載完成時，頁面會顯示出原始的 {{}} ，加載完畢後才顯示正確數據，稱爲插值閃爍。解決辦法是經過v-text和v-html替換

v-text 和 v-html

使用v-text和v-html指令來替代 {{}}

說明：

  • v-text：將數據輸出到元素內部，若是輸出的數據有HTML代碼，會做爲普通文本輸出
  • v-html：將數據輸出到元素內部，若是輸出的數據有HTML代碼，會被渲染

示例，改造原頁面內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--{{msg}}-->
    v-text：<span v-text="msg"></span><br/>
    v-html：<span v-html="msg"></span><br/>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
//            msg: "hello vue."
            msg: "<h2>hello vue.</h2>"
        }
    });
</script>
</body>
</html>

而且不會出現插值閃爍，當沒有數據時，會顯示空白。

v-model

剛纔的v-text和v-html能夠看作是單向綁定，數據影響了視圖渲染，可是反過來就不行。

接下來學習的v-model是雙向綁定，視圖（View）和模型（Model）之間會互相影響。

既然是雙向綁定，必定是在視圖中能夠修改數據，這樣就限定了視圖的元素類型。

目前v-model的可以使用元素有：

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定義組件）

基本上除了最後一項，其它都是表單的輸入項。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br/>
    <input type="checkbox" value="PHP" v-model="language">PHP<br/>
    <input type="checkbox" value="Swift" v-model="language">Swift<br/>
    <h2>
        你選擇了：{{language.join(",")}}
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            language: []
        }
    });
</script>
</body>
</html>
  • 多個 checkbox 對應一個model時，model的類型是一個數組，單個checkbox值是boolean類型
  • radio對應的值是input的value值
  • input 和 textarea 默認對應的model是字符串
  • select 單選對應字符串，多選對應也是數組

v-on

基本用法

v-on指令用於給頁面元素綁定事件。

語法：

v-on:事件名="js片斷或函數名"

簡寫語法：

@事件名="js片斷或函數名"

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接寫js片斷-->
    <button @click="num++">增長</button>
    <!--使用函數名，該函數必需要在vue實例中定義-->
    <button @click="decrement">減小</button>
    <h2>
        num={{num}}
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            decrement() {
                this.num--;
            }
        }
    });
</script>
</body>
</html>

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。

儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的。

  • .stop ：阻止事件冒泡
  • .prevent ：阻止默認事件發生
  • .capture ：使用事件捕獲模式
  • .self ：只有元素自身觸發事件才執行。（冒泡或捕獲的都不執行）
  • .once ：只執行一次

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接寫js片斷-->
    <button @click="num++">增長</button>
    <!--使用函數名，該函數必需要在vue實例中定義-->
    <button @click="decrement">減小</button>
    <h2>
        num={{num}}
    </h2>
    <hr>
    事件冒泡測試：<br/>
    <div style="background-color: lightblue;width: 100px;height: 100px" @click="print('div被點擊了')">
        <button @click.stop="print('點擊了button')">點我試試</button>
    </div>
    <br>阻止默認事件：<br>
    <a href="http://www.baidu.com" @click.prevent="print('點擊了超連接')">百度</a>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            decrement() {
                this.num--;
            },
            print(str) {
                console.log(str);
            }
        }
    });
</script>
</body>
</html>

v-for

遍歷數據渲染頁面是很是經常使用的需求，Vue中經過v-for指令來實現。

遍歷數組

語法：

v-for="item in items"
  • items：要遍歷的數組，須要在vue的data中定義好。
  • item：循環變量

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            users: [
                {"name": "小明", "age": 13, "gender": "男"},
                {"name": "小紅", "age": 13, "gender": "女"},
                {"name": "小綠", "age": 4, "gender": "男"}
            ]
        }
    });
</script>
</body>
</html>

數組角標

在遍歷的過程當中，若是須要知道數組角標，能夠指定第二個參數：

語法：

v-for="(item,index) in items"
  • items：要迭代的數組
  • item：迭代獲得的數組元素別名
  • index：迭代到的當前元素索引，從0開始。

示例：

<div id="app">
    <ul>
        <li v-for="(user,index) in users">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>

遍歷對象

v-for除了能夠迭代數組，也能夠迭代對象。語法基本相似

語法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
  • 1個參數時，獲得的是對象的值
  • 2個參數時，第一個是值，第二個是鍵
  • 3個參數時，第三個是索引，從0開始 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>

    <hr>

    <ul>
        <li v-for="(user,index) in users">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>

    <hr>

    <ul>
        <!--1個參數時，獲得的是對象的值-->
        <li v-for="value in person">
            {{value}}
        </li>
    </ul>
    <hr>
    <ul>
        <!--2個參數時，第一個是值，第二個是鍵-->
        <li v-for="(value,key ) in person">
            {{value}}--{{key}}
        </li>
    </ul>
    <hr>
    <ul>
        <!--3個參數時，第三個是索引，從0開始-->
        <li v-for="(value,key,index ) in person">
            {{value}}--{{key}} -- {{index}}
        </li>
    </ul>

</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            users: [
                {"name": "小明", "age": 13, "gender": "男"},
                {"name": "小紅", "age": 13, "gender": "女"},
                {"name": "小綠", "age": 4, "gender": "男"}
            ],
            person: {"name": "zhangsan", "age": 13, "gender": "男", "address": "中國"}
        }
    });
</script>
</body>
</html>

key

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。

若是使用key這個功能能夠有效的提升渲染的效率；key通常使用在遍歷完後，又增、減集合元素的時候更有意義。

可是要實現這個功能，你須要給Vue一些提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性。理想的 key 值是每項都有的且惟一的 id。 也就是key是該的惟一標識。

示例：

<ul>
	<li v-for="(item,index) in items" :key="index"></li>
</ul>
  • 這裏使用了一個特殊語法： :key="" 後面會講到，它可讓你讀取vue中的屬性，並賦值給key屬性
  • 這裏綁定的key是數組的索引，應該是惟一的

v-if 和 v-show

基本使用

v-if，顧名思義，條件判斷。當獲得結果爲true時，所在的元素纔會被渲染。

語法：

v-if="布爾表達式"

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <button @click="show = !show">點我</button>
    <h2 v-if="show">
        hello vuejs.
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    });
</script>
</body>
</html>

與 v-for 結合

當v-if和v-for出如今一塊兒時，v-for優先級更高。也就是說，會先遍歷，再判斷條件。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <button @click="show = !show">點我</button>
    <h2 v-if="show">
        hello vuejs.
    </h2>
    <hr>
    <ul>
        <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true,
            users: [
                {"name": "北京大學", "age": 8, "gender": "男"},
                {"name": "清華大學", "age": 12, "gender": "女"},
                {"name": "復旦大學", "age": 4, "gender": "男"},
                {"name": "南開大學", "age": 2, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>

v-else

可使用 v-else 指令來表示 v-if 的「else 塊」：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <button @click="show = !show">點我</button>
    <h2 v-if="show">
        hello vuejs.
    </h2>
    <hr>
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
        <li v-else style="background-color: blue">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true,
            users: [
                {"name": "北京大學", "age": 8, "gender": "男"},
                {"name": "清華大學", "age": 12, "gender": "女"},
                {"name": "復旦大學", "age": 4, "gender": "男"},
                {"name": "南開大學", "age": 2, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。 v-else-if ，顧名思義，充當 v-if 的「else-if 塊」，能夠連續使用：

<div v-if="type === 'A'">
	A
</div>
<div v-else-if="type === 'B'">
	B
</div>
<div v-else-if="type === 'C'">
	C
</div>
<div v-else>
	Not A/B/C
</div>

相似於 v-else ， v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素以後。

v-show

另外一個用於根據條件展現元素的選項是 v-show 指令。用法大體同樣：

<h1 v-show="ok">Hello!</h1>

不一樣的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。 v-show 只是簡單地切換元素的 CSS 屬性display 。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="show = !show">點我</button>
    <h2 v-if="show">
        hello vuejs.
    </h2>
    <hr>
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
        <li v-else style="background-color: blue">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
    <hr>
    <h2 v-show="show">
        你好，世界！
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true,
            users: [
                {"name": "北京大學", "age": 8, "gender": "男"},
                {"name": "清華大學", "age": 12, "gender": "女"},
                {"name": "復旦大學", "age": 4, "gender": "男"},
                {"name": "南開大學", "age": 2, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>

v-bind

屬性上使用vue數據

看這樣一個案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">紅色</button>
    <button @click="color='blue'">藍色</button>
    <div :class="">
        點擊按鈕改變背景顏色
    </div>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            color: "red"
        }
    });
</script>
</body>
</html>

解讀：

  • 頁面有兩個按鈕，點擊時，會改變Vue實例中的color值，這個值與前面定義的CSS樣式一致。
  • 目前div的class爲空，但願實現點擊按鈕後，div的class樣式會在.red和.blue之間切換

該如何實現？

你們可能會這麼想，既然color值會動態變化爲不一樣的class名稱，那麼咱們直接把color注入到class屬性就行了，因而就這樣寫：

<div class="{{color}}"></div>

這樣寫是錯誤的！由於插值表達式不能用在標籤的屬性中。

此時，Vue提供了一個新的指令來解決：v-bind，語法：

v-bind:屬性名="Vue中的變量"

例如，在這裏咱們能夠寫成：

<div v-bind:class="color"></div>

不過，v-bind太麻煩，所以能夠省略，直接寫成： ，:屬性名='屬性值' ，即：

<div :class="color"></div>

class屬性的特殊用法

上面雖然實現了顏色切換，可是語法卻比較囉嗦。

Vue對class屬性進行了特殊處理，能夠接收數組或對象格式

對象語法：能夠傳給 :class 一個對象，以動態地切換 class：

<div :class="{ red: true,blue:false }"></div>
  • 對象中，key是已經定義的class樣式的名稱，如本例中的： red 和 blue
  • 對象中，value是一個布爾值，若是爲true，則這個樣式會生效，若是爲false，則不生效。

以前的案例能夠改寫成這樣：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">紅色</button>
    <button @click="color='blue'">藍色</button>
    <!--v-bind 簡寫爲 :-->
    <div :class="color">
        點擊按鈕改變背景顏色
    </div>
    <hr>
    <br>
    <button @click="bool=!bool">點我改變下面色塊的顏色</button>
    <div :class="{red:bool, blue:!bool}">
        點擊按鈕改變背景顏色
    </div>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            color: "red",
            bool:true
        }
    });
</script>
</body>
</html>

首先class綁定的是一個對象： {red:bool, blue: !bool}

red和blue兩個樣式的值分別是bool和!bool，也就是說這兩個樣式的生效標記剛好相反，一個生效，另外一個失效。

bool默認爲true，也就是說默認red生效，blue不生效

如今只須要一個按鈕便可，點擊時對bool取反，天然實現了樣式的切換

計算屬性

在插值表達式中使用js表達式是很是方便的，並且也常常被用到。

可是若是表達式的內容很長，就會顯得不夠優雅，並且後期維護起來也不方便，例以下面的場景，有一個日期的數據，可是是毫秒值：

data:{
	birthday:1429032123201 // 毫秒值
}

在頁面渲染，但願獲得yyyy-MM-dd的樣式則須要以下處理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <h2>
    你的生日是：
    {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
	</h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            birthday: 1429032123201
        }
    });
</script>
</body>
</html>

雖然能獲得結果，可是很是麻煩。

Vue中提供了計算屬性，來替代複雜的表達式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <h2>
    你的生日是：
    {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
    <hr>
    <h2>
    computed計算方式；你的生日爲：{{birth}}
    </h2>

</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            birthday: 1429032123201
        },
        computed: {
            birth() {
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay();
            }
        }
    });
</script>
</body>
</html>

計算屬性本質就是方法，可是必定要返回數據。而後頁面渲染時，能夠把這個方法當成一個變量來使用。

過濾器

說明

​ 官方說法：Vue.js 容許你自定義過濾器，可被用於一些常見的==文本格式化==。過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符號指示。

​ 通俗的來講：過濾器是對即將顯示的數據作進一步的篩選處理，而後進行顯示，值得注意的是過濾器並無改變原來的數據，只是在原數據的基礎上產生新的數據。

​ 過濾器的種類：

  • 全局過濾器
  • 局部過濾器

過濾器的使用步驟

定義過濾器

  • 全局過濾器

    Vue.filter('過濾器名稱', function (value[,param1,...] ) {  
//邏輯代碼
})

  • 局部過濾器

    new Vue({       
 	filters: {      
    	'過濾器名稱': function (value[,param1,...] ) { 
       		// 邏輯代碼     
      	} 
    }    
})

應用過濾器

{{ 表達式 |  過濾器名字}}

過濾器不帶參數

案例1：日期格式化

<body>
    <div id="myDiv">
        {{birthday | dateFormat }}
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/moment.js"></script>		// 須要引入一個日期處理的一個工具類
    <script type="text/javascript">

      	// 定義過濾器
        Vue.filter("dateFormat",function(value){
            return moment(value).format("YYYY-MM-DD HH:mm:ss");
        });

        const app = new Vue({
            el: "#myDiv",
            data: {
                birthday: new Date()
            }
        });
    </script>
</body>

案例2：文本格式化

<body>
    <div id="myDiv">
        {{message | messageFormat}} <br/>
        {{message }}							// 值並無改變
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">

        Vue.filter("messageFormat",function(value){
            return value.replace("很棒","優秀");
        });

        const app = new Vue({
            el: "#myDiv",
            data: {
                message: "HelloWorld,是一個很棒的青年"
            }
        });
    </script>
</body>

過濾器帶參數

<body>
    <div id="myDiv">
        {{birthday | dateFormat }}     <br/>		// 不傳遞格式化標準就用完整寫法
        {{birthday | dateFormat("YYYY-MM-DD") }}	// 傳入了格式化標準就用傳遞的寫法進行格式化
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/moment.js"></script>
    <script type="text/javascript">

        Vue.filter("dateFormat",function(value,pattern = "YYYY-MM-DD HH:mm:ss"){
            return moment(value).format(pattern);
        });

        const app = new Vue({
            el: "#myDiv",
            data: {
                birthday: new Date()
            }
        });
    </script>
</body>

watch

監控

watch可讓咱們監控一個值的變化。從而作出相應的反應。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <input v-model="message">
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            message: "hello vue"
        },
        watch: {
            message(newValue, oldValue) {
                console.log("新值：" + newValue + "；舊值：" + oldValue)
            }
        }
    });
</script>
</body>
</html>

深度監控

若是監控的是一個對象，須要進行深度監控，才能監控到對象中屬性的變化，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <hr>
    <br>
    <input type="text" v-model="person.name"><br>
    <input type="text" v-model="person.age">
    <button @click="person.age++">+</button>
    <h2>
        姓名爲：{{person.name}}；年齡爲：{{person.age}}
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            message: "hello vue",
            person: {"name": "zhangsan", "age": 12}
        },
        watch: {
            message(newValue, oldValue) {
                console.log("新值：" + newValue + "；舊值：" + oldValue)
            },
            person: {
                // 開啓深度監控，能夠監控到對象屬性值的變化
                deep: true,
                // 監控的處理辦法
                handler(obj) {
                    console.log("name = " + obj.name + ", age=" + obj.age);
                }
            }
        }
    });
</script>
</body>
</html>

變化：

之前定義監控時，person是一個函數，如今改爲了對象，而且要指定兩個屬性：

  • deep:表明深度監控，不只監控person變化，也監控person中屬性變化
  • handler：就是之前的監控處理函數

組件化

在大型應用開發的時候，頁面能夠劃分紅不少部分。每每不一樣的頁面，也會有相同的部分。例如可能會有相同的頭部導航。

可是若是每一個頁面都獨自開發，這無疑增長了咱們開發的成本。因此咱們會把頁面的不一樣部分拆分紅獨立的組件，而後在不一樣頁面就能夠共享這些組件，避免重複開發。

全局組件

咱們經過Vue的component方法來定義一個全局組件。

<div id="app">
    <!--使用定義好的全局組件-->
    <counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定義全局組件，兩個參數：1，組件名稱。2，組件參數
    Vue.component("counter",{
        template:'<button v-on:click="count++">你點了我 {{ count }} 次，我記住了.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>
  • 組件其實也是一個Vue實例，所以它在定義時也會接收：data、methods、生命週期函數等
  • 不一樣的是組件不會與頁面的元素綁定，不然就沒法複用了，所以沒有el屬性。
  • 可是組件渲染須要html模板，因此增長了template屬性，值就是HTML模板
  • 全局組件定義完畢，任何vue實例均可以直接在HTML中經過組件名稱來使用組件了。
  • data必須是一個函數，再也不是一個對象。

組件的複用

定義好的組件，能夠任意複用屢次：

<div id="app">
    <!--使用定義好的全局組件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

你會發現每一個組件互不干擾，都有本身的count值。怎麼實現的？

組件的data屬性必須是函數！

當咱們定義這個counter組件時，它的data 並非像這樣直接提供一個對象：

data: {
  count: 0
}

取而代之的是，一個組件的 data 選項必須是一個函數，所以每一個實例能夠維護一份被返回對象的獨立的拷貝：

data: function () {
  return {
    count: 0
  }
}

若是 Vue 沒有這條規則，點擊一個按鈕就會影響到其它全部實例！

局部註冊

一旦全局註冊，就意味着即使之後你再也不使用這個組件，它依然會隨着Vue的加載而加載。

所以，對於一些並不頻繁使用的組件，咱們會採用局部註冊。

咱們先在外部定義一個對象，結構與建立組件時傳遞的第二個參數一致：

const counter = {
    template:'<button v-on:click="count++">你點了我 {{ count }} 次，我記住了.</button>',
    data(){
        return {
            count:0
        }
    }
};

而後在Vue中使用它：

var app = new Vue({
    el:"#app",
    components:{
        counter:counter // 將定義的對象註冊爲組件
    }
})
  • components就是當前vue對象子組件集合。
    • 其key就是子組件名稱
    • 其值就是組件對象的屬性
  • 效果與剛纔的全局註冊是相似的，不一樣的是，這個counter組件只能在當前的Vue實例中使用

組件通訊

一般一個單頁應用會以一棵嵌套的組件樹的形式來組織：

image-20201001195026231

  • 頁面首先分紅了頂部導航、左側內容區、右側邊欄三部分
  • 左側內容區又分爲上下兩個組件
  • 右側邊欄中又包含了3個子組件

各個組件之間以嵌套的關係組合在一塊兒，那麼這個時候不可避免的會有組件間通訊的需求。

父向子傳遞

  1. 父組件使用子組件時，自定義屬性（屬性名任意，屬性值爲要傳遞的數據）
  2. 子組件經過props接收父組件屬性

父組件使用子組件，並自定義了title屬性：

<div id="app">
    <h1>打個招呼：</h1>
    <!--使用子組件，同時傳遞title屬性-->
    <introduce title="父組件傳遞的消息"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("introduce",{
        // 直接使用props接收到的屬性來渲染頁面
        template:'<h1>{{title}}</h1>',
        props:['title'] // 經過props來接收一個父組件傳遞的屬性
    })
    var app = new Vue({
        el:"#app"
    })
</script>

傳遞複雜數據

咱們定義一個子組件，並接受複雜數據：

const myList = {
        template: '\
        <ul>\
        	<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
        </ul>\
        ',
        props: {
            items: {
                type: Array,
                default: [],
                required: true
            }
        }
    };
  • 這個子組件能夠對 items 進行迭代，並輸出到頁面。
  • props：定義須要從父組件中接收的屬性
    • items：是要接收的屬性名稱
      • type：限定父組件傳遞來的必須是數組
      • default：默認值
      • required：是否必須

咱們在父組件中使用它：

<div id="app">
    <h2>百知已開設以下課程：</h2>
    <!-- 使用子組件的同時，傳遞屬性，這裏使用了v-bind，指向了父組件本身的屬性lessons -->
    <my-list :items="lessons"/>
</div>
var app = new Vue({
    el:"#app",
    components:{
        myList // 當key和value同樣時，能夠只寫一個
    },
    data:{
        lessons:[
            {id:1, name: 'java'},
            {id:2, name: 'python'},
            {id:3, name: 'ui'},
        ]
    }
})

子向父的通訊

來看這樣的一個案例：

<div id="app">
    <h2>num: {{num}}</h2>
    <!--使用子組件的時候，傳遞num到子組件中-->
    <counter :num="num"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("counter", {// 子組件，定義了兩個按鈕，點擊數字num會加或減
        template:'\
            <div>\
                <button @click="num++">加</button>  \
                <button @click="num--">減</button>  \
            </div>',
        props:['num']// count是從父組件獲取的。
    })
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        }
    })
</script>
  • 子組件接收父組件的num屬性
  • 子組件定義點擊按鈕，點擊後對num進行加或減操做

咱們嘗試運行，好像沒問題，點擊按鈕試試：

image-20201001200426862

子組件接收到父組件屬性後，默認是不容許修改的。怎麼辦？

既然只有父組件能修改，那麼加和減的操做必定是放在父組件：

var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    methods:{ // 父組件中定義操做num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

可是，點擊按鈕是在子組件中，那就是說須要子組件來調用父組件的函數，怎麼作？

咱們能夠經過v-on指令將父組件的函數綁定到子組件上：

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

在子組件中定義函數，函數的具體實現調用父組件的實現，並在子組件中調用這些函數。當子組件中按鈕被點擊時，調用綁定的函數：

Vue.component("counter", {
            template:'\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">減</button>  \
                </div>',
            props:['count'],
            methods:{
                plus(){
                    this.$emit("inc");
                },
                reduce(){
                    this.$emit("dec");
                }
            }
        })
  • vue提供了一個內置的this.$emit()函數，用來調用父組件綁定的函數

路由vue-router

場景模擬

如今咱們來實現這樣一個功能：

一個頁面，包含登陸和註冊，點擊不一樣按鈕，實現登陸和註冊頁切換。

編寫父組件

爲了讓接下來的功能比較清晰，咱們先新建一個文件夾：src

而後新建一個HTML文件，做爲入口：index.html

而後編寫頁面的基本結構：

<div id="app">
    <span>登陸</span>
    <span>註冊</span>
    <hr/>
    <div>
        登陸頁/註冊頁
    </div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app"
    })
</script>

編寫登陸及註冊組件

接下來咱們來實現登陸組件，之前咱們都是寫在一個文件中，可是爲了複用性，開發中都會把組件放入獨立的JS文件中，咱們新建一個user目錄以及login.js及register.js。

編寫組件，這裏咱們只寫模板，不寫功能。

login.js內容以下：

const loginForm = {
    template:'\
    <div>\
    <h2>登陸頁</h2> \
    用戶名：<input type="text"><br/>\
    密碼：<input type="password"><br/>\
    </div>\
    '
}

register.js內容：

const registerForm = {
    template:'\
    <div>\
    <h2>註冊頁</h2> \
    用&ensp;戶&ensp;名：<input type="text"><br/>\
    密&emsp;&emsp;碼：<input type="password"><br/>\
    確認密碼：<input type="password"><br/>\
    </div>\
    '
}

在父組件中引用

<div id="app">
    <span>登陸</span>
    <span>註冊</span>
    <hr/>
    <div>
        <!--<loginForm></loginForm>-->
        <!--
            疑問：爲何不採用上面的寫法？
            因爲html是大小寫不敏感的，若是採用上面的寫法，則被認爲是<loginform></loginform>
            因此，若是是駝峯形式的組件，須要把駝峯轉化爲「-」的形式
         -->
        <login-form></login-form>
        <register-form></register-form>
    </div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        components: {
            loginForm,
            registerForm
        }
    })
</script>

問題

咱們期待的是，當點擊登陸或註冊按鈕，分別顯示登陸頁或註冊頁，而不是一塊兒顯示。

可是，如何才能動態加載組件，實現組件切換呢？

雖然使用原生的Html5和JS也能實現，可是官方推薦咱們使用vue-router模塊。

vue-router簡介和安裝

使用vue-router和vue能夠很是方便的實現 複雜單頁應用的動態路由功能。

官網：https://router.vuejs.org/zh-cn/

使用npm安裝：npm install vue-router --save

在index.html中引入依賴：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

快速入門

新建vue-router對象，而且指定路由規則：

// 建立VueRouter對象
const router = new VueRouter({
    routes:[ // 編寫路由規則
        {
            path:"/login", // 請求路徑
            component:loginForm // 組件名稱
        },
        {path:"/register",component:registerForm},
    ]
})
  • 建立VueRouter對象，並指定路由參數
  • routes：路由規則的數組，能夠指定多個對象，每一個對象是一條路由規則，包含如下屬性：
    • path：路由的路徑
    • component：組件名稱

在父組件中引入router對象：

var vm = new Vue({
    el:"#app",
    components:{// 引用登陸和註冊組件
        loginForm,
        registerForm
    },
    router // 引用上面定義的router對象
})

頁面跳轉控制：

<div id="app">
    <!--router-link來指定跳轉的路徑-->
    <span><router-link to="/login">登陸</router-link></span>
    <span><router-link to="/register">註冊</router-link></span>
    <hr/>
    <div>
        <!--vue-router的錨點-->
        <router-view></router-view>
    </div>
</div>
  • 經過 router-view 來指定一個錨點，當路由的路徑匹配時，vue-router會自動把對應組件放到錨點位置進行渲染
  • 經過 router-link 指定一個跳轉連接，當點擊時，會觸發vue-router的路由功能。

單文件組件

vue-cli3開發單文件組件

Vue.component('組件名',{

})
new Vue({})

缺點

  • 全局定義組件的名字時不能重複
  • 字符串模板 es6提供了模板字符串 \
  • 不支持css

在vue中把.vue的文件稱爲 單文件組件

Vue CLI3 腳手架

基本配置

  • 安裝Nodejs
    • 保證Node.js8.9或更高版本
    • 終端中輸入node -v,保證已安裝成功
  • 安裝淘寶鏡像源
    • npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 之後的npm能夠用cnpm代替
  • 安裝Vue Cli3腳手架
    • cnpm install -g @vue/cli
  • 檢查其版本是否正確
    • vue --version

快速原型開發

在命令行工具cmd，或者Intellij IDEA的Terminal中進入想要構建項目的目錄，輸入

vue init webpack project-name

回車,webpack默認版本爲2.0。

接下來會出現幾個提示，分別是輸入項目名稱、描述、做者等，按實際狀況選擇便可。

？Project name ---- 項目名稱，init命令時也填了個project-name，若是無需更改，直接回車便可；

？Project description ---- 項目描述，按需填寫。無需填寫能夠直接回車；

？Author ---- 做者

？Vue build ---- 構建模式，通常默認第一個；

？Install vue-router? ---- 是否安裝vue-router。選Y。後邊構建項目會用到。

？Use ESLint to lint yout code? ---- 格式校驗，按需；

？Set up unit tests ---- 測試相關，按需；

？Setup e2e tests with Nightwatch? ---- 測試相關，按需；

？Should we run ‘npm install’ for you after the project has been created? ---- 按需，這裏我選Yes, use NPM。若是選No，後續本身在目標

目錄下執行npm install便可。這樣構建出來的項目，能夠直接運行。進入項目所在目錄，執行npm run dev，執行完看到如下提示：

Your application is running here: http://www.javashuo.com/tag/http://localhost:8080

在瀏覽器打開http://localhost:8080，看到這個頁面，接下來就能夠開始開發了。

分析Vue腳手架生成的項目結構

​ node_modules:依賴包目錄 ​ public：靜態資源目錄 ​ src：源碼目錄 ​ src/assets:資源目錄 ​ src/components：組件目錄 ​ src/views:視圖組件目錄 ​ src/App.vue:根組件 ​ src/main.js:入口js ​ src/router.js:路由js ​ babel.config.js:babel配置文件

使用單文件組件開發購物車

<template>
  <div id="app">
    <h1>{{title}}</h1>
    <ul>
      <li v-for="item in cartList" :key="item.id">
        <h2>{{item.title}}</h2>
        <p>${{item.price}}</p>
      </li>
    </ul>
    <my-cart :title="title" :cart-list="cartList"></my-cart>
  </div>
</template>

  <script>
    import  MyCart from './components/Cart';
    export default {
      name:"app",
      data() {
        return {
          cartList:[
            {id:1,title:"vue實戰",price:188,active:true,count:2},
            {id:2,title:"react實戰",price:288,active:false,count:1}],
          title:"購物車"
        };
      },
      components:{MyCart}
    }
  </script>

購物車文件代碼：

<template>
    <div>
      <h1>{{title}}</h1>
      <table border="1">
        <tr>
          <th>#</th>
          <th>課程</th>
          <th>單價</th>
          <th>數量</th>
          <th>總價</th>
        </tr>
        <tr v-for="(c,index) in cartList" :key="c.id">
          <td>
            <input type="checkbox" v-model="c.active">
          </td>
          <td>{{c.title}}</td>
          <td>{{c.price}}</td>
          <td>
            <button @click="substract(index)">-</button>
            {{c.count}}
            <button @click="add(index)">+</button>
          </td>
          <td>¥{{c.price*c.count}}</td>
        </tr>
        <tr>
          <td></td>
          <td colspan="2">{{activeCount}}/{{count}}</td>
          <td colspan="2">¥{{total}}</td>
        </tr>
      </table>
    </div>
</template>

<script>
    export default {
      name:"cart",
      props:['title','cartList'],
      methods: {
        remove(i) {
          if (window.confirm("肯定是否要刪除?")) {
            this.cartList.splice(i, 1);
          }
        },
        substract(i) {
          let count = this.cartList[i].count;
          count > 1 ? (this.cartList[i].count -= 1) : this.remove(i);
        },
        add(i) {
          this.cartList[i].count++;
        }
      },
      computed:{
        count(){
          return this.cartList.length;
        },
        activeCount(){
          return this.cartList.filter(v=>v.active).length;
        },
        total(){
          let sum=0;
          this.cartList.forEach(c=>{
            if(c.active){
              sum+=c.price*c.count;
            }
          });
          return sum;
        }
      }
    }
</script>


<style scoped>

</style>

Vuejs Ajax

Vuejs 並無直接處理ajax的組件，但可使用axios組件實現對異步請求的操做。

Axios簡介

# 若是使用npm則能夠以下安裝
npm install axios

axios應用

方法說明

axios可使用的方法有：

  • axios(config)

config請求配置

這些是建立請求時能夠用的配置選項。只有 url 是必需的。若是沒有指定 method ，請求將默認使用 get 方法。

{
	// `url` 是用於請求的服務器 URL
	url: '/user',
	
	// `method` 是建立請求時使用的方法
	method: 'get', // 默認是 get
	
	// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
	// 它能夠經過設置一個 `baseURL` 便於爲 axios 實例的方法傳遞相對 URL
	baseURL: 'https://some-domain.com/api/',
	
	// `params` 是即將與請求一塊兒發送的 URL 參數
	// 必須是一個無格式對象(plain object)或 URLSearchParams 對象
	params: {
		ID: 12345
	},
	
	// `data` 是做爲請求主體被髮送的數據
	// 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
	// 在沒有設置 `transformRequest` 時，必須是如下類型之一：
	// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
	// - 瀏覽器專屬：FormData, File, Blob
	// - Node 專屬： Stream
	data: {
		firstName: 'Fred'
	},
	
	// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
	// 若是請求話費了超過 `timeout` 的時間，請求將被中斷
	timeout: 1000
}

響應結構

{
	// `data` 由服務器提供的響應
	data: {},
	
	// `status` 來自服務器響應的 HTTP 狀態碼
	status: 200,
	
	// `statusText` 來自服務器響應的 HTTP 狀態信息
	statusText: 'OK',
	
	// `headers` 服務器響應的頭
	headers: {},
	
	// `config` 是爲請求提供的配置信息
	config: {}
}

axios方法示例

能夠經過向 axios 傳遞相關配置來建立請求

axios(config)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs測試</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user,index) in users" :key="index">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            users: []
        },
        created() {
            // 初始化加載數據
            axios({
                method: "get",
                url: "data.json"
            }).then((res) => {
                console.log(res);
                // 將獲取數據設置到users屬性
                // 不能使用this，在axios回調函數中表示窗口，不是vue實例
                app.users = res.data;
            }).catch(error => {
                alert(error);
            })
        }
    });
</script>
</body>
</html>

綜合案例

購物車綜合案例

第一步：實現圖書的列表顯示

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>價格</td>
                <td>購買數量</td>
                <td>操做</td>
            </tr>
            <tr v-for="book in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button>-</button>
                    {{book.number}}
                    <button>+</button>
                </td>
                <td>
                    <button>刪除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龍八部', pubDate:'1988-02' ,price: 80.00, number: 1},
                    {id: 2, name: '射鵰英雄傳', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龍記', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎記', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            }
        });
    </script>
</body>

第二步：價格小數問題處理

方式一：methods

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>價格</td>
                <td>購買數量</td>
                <td>操做</td>
            </tr>
            <tr v-for="book in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{getPrice(book.price)}}</td>
                <td>
                    <button>-</button>
                    {{book.number}}
                    <button>+</button>
                </td>
                <td>
                    <button>刪除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龍八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射鵰英雄傳', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龍記', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎記', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            methods: {
                getPrice(price){
                    return '￥' + price.toFixed(2);
                }
            }
        });
    </script>
</body>

方式二：過濾器

==能夠應用到插值表達式或v-bind表達式中，能夠作格式化。==
<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>價格</td>
                <td>購買數量</td>
                <td>操做</td>
            </tr>
            <tr v-for="book in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price | getPrice}}</td>
                <td>
                    <button>-</button>
                    {{book.number}}
                    <button>+</button>
                </td>
                <td>
                    <button>刪除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龍八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射鵰英雄傳', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龍記', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎記', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            filters: {
                getPrice(price){
                    return '￥' + price.toFixed(2);
                }
            }
        });
    </script>
</body>

第三步：數量加減操做

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>價格</td>
                <td>購買數量</td>
                <td>操做</td>
            </tr>
            <tr v-for="book in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="decrement(book)" v-bind:disabled="book.number < 2">
                      -
                  	</button>
                    {{book.number}}
                    <button @click="increment(book)">+</button>
                </td>
                <td>
                    <button>刪除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龍八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射鵰英雄傳', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龍記', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎記', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            methods: {
                decrement(book){
                    book.number--;
                },
                increment(book){
                    book.number++;
                }
            }
        });
    </script>
</body>

第四步：移除按鈕

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>價格</td>
                <td>購買數量</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
                    {{book.number}}
                    <button @click="increment(book)">+</button>
                </td>
                <td>
                    <button @click="deleteHandle(index)">刪除</button>
                </td>
            </tr>
        </table>
        <h2 v-if="books.length <= 0">
            購物車空空如也
        </h2>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龍八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射鵰英雄傳', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龍記', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎記', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            methods: {
                deleteHandle(index){
                    this.books.splice(index,1);
                }
            }
        });
    </script>
</body>

第五步：計算最終價格

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>價格</td>
                <td>購買數量</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
                    {{book.number}}
                    <button @click="increment(book)">+</button>
                </td>
                <td>
                    <button @click="deleteHandle(index)">刪除</button>
                </td>
            </tr>
        </table>
        <h1>總價：{{totalPrice | getPrice}}</h1>
        <h2 v-if="books.length <= 0">
            購物車空空如也
        </h2>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龍八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射鵰英雄傳', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龍記', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎記', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            filters: {
                getPrice(price){
                    return '￥' + price.toFixed(2);
                }
            },
            computed: {
                totalPrice(){
                    return this.books.reduce((sum,book)=>{
                        return sum  + book.price;
                    },0)
                }
            }
        });
    </script>
</body>

圖書管理綜合案例

第一步：實現列表、新增和刪除

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id"/>
        圖書名稱: <input type="text" v-model="name"/>
        <button @click="add">添加</button>
        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>
                    <a href="" @click.prevent="deleteHandle(index)">刪除</a> //阻止事件默認行爲
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                books: [
                    {id: 1, name: '天龍八部', pubDate: new Date()},
                    {id: 2, name: '射鵰英雄傳', pubDate: new Date()},
                ]
            },
            methods: {
                add(){
                    let book = {id:this.id, name:this.name , pubDate:new Date()};
                    this.books.push(book);
                },
                deleteHandle(index){
                    this.books.splice(index,1);
                }
            }
        });
    </script>
</body>

第二步：實現搜索篩選

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id"/>
        圖書名稱: <input type="text" v-model="name"/>
        <button @click="add">添加</button>

        根據圖書名稱搜索：<input type="text" v-model="kw"/>

        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in search(kw)">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>
                    <a href="" @click.prevent="deleteHandle(index)">刪除</a>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                kw: '',
                books: [
                    {id: 1, name: '天龍八部', pubDate: new Date()},
                    {id: 2, name: '射鵰英雄傳', pubDate: new Date()},
                ]
            },
            methods: {
                add(){
                    let book = {id:this.id, name:this.name , pubDate:new Date()};
                    this.books.push(book);
                },
                search(kw){
                    let result = [];
                    this.books.forEach((item)=>{
                        if (item.name.includes(kw)){
                            result.push(item);
                        }
                    });
                    return result;
                }
            }
        });
    </script>
</body>
==換種方式實現：==
search(kw){
    return this.books.filter((item)=>{
        return item.name.includes(kw);
    })
}

第三步：日期格式化

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id"/>
        圖書名稱: <input type="text" v-model="name"/>
        <button>添加</button>

        根據圖書名稱搜索：<input type="text" v-model="kw"/>

        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate | dateFormat}}</td>
                <td>
                    <a href="">刪除</a>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/moment.js"></script>
    <script type="text/javascript">
        Vue.filter("dateFormat",(value)=>{
            return moment(value).format("YYYY-MM-DD");
        });
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                kw: '',
                books: [
                    {id: 1, name: '天龍八部', pubDate: new Date()},
                    {id: 2, name: '射鵰英雄傳', pubDate: new Date()},
                ]
            }
        });
    </script>
</body>

第四步：優化添加功能

==需求：上面的案例中，咱們須要點擊添加按鈕實現添加一本書，有時候是這樣子的，咱們按下回車鍵也能夠添加，下面就來作這個功能。==

按下enter鍵實現添加方式1

圖書名稱: <input type="text" v-model="name" @keyup.enter="add"/>  // 可行

按下enter鍵實現添加方式2

圖書名稱: <input type="text" v-model="name" @keyup.13="add"/>  // 鍵碼可行

按下F2鍵實現添加方式1

圖書名稱: <input type="text" v-model="name" @keyup.f2="add"/>	// 可行，低版本不可行

按下F2鍵實現添加方式2

圖書名稱: <input type="text" v-model="name" @keyup.113="add"/>	// 可行，經過鍵碼錶明F2可行

按下F2鍵盤實現添加方式3

==經過鍵碼錶明F2可行，可是閱讀性很差，能夠自定義按鍵修飾符，主要是處理低版本Vue的問題。==

圖書名稱: <input type="text" v-model="name" @keyup.f2="add"/>
Vue.config.keyCodes.f2 = 113

第五步：頁面打開的時候就搜索框得到焦點

根據圖書名稱搜索：<input type="text" v-model="kw" v-focus/>
Vue.directive("focus",{
    inserted: function(el){
        el.focus();
    }
});

第五步：實現修改功能

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id" :disabled="disable"/>
        圖書名稱: <input type="text" v-model="name"/>
        <button @click="handle">提交</button>

        根據圖書名稱搜索：<input type="text" v-model="kw"/>

        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>
                    <a href="" @click.prevent="update(book.id)">修改</a>
                    <a href="">刪除</a>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                kw: '',
                disable: false,
                books: [
                    {id: 1, name: '天龍八部', pubDate: new Date()},
                    {id: 2, name: '射鵰英雄傳', pubDate: new Date()},
                ]
            },
            methods: {
                // 添加和修改重用
                handle(){
                    if(this.disable){
                        // 爲true,就表示修改
                        this.books.forEach((item)=>{
                            if(item.id == this.id){
                                item.name = this.name;
                                return item;
                            }
                        });
                        // 修改完畢以後還須要對disable設置爲true表示容許添加
                        this.disable = false;
                        this.id = "";
                        this.name = "";
                    }else{
                        // 就表示添加
                        let book = {id:this.id, name:this.name , pubDate:new Date()};
                        this.books.push(book);
                    }
                },
                update(bookId){
                    // 0、禁止修改id文本框
                    this.disable = true;

                    // 一、根據bookId查找出要編輯的圖書
                    let book = this.books.filter((item)=>{
                        return item.id == bookId;
                    });
                    // 二、把獲取到的圖書填充到表單中
                    this.id = book[0].id;
                    this.name = book[0].name;
                }
            }
        });
    </script>
</body>

第六步：使用計算屬性統計圖書種類

<h1>總共有{{totalCount}}種不一樣種類的書</h1>
computed: {
    totalCount(){
        return this.books.length;
    }
}

第七步：不能添加劇復的圖書【監聽器】

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id" :disabled="disable"/>
        圖書名稱: <input type="text" v-model="name"/>
        <button @click="handle" :disabled="flag">提交</button>

        根據圖書名稱搜索：<input type="text" v-model="kw"/>

        <table border="1">
            <tr>
                <td>圖書編號</td>
                <td>圖書名稱</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>
                    <a href="" @click.prevent="update(book.id)">修改</a>
                    <a href="">刪除</a>
                </td>
            </tr>
        </table>
        <h1>總共有{{totalCount}}種不一樣種類的書</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                kw: '',
                disable: false,
                flag: false,
                books: [
                    {id: 1, name: '天龍八部', pubDate: new Date()},
                    {id: 2, name: '射鵰英雄傳', pubDate: new Date()},
                ]
            },
            computed: {
                totalCount(){
                    return this.books.length;
                }
            },
            methods: {
                // 添加和修改重用
                handle(){
                    if(this.disable){
                        // 爲true,就表示修改
                        this.books.forEach((item)=>{
                            if(item.id == this.id){
                                item.name = this.name;
                                return item;
                            }
                        });
                        // 修改完畢以後還須要對disable設置爲true表示容許添加
                        this.disable = false;
                        this.id = "";
                        this.name = "";
                    }else{
                        // 就表示添加
                        let book = {id:this.id, name:this.name , pubDate:new Date()};
                        this.books.push(book);
                    }
                },
                update(bookId){
                    // 0、禁止修改id文本框
                    this.disable = true;

                    // 一、根據bookId查找出要編輯的圖書
                    let book = this.books.filter((item)=>{
                        return item.id == bookId;
                    });
                    // 二、把獲取到的圖書填充到表單中
                    this.id = book[0].id;
                    this.name = book[0].name;
                }
            },
            watch:{
                name(value){
                    let result = false;
                    this.books.forEach((item)=>{
                        if (item.name == value){
                            result = true;
                            return;
                        }
                    })
                    if (result){
                        console.log("11");
                        this.flag = true;
                    }else{
                        this.flag = false;
                    }
                }
            }
        });
    </script>
</body>

第八步：圖書數據的初始化

mounted(){
    // 模擬ajax請求獲取數據
    let result = [
                {id: 1, name: '天龍八部', pubDate: new Date()},
                {id: 2, name: '射鵰英雄傳', pubDate: new Date()}
                ];

    this.books = result;
},
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程