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

阿新 • • 發佈：2020-11-19

vue概述

mvvm模式

image-20201001110548401

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

在MVVM之前，開發人員從後端獲取需要的資料模型，然後要通過DOM操作Model渲染到View中。而後當用戶操作檢視，我們還需要通過DOM獲取View中的資料，然後同步到Model中。

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

只要我們Model發生了改變，View上自然就會表現出來。
當用戶修改了View，Model中的資料也會跟著改變。

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

mvvm模式的優勢：

低耦合

檢視（View）可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的"View"上，當View變化時Model可以不變，當Model變化時View也可以不變

可重用性

可以把一些檢視邏輯放在一個ViewModel裡面，讓多個View重用這段檢視邏輯程式碼

獨立開發

開發人員可以專注於業務邏輯和資料的開發（ViewModel），設計人員可以專注於頁面設計。

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

快速入門

安裝vue

下載安裝

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

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

下載解壓，得到vue.js檔案。可以在頁面中直接通過script引入vue.js檔案

使用cdn

或者也可以直接使用公共的CDN服務：

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

或者：

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

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

HTML模板

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<h2>{{name}}，非常酷！</h2>
</div>
<scripttype="text/javascript">
varapp=newVue({
el:"#app",//el即element，要渲染的頁面元素
data:{
name:"Vue測試"
}
});
</script>
</body>
</html>

首先通過new Vue()來建立Vue例項
然後建構函式接收一個物件，物件中有一些屬性：
- el ：是element的縮寫，通過id 選中要渲染的頁面元素，本例中是一個 div
- data：資料，資料是一個物件，裡面有很多屬性，都可以渲染到檢視中
  - name ：這裡指定了一個name屬性
頁面中的 h2 元素中，通過{{name}} 的方式，來渲染剛剛定義的 name 屬性

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

雙向繫結

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

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<inputtype="text"v-model="num">
<h2>
{{name}}，非常酷！
有{{num}}個酷炫功能！
</h2>
</div>
<scripttype="text/javascript">
varapp=newVue({
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操作，這就是雙向繫結的魅力。

事件處理

在頁面新增一個按鈕：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<inputtype="text"v-model="num">
<buttonv-on:click="num++">點我</button>
<h2>
{{name}}，非常酷！
有{{num}}個酷炫功能！
</h2>
</div>
<scripttype="text/javascript">
varapp=newVue({
el:"#app",//el即element，要渲染的頁面元素
data:{
name:"Vue測試",
num:1
}
});
</script>
</body>
</html>

這裡用 v-on 指令繫結點選事件，而不是普通的 onclick ，然後直接操作num
普通onclick是無法直接操作num的

Vue 例項

建立Vue例項

每個 Vue 應用都是通過用 Vue 函式建立一個新的 Vue 例項開始的：

varvm=newVue({
//選項
})

在建構函式中傳入一個物件，並且在物件中宣告各種Vue需要的資料和方法，包括：

el
data
methods
… …等

接下來，一一介紹。

模板或元素

每個Vue例項都需要關聯一段Html模板，Vue會基於此模板進行檢視渲染；可以通過el屬性來指定。

例如一段html模板：

<divid="app">

</div>

然後建立Vue例項，關聯這個div

varvm=newVue({
el:"#app"
})

這樣，Vue就可以基於id為 app 的div元素作為模板進行渲染了。在這個div範圍以外的部分是無法使用vue特性的。

資料

當Vue例項被建立時，它會嘗試獲取在data中定義的所有屬性，用於檢視的渲染，並且監視data中的屬性變化，當data發生改變，所有相關的檢視都將重新渲染，這就是“響應式“系統。

html：

<divid="app">
<inputtype="text"v-model="name"/>
</div>

js：

varvm=newVue({
el:"#app",
data:{
name:"ZHANGSAN"
}
})

name的變化會影響到 input 的值
input中輸入的值，也會導致vm中的name發生改變

方法

Vue例項中除了可以定義data屬性，也可以定義方法，並且在Vue的作用範圍內使用。

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<buttonv-on:click="add">點我</button>
</div>
<scripttype="text/javascript">
varapp=newVue({
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例項到底執行了那些操作，我們先看下面執行的例子

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs生命週期</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
{{message}}
</div>
<scripttype="text/javascript">
varvm=newVue({
el:"#app",
data:{
message:'helloworld'
},
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);
}
});

functionshowData(process,obj){
console.log(process);
console.log('data資料：'+obj.message)
console.log('掛載的物件：')
console.log(obj.$el)
}
</script>
</body>
</html>

鉤子函式

例如：created代表在vue例項建立後；

可以在Vue中定義一個created函式，代表這個時期的建構函式：

建立示例html頁面如下：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
{{msg}}
</div>
<scripttype="text/javascript">
letapp=newVue({
el:"#app",
data:{
//初始化為空
msg:""
},
//鉤子函式
created(){
//this表示Vue例項
this.msg="hellovue.created";
console.log(this)
}
});
</script>
</body>
</html>

this

可以看下在vue內部的this變數是誰，在created的時候，列印this

varapp=newVue({
el:"#app",
data:{
msg:""
},
//鉤子函式
created(){
//this表示vue例項
this.msg="hellovue.created.";
console.log(this);
}
});

控制檯的輸出；總結： this 就是當前的Vue例項，在Vue物件內部，必須使用 this 才能訪問到Vue中定義的data內屬性、方法等。

應用場景

在beforeCreate生命週期函式執行時，可以新增loading動畫
在created生命週期函式執行時，可以結束loading動畫，還可以做一些初始化，實現函式自執行等操作
最經常使用的是mounted生命週期函式

可以發起後端資料請求，取回資料

可以接收頁面之間傳遞的引數

可以子元件向父元件傳遞引數等

指令

什麼是指令？

指令 (Directives) 是帶有 v- 字首的特殊屬性。例如在入門案例中的v-model，代表雙向繫結。

插值表示式

花括號

格式：

{{表示式}}

說明：

該表示式支援JS語法，可以呼叫js內建函式（必須有返回值）
表示式必須有返回結果。例如 1 + 1，沒有結果的表示式不允許使用，如：var a = 1 + 1;
可以直接獲取Vue例項中定義的資料或函式

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
{{msg}}
</div>
<scripttype="text/javascript">
varapp=newVue({
el:"#app",
data:{
msg:"hellovue."
}
});
</script>
</body>
</html>

插值閃爍

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

v-text 和 v-html

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

說明：

v-text：將資料輸出到元素內部，如果輸出的資料有HTML程式碼，會作為普通文字輸出
v-html：將資料輸出到元素內部，如果輸出的資料有HTML程式碼，會被渲染

示例，改造原頁面內容：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<!--{{msg}}-->
v-text：<spanv-text="msg"></span><br/>
v-html：<spanv-html="msg"></span><br/>
</div>
<scripttype="text/javascript">
varapp=newVue({
el:"#app",
data:{
//msg:"hellovue."
msg:"<h2>hellovue.</h2>"
}
});
</script>
</body>
</html>

並且不會出現插值閃爍，當沒有資料時，會顯示空白。

v-model

剛才的v-text和v-html可以看做是單向繫結，資料影響了檢視渲染，但是反過來就不行。

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

既然是雙向繫結，一定是在檢視中可以修改資料，這樣就限定了檢視的元素型別。

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

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

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

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<inputtype="checkbox"value="Java"v-model="language">Java<br/>
<inputtype="checkbox"value="PHP"v-model="language">PHP<br/>
<inputtype="checkbox"value="Swift"v-model="language">Swift<br/>
<h2>
你選擇了：{{language.join(",")}}
</h2>
</div>
<scripttype="text/javascript">
letapp=newVue({
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片段或函式名"

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<!--直接寫js片段-->
<button@click="num++">增加</button>
<!--使用函式名，該函式必須要在vue例項中定義-->
<button@click="decrement">減少</button>
<h2>
num={{num}}
</h2>
</div>
<scripttype="text/javascript">
letapp=newVue({
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 ：只執行一次

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<!--直接寫js片段-->
<button@click="num++">增加</button>
<!--使用函式名，該函式必須要在vue例項中定義-->
<button@click="decrement">減少</button>
<h2>
num={{num}}
</h2>
<hr>
事件冒泡測試：<br/>
<divstyle="background-color:lightblue;width:100px;height:100px"@click="print('div被點選了')">
<button@click.stop="print('點選了button')">點我試試</button>
</div>
<br>阻止預設事件：<br>
<ahref="http://www.baidu.com"@click.prevent="print('點選了超連結')">百度</a>
</div>
<scripttype="text/javascript">
letapp=newVue({
el:"#app",
data:{
num:1
},
methods:{
decrement(){
this.num--;
},
print(str){
console.log(str);
}
}
});
</script>
</body>
</html>

v-for

遍歷資料渲染頁面是非常常用的需求，Vue中通過v-for指令來實現。

遍歷陣列

語法：

v-for="iteminitems"

items：要遍歷的陣列，需要在vue的data中定義好。
item：迴圈變數

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<ul>
<liv-for="userinusers">
{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<scripttype="text/javascript">
letapp=newVue({
el:"#app",
data:{
users:[
{"name":"小明","age":13,"gender":"男"},
{"name":"小紅","age":13,"gender":"女"},
{"name":"小綠","age":4,"gender":"男"}
]
}
});
</script>
</body>
</html>

陣列角標

在遍歷的過程中，如果需要知道陣列角標，可以指定第二個引數：

語法：

v-for="(item,index)initems"

items：要迭代的陣列
item：迭代得到的陣列元素別名
index：迭代到的當前元素索引，從0開始。

示例：

<divid="app">
<ul>
<liv-for="(user,index)inusers">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>

遍歷物件

v-for除了可以迭代陣列，也可以迭代物件。語法基本類似

語法：

v-for="valueinobject"
v-for="(value,key)inobject"
v-for="(value,key,index)inobject"

1個引數時，得到的是物件的值
2個引數時，第一個是值，第二個是鍵
3個引數時，第三個是索引，從0開始示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<ul>
<liv-for="userinusers">
{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>

<hr>

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

<hr>

<ul>
<!--1個引數時，得到的是物件的值-->
<liv-for="valueinperson">
{{value}}
</li>
</ul>
<hr>
<ul>
<!--2個引數時，第一個是值，第二個是鍵-->
<liv-for="(value,key)inperson">
{{value}}--{{key}}
</li>
</ul>
<hr>
<ul>
<!--3個引數時，第三個是索引，從0開始-->
<liv-for="(value,key,index)inperson">
{{value}}--{{key}}--{{index}}
</li>
</ul>

</div>
<scripttype="text/javascript">
letapp=newVue({
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>
<liv-for="(item,index)initems":key="index"></li>
</ul>

這裡使用了一個特殊語法： :key="" 後面會講到，它可以讓你讀取vue中的屬性，並賦值給key屬性
這裡繫結的key是陣列的索引，應該是唯一的

v-if 和 v-show

基本使用

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

語法：

v-if="布林表示式"

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">

<button@click="show=!show">點我</button>
<h2v-if="show">
hellovuejs.
</h2>
</div>
<scripttype="text/javascript">
letapp=newVue({
el:"#app",
data:{
show:true
}
});
</script>
</body>
</html>

與 v-for 結合

當v-if和v-for出現在一起時，v-for優先順序更高。也就是說，會先遍歷，再判斷條件。

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">

<button@click="show=!show">點我</button>
<h2v-if="show">
hellovuejs.
</h2>
<hr>
<ul>
<liv-for="(user,index)inusers"v-if="user.gender=='女'":key="index"style="background-color:deeppink">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<scripttype="text/javascript">
letapp=newVue({
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 塊”：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">

<button@click="show=!show">點我</button>
<h2v-if="show">
hellovuejs.
</h2>
<hr>
<ulv-if="show">
<liv-for="(user,index)inusers"v-if="user.gender=='女'":key="index"style="background-color:deeppink">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
<liv-elsestyle="background-color:blue">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<scripttype="text/javascript">
letapp=newVue({
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 塊”，可以連續使用：

<divv-if="type==='A'">
A
</div>
<divv-else-if="type==='B'">
B
</div>
<divv-else-if="type==='C'">
C
</div>
<divv-else>
NotA/B/C
</div>

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

v-show

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

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

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

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<button@click="show=!show">點我</button>
<h2v-if="show">
hellovuejs.
</h2>
<hr>
<ulv-if="show">
<liv-for="(user,index)inusers"v-if="user.gender=='女'":key="index"style="background-color:deeppink">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
<liv-elsestyle="background-color:blue">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
<hr>
<h2v-show="show">
你好，世界！
</h2>
</div>
<scripttype="text/javascript">
letapp=newVue({
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資料

看這樣一個案例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
<styletype="text/css">
div{
width:100px;
height:100px;
color:white;
}

.red{
background-color:red;
}

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

解讀：

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

該如何實現？

大家可能會這麼想，既然color值會動態變化為不同的class名稱，那麼我們直接把color注入到class屬性就好了，於是就這樣寫：

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

這樣寫是錯誤的！因為插值表示式不能用在標籤的屬性中。

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

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

例如，在這裡我們可以寫成：

<divv-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，則不生效。

之前的案例可以改寫成這樣：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
<styletype="text/css">
div{
width:100px;
height:100px;
color:white;
}

.red{
background-color:red;
}

.blue{
background-color:blue;
}
</style>
</head>
<body>
<divid="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>
<scripttype="text/javascript">
letapp=newVue({
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的樣式則需要如下處理：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<divid="app">
<h2>
你的生日是：
{{newDate(birthday).getFullYear()}}-{{newDate(birthday).getMonth()+1}}-{{newDate(birthday).getDay()}}
</h2>
</div>
<scripttype="text/javascript">
letapp=newVue({
el:"#app",
data:{
birthday:1429032123201
}
});
</script>
</body>
</html>

雖然能得到結果，但是非常麻煩。

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

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>

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

</div>
<scripttype="text/javascript">
letapp=newVue({
el:"#app",
data:{
birthday:1429032123201
},
computed:{
birth(){
constdate=newDate(this.birthday);
returndate.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDay();
}
}
});
</script>
</body>
</html>

計算屬性本質就是方法，但是一定要返回資料。然後頁面渲染時，可以把這個方法當成一個變數來使用。

過濾器

說明

官方說法：Vue.js 允許你自定義過濾器，可被用於一些常見的==文字格式化==。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示。

通俗的來說：過濾器是對即將顯示的資料做進一步的篩選處理，然後進行顯示，值得注意的是過濾器並沒有改變原來的資料，只是在原資料的基礎上產生新的資料。

過濾器的種類：

全域性過濾器
區域性過濾器

過濾器的使用步驟

定義過濾器

全域性過濾器

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

區域性過濾器

newVue({
filters:{
'過濾器名稱':function(value[,param1,...]){
//邏輯程式碼
}
}
})

應用過濾器

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

過濾器不帶引數

案例1：日期格式化

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

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

constapp=newVue({
el:"#myDiv",
data:{
birthday:newDate()
}
});
</script>
</body>

案例2：文字格式化

<body>
<divid="myDiv">
{{message|messageFormat}}<br/>
{{message}}//值並沒有改變
</div>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">

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

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

過濾器帶引數

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

Vue.filter("dateFormat",function(value,pattern="YYYY-MM-DDHH:mm:ss"){
returnmoment(value).format(pattern);
});

constapp=newVue({
el:"#myDiv",
data:{
birthday:newDate()
}
});
</script>
</body>

watch

監控

watch可以讓我們監控一個值的變化。從而做出相應的反應。

示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<divid="app">
<inputv-model="message">
</div>
<scripttype="text/javascript">
letapp=newVue({
el:"#app",
data:{
message:"hellovue"
},
watch:{
message(newValue,oldValue){
console.log("新值："+newValue+"；舊值："+oldValue)
}
}
});
</script>
</body>
</html>

深度監控

如果監控的是一個物件，需要進行深度監控，才能監控到物件中屬性的變化，例如：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<divid="app">
<inputtype="text"v-model="message">
<hr>
<br>
<inputtype="text"v-model="person.name"><br>
<inputtype="text"v-model="person.age">
<button@click="person.age++">+</button>
<h2>
姓名為：{{person.name}}；年齡為：{{person.age}}
</h2>
</div>
<scripttype="text/javascript">
letapp=newVue({
el:"#app",
data:{
message:"hellovue",
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方法來定義一個全域性元件。

<divid="app">
<!--使用定義好的全域性元件-->
<counter></counter>
</div>
<scriptsrc="./node_modules/vue/dist/vue.js"></script>
<scripttype="text/javascript">
//定義全域性元件，兩個引數：1，元件名稱。2，元件引數
Vue.component("counter",{
template:'<buttonv-on:click="count++">你點了我{{count}}次，我記住了.</button>',
data(){
return{
count:0
}
}
})
varapp=newVue({
el:"#app"
})
</script>

元件其實也是一個Vue例項，因此它在定義時也會接收：data、methods、生命週期函式等
不同的是元件不會與頁面的元素繫結，否則就無法複用了，因此沒有el屬性。
但是元件渲染需要html模板，所以增加了template屬性，值就是HTML模板
全域性元件定義完畢，任何vue例項都可以直接在HTML中通過元件名稱來使用元件了。
data必須是一個函式，不再是一個物件。

元件的複用

定義好的元件，可以任意複用多次：

<divid="app">
<!--使用定義好的全域性元件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>

你會發現每個元件互不干擾，都有自己的count值。怎麼實現的？

元件的data屬性必須是函式！

當我們定義這個counter元件時，它的data 並不是像這樣直接提供一個物件：

data:{
count:0
}

取而代之的是，一個元件的 data 選項必須是一個函式，因此每個例項可以維護一份被返回物件的獨立的拷貝：

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

如果 Vue 沒有這條規則，點選一個按鈕就會影響到其它所有例項！

區域性註冊

一旦全域性註冊，就意味著即便以後你不再使用這個元件，它依然會隨著Vue的載入而載入。

因此，對於一些並不頻繁使用的元件，我們會採用區域性註冊。

我們先在外部定義一個物件，結構與建立元件時傳遞的第二個引數一致：

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

然後在Vue中使用它：

varapp=newVue({
el:"#app",
components:{
counter:counter//將定義的物件註冊為元件
}
})

components就是當前vue物件子元件集合。
- 其key就是子元件名稱
- 其值就是元件物件的屬性
效果與剛才的全域性註冊是類似的，不同的是，這個counter元件只能在當前的Vue例項中使用

元件通訊

通常一個單頁應用會以一棵巢狀的元件樹的形式來組織：

image-20201001195026231

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

各個元件之間以巢狀的關係組合在一起，那麼這個時候不可避免的會有元件間通訊的需求。

父向子傳遞

父元件使用子元件時，自定義屬性（屬性名任意，屬性值為要傳遞的資料）
子元件通過props接收父元件屬性

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

<divid="app">
<h1>打個招呼：</h1>
<!--使用子元件，同時傳遞title屬性-->
<introducetitle="父元件傳遞的訊息"/>
</div>
<scriptsrc="./node_modules/vue/dist/vue.js"></script>
<scripttype="text/javascript">
Vue.component("introduce",{
//直接使用props接收到的屬性來渲染頁面
template:'<h1>{{title}}</h1>',
props:['title']//通過props來接收一個父元件傳遞的屬性
})
varapp=newVue({
el:"#app"
})
</script>

傳遞複雜資料

我們定義一個子元件，並接受複雜資料：

constmyList={
template:'\
<ul>\
<liv-for="iteminitems":key="item.id">{{item.id}}:{{item.name}}</li>\
</ul>\
',
props:{
items:{
type:Array,
default:[],
required:true
}
}
};

這個子元件可以對 items 進行迭代，並輸出到頁面。
props：定義需要從父元件中接收的屬性
- items：是要接收的屬性名稱
  - type：限定父元件傳遞來的必須是陣列
  - default：預設值
  - required：是否必須

我們在父元件中使用它：

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

子向父的通訊

來看這樣的一個案例：

<divid="app">
<h2>num:{{num}}</h2>
<!--使用子元件的時候，傳遞num到子元件中-->
<counter:num="num"></counter>
</div>
<scriptsrc="./node_modules/vue/dist/vue.js"></script>
<scripttype="text/javascript">
Vue.component("counter",{//子元件，定義了兩個按鈕，點選數字num會加或減
template:'\
<div>\
<button@click="num++">加</button>\
<button@click="num--">減</button>\
</div>',
props:['num']//count是從父元件獲取的。
})
varapp=newVue({
el:"#app",
data:{
num:0
}
})
</script>

子元件接收父元件的num屬性
子元件定義點選按鈕，點選後對num進行加或減操作

我們嘗試執行，好像沒問題，點選按鈕試試：

image-20201001200426862

子元件接收到父元件屬性後，預設是不允許修改的。怎麼辦？

既然只有父元件能修改，那麼加和減的操作一定是放在父元件：

varapp=newVue({
el:"#app",
data:{
num:0
},
methods:{//父元件中定義操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})

但是，點選按鈕是在子元件中，那就是說需要子元件來呼叫父元件的函式，怎麼做？

我們可以通過v-on指令將父元件的函式繫結到子元件上：

<divid="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

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

<divid="app">
<span>登入</span>
<span>註冊</span>
<hr/>
<div>
登入頁/註冊頁
</div>
</div>
<scriptsrc="../node_modules/vue/dist/vue.js"></script>
<scripttype="text/javascript">
varvm=newVue({
el:"#app"
})
</script>

編寫登入及註冊元件

接下來我們來實現登入元件，以前我們都是寫在一個檔案中，但是為了複用性，開發中都會把元件放入獨立的JS檔案中，我們新建一個user目錄以及login.js及register.js。

編寫元件，這裡我們只寫模板，不寫功能。

constloginForm={
template:'\
<div>\
<h2>登入頁</h2>\
使用者名稱：<inputtype="text"><br/>\
密碼：<inputtype="password"><br/>\
</div>\
'
}

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

在父元件中引用

<divid="app">
<span>登入</span>
<span>註冊</span>
<hr/>
<div>
<!--<loginForm></loginForm>-->
<!--
疑問：為什麼不採用上面的寫法？
由於html是大小寫不敏感的，如果採用上面的寫法，則被認為是<loginform></loginform>
所以，如果是駝峰形式的元件，需要把駝峰轉化為“-”的形式
-->
<login-form></login-form>
<register-form></register-form>
</div>
</div>
<scriptsrc="../node_modules/vue/dist/vue.js"></script>
<scriptsrc="user/login.js"></script>
<scriptsrc="user/register.js"></script>
<scripttype="text/javascript">
varvm=newVue({
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中引入依賴：

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

快速入門

新建vue-router物件，並且指定路由規則：

//建立VueRouter物件
constrouter=newVueRouter({
routes:[//編寫路由規則
{
path:"/login",//請求路徑
component:loginForm//元件名稱
},
{path:"/register",component:registerForm},
]
})

建立VueRouter物件，並指定路由引數
routes：路由規則的陣列，可以指定多個物件，每個物件是一條路由規則，包含以下屬性：
- path：路由的路徑
- component：元件名稱

在父元件中引入router物件：

varvm=newVue({
el:"#app",
components:{//引用登入和註冊元件
loginForm,
registerForm
},
router//引用上面定義的router物件
})

頁面跳轉控制：

<divid="app">
<!--router-link來指定跳轉的路徑-->
<span><router-linkto="/login">登入</router-link></span>
<span><router-linkto="/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('元件名',{

})
newVue({})

缺點

全域性定義元件的名字時不能重複
字串模板 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://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>
<divid="app">
<h1>{{title}}</h1>
<ul>
<liv-for="itemincartList":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>
importMyCartfrom'./components/Cart';
exportdefault{
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>
<tableborder="1">
<tr>
<th>#</th>
<th>課程</th>
<th>單價</th>
<th>數量</th>
<th>總價</th>
</tr>
<trv-for="(c,index)incartList":key="c.id">
<td>
<inputtype="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>
<tdcolspan="2">{{activeCount}}/{{count}}</td>
<tdcolspan="2">¥{{total}}</td>
</tr>
</table>
</div>
</template>

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


<stylescoped>

</style>

Vuejs Ajax

Vuejs 並沒有直接處理ajax的元件，但可以使用axios元件實現對非同步請求的操作。

Axios簡介

#如果使用npm則可以如下安裝
npminstallaxios

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引數
//必須是一個無格式物件(plainobject)或URLSearchParams物件
params:{
ID:12345
},

//`data`是作為請求主體被髮送的資料
//只適用於這些請求方法'PUT','POST',和'PATCH'
//在沒有設定`transformRequest`時，必須是以下型別之一：
//-string,plainobject,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)

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>vuejs測試</title>
<scriptsrc="node_modules/vue/dist/vue.js"></script>
<scriptsrc="js/axios.min.js"></script>
</head>
<body>
<divid="app">
<ul>
<liv-for="(user,index)inusers":key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<scripttype="text/javascript">
varapp=newVue({
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>
<divid="myDiv">
<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>價格</td>
<td>購買數量</td>
<td>操作</td>
</tr>
<trv-for="bookinbooks">
<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>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
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>
<divid="myDiv">
<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>價格</td>
<td>購買數量</td>
<td>操作</td>
</tr>
<trv-for="bookinbooks">
<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>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
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>
<divid="myDiv">
<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>價格</td>
<td>購買數量</td>
<td>操作</td>
</tr>
<trv-for="bookinbooks">
<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>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
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>
<divid="myDiv">
<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>價格</td>
<td>購買數量</td>
<td>操作</td>
</tr>
<trv-for="bookinbooks">
<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>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
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>
<divid="myDiv">
<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>價格</td>
<td>購買數量</td>
<td>操作</td>
</tr>
<trv-for="(book,index)inbooks">
<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>
<h2v-if="books.length<=0">
購物車空空如也
</h2>
</div>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
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>
<divid="myDiv">
<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>價格</td>
<td>購買數量</td>
<td>操作</td>
</tr>
<trv-for="(book,index)inbooks">
<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>
<h2v-if="books.length<=0">
購物車空空如也
</h2>
</div>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
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(){
returnthis.books.reduce((sum,book)=>{
returnsum+book.price;
},0)
}
}
});
</script>
</body>

圖書管理綜合案例

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

<body>
<divid="myDiv">
id:<inputtype="text"v-model="id"/>
圖書名稱:<inputtype="text"v-model="name"/>
<button@click="add">新增</button>
<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<trv-for="(book,index)inbooks">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<ahref=""@click.prevent="deleteHandle(index)">刪除</a>//阻止事件預設行為
</td>
</tr>
</table>
</div>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
el:"#myDiv",
data:{
id:'',
name:'',
books:[
{id:1,name:'天龍八部',pubDate:newDate()},
{id:2,name:'射鵰英雄傳',pubDate:newDate()},
]
},
methods:{
add(){
letbook={id:this.id,name:this.name,pubDate:newDate()};
this.books.push(book);
},
deleteHandle(index){
this.books.splice(index,1);
}
}
});
</script>
</body>

第二步：實現搜尋篩選

<body>
<divid="myDiv">
id:<inputtype="text"v-model="id"/>
圖書名稱:<inputtype="text"v-model="name"/>
<button@click="add">新增</button>

根據圖書名稱搜尋：<inputtype="text"v-model="kw"/>

<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<trv-for="(book,index)insearch(kw)">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<ahref=""@click.prevent="deleteHandle(index)">刪除</a>
</td>
</tr>
</table>
</div>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
el:"#myDiv",
data:{
id:'',
name:'',
kw:'',
books:[
{id:1,name:'天龍八部',pubDate:newDate()},
{id:2,name:'射鵰英雄傳',pubDate:newDate()},
]
},
methods:{
add(){
letbook={id:this.id,name:this.name,pubDate:newDate()};
this.books.push(book);
},
search(kw){
letresult=[];
this.books.forEach((item)=>{
if(item.name.includes(kw)){
result.push(item);
}
});
returnresult;
}
}
});
</script>
</body>

==換種方式實現：==

search(kw){
returnthis.books.filter((item)=>{
returnitem.name.includes(kw);
})
}

第三步：日期格式化

<body>
<divid="myDiv">
id:<inputtype="text"v-model="id"/>
圖書名稱:<inputtype="text"v-model="name"/>
<button>新增</button>

根據圖書名稱搜尋：<inputtype="text"v-model="kw"/>

<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<trv-for="(book,index)inbooks">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate|dateFormat}}</td>
<td>
<ahref="">刪除</a>
</td>
</tr>
</table>
</div>
<scriptsrc="../js/vue.js"></script>
<scriptsrc="../js/moment.js"></script>
<scripttype="text/javascript">
Vue.filter("dateFormat",(value)=>{
returnmoment(value).format("YYYY-MM-DD");
});
constapp=newVue({
el:"#myDiv",
data:{
id:'',
name:'',
kw:'',
books:[
{id:1,name:'天龍八部',pubDate:newDate()},
{id:2,name:'射鵰英雄傳',pubDate:newDate()},
]
}
});
</script>
</body>

第四步：優化新增功能

==需求：上面的案例中，我們需要點選新增按鈕實現新增一本書，有時候是這樣子的，我們按下回車鍵也可以新增，下面就來做這個功能。==

按下enter鍵實現新增方式1

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

按下enter鍵實現新增方式2

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

按下F2鍵實現新增方式1

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

按下F2鍵實現新增方式2

圖書名稱:<inputtype="text"v-model="name"@keyup.113="add"/>//可行，通過鍵碼代表F2可行

按下F2鍵盤實現新增方式3

==通過鍵碼代表F2可行，但是閱讀性不好，可以自定義按鍵修飾符，主要是處理低版本Vue的問題。==

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

第五步：頁面開啟的時候就搜尋框獲得焦點

根據圖書名稱搜尋：<inputtype="text"v-model="kw"v-focus/>

Vue.directive("focus",{
inserted:function(el){
el.focus();
}
});

第五步：實現修改功能

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

根據圖書名稱搜尋：<inputtype="text"v-model="kw"/>

<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<trv-for="(book,index)inbooks">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<ahref=""@click.prevent="update(book.id)">修改</a>
<ahref="">刪除</a>
</td>
</tr>
</table>
</div>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
el:"#myDiv",
data:{
id:'',
name:'',
kw:'',
disable:false,
books:[
{id:1,name:'天龍八部',pubDate:newDate()},
{id:2,name:'射鵰英雄傳',pubDate:newDate()},
]
},
methods:{
//新增和修改重用
handle(){
if(this.disable){
//為true,就表示修改
this.books.forEach((item)=>{
if(item.id==this.id){
item.name=this.name;
returnitem;
}
});
//修改完畢之後還需要對disable設定為true表示允許新增
this.disable=false;
this.id="";
this.name="";
}else{
//就表示新增
letbook={id:this.id,name:this.name,pubDate:newDate()};
this.books.push(book);
}
},
update(bookId){
//0、禁止修改id文字框
this.disable=true;

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

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

<h1>總共有{{totalCount}}種不同種類的書</h1>

computed:{
totalCount(){
returnthis.books.length;
}
}

第七步：不能新增重複的圖書【監聽器】

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

根據圖書名稱搜尋：<inputtype="text"v-model="kw"/>

<tableborder="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<trv-for="(book,index)inbooks">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<ahref=""@click.prevent="update(book.id)">修改</a>
<ahref="">刪除</a>
</td>
</tr>
</table>
<h1>總共有{{totalCount}}種不同種類的書</h1>
</div>
<scriptsrc="../js/vue.js"></script>
<scripttype="text/javascript">
constapp=newVue({
el:"#myDiv",
data:{
id:'',
name:'',
kw:'',
disable:false,
flag:false,
books:[
{id:1,name:'天龍八部',pubDate:newDate()},
{id:2,name:'射鵰英雄傳',pubDate:newDate()},
]
},
computed:{
totalCount(){
returnthis.books.length;
}
},
methods:{
//新增和修改重用
handle(){
if(this.disable){
//為true,就表示修改
this.books.forEach((item)=>{
if(item.id==this.id){
item.name=this.name;
returnitem;
}
});
//修改完畢之後還需要對disable設定為true表示允許新增
this.disable=false;
this.id="";
this.name="";
}else{
//就表示新增
letbook={id:this.id,name:this.name,pubDate:newDate()};
this.books.push(book);
}
},
update(bookId){
//0、禁止修改id文字框
this.disable=true;

//1、根據bookId查找出要編輯的圖書
letbook=this.books.filter((item)=>{
returnitem.id==bookId;
});
//2、把獲取到的圖書填充到表單中
this.id=book[0].id;
this.name=book[0].name;
}
},
watch:{
name(value){
letresult=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請求獲取資料
letresult=[
{id:1,name:'天龍八部',pubDate:newDate()},
{id:2,name:'射鵰英雄傳',pubDate:newDate()}
];

this.books=result;
},