大家好，這里是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這里我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、Vue.js 概述
1、什么是Vue.js
Vue.js 是目前最火的一個前端框架，React是最流行的一個前端框架（React除了開發網站，還可以開發手機App， Vue語法也是可以用於進行手機App開發的，需要借助於Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，並成為前端三大主流框架！
Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發）。
在Vue中，一個核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多的時間去關注業務邏輯；
2、框架和庫的區別
框架：是一套完整的解決方案；對項目的侵入性較大，項目如果需要更換框架，則需要重新架構整個項目。
庫（插件）：提供某一個小功能，對項目的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。（比如從 jQuery 切換到 Zepto 等）
3、MVC 與 MVVM 區別與聯系
MVC 是后端的分層開發概念；
M 為數據層，V 視圖層，C 邏輯層。
MVVM是前端視圖層的概念，主要關注於 視圖層分離，也就是說：MVVM把前端的視圖層，分為了 三部分 Model, View , VM ViewModel。
其中 VM 是中間層，負責協調 V 層 和 M 層，V 層即視圖層（對應的就是DOM元素），就是我們的網頁 html 結構，M 層就是網頁里面的數據（對應的就是JavaScript對象）。
下圖為 MVC 和 MVVM 的聯系圖示：
二、Vue.js 基本結構
Vue.js 的基本結構主要分三塊：
1、導入 Vue 的包；
2、body 中的設置一個被 vue 控制的區域（元素）；
3、在 script 中 new 一個 vue 實例，參數為一個對象，對象中一般有三個元素為 el，data，methods
el 則關聯 body 中被 vue 控制的元素的 id 或 類名。
data 則存放頁面的數據；
methods 為頁面事件對象集合。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 導入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 將來 new 的Vue實例，會控制這個 元素中的所有內容 -->
<!-- Vue 實例所控制的這個元素區域，就是我們的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 2. 創建一個Vue的實例
// 當我們導入包之后，在瀏覽器的內存中，就多了一個 Vue 構造函數
// 注意：我們 new 出來的這個 vm 對象，就是我們 MVVM中的 VM調度者
var vm = new Vue({
el: '#app', // 表示，當前我們 new 的這個 Vue 實例，要控制頁面上的哪個區域
// 這里的 data 就是 MVVM中的 M，專門用來保存 每個頁面的數據的
data: { // data 屬性中，存放的是 el 中要用到的數據
msg: '歡迎學習Vue'; // 通過 Vue 提供的指令，很方便的就能把數據渲染到頁面上，程序員不再手動操作DOM元素了【前端的Vue之類的框架，不提倡我們去手動操作DOM元素了】
}
})
</script>
</body>
</html>
{{ msg }} ：在 html 中可以直接使用 雙重大括號 的方式使用 data 中的數據。
三、Vue 指令
1、插值表達式
插值表達式就是以雙重大括號 ，類似 {{ msg }} 的形式插入到 html 代碼中。
2、v-cloak
在 使用 {{ msg }} 的方式插入數據的時候，如果網速特別慢的話， {{ msg }} 所代表的值不會立即顯示出來，而會顯示 {{ msg }} 這個字符串本身，怎么解決這個問題呢？
使用 v-cloak 和 CSS 表達式結合，能夠解決插值表達式閃爍的問題，這樣會在網絡未加載完時，不顯示字符串本身。
示例：
<style>
[v-cloak] {
display: none;
}
</style>
...
<p v-cloak> {{ msg }} </p>
3、v-text
默認 v-text 是沒有閃爍問題的，但是 v-text 會覆蓋元素中原本的內容，而 v-cloak 只會替換插值表達式，不會把 整個元素的內容清空。
<span v-text="msg"></span>
4、v-html
v-text 知識插入的純文本格式內容，而 v-html 可以插入為 html 標簽的代碼，並解析出來。
<span v-html="msg"></span>
...
data: {
msg: '<h1>哈哈，我是一個大大的H1， 我大，我驕傲</h1>'
},
5、v-bind
v-bind 是 Vue中，提供的用於綁定屬性的指令。
注意：
v-bind:指令可以被簡寫為:
<input type="button" value="按鈕" v-bind:title="mytitle + '123'">
...
data: {
mytitle: '這是一個自己定義的title'
},
title 里面的內容就不是字符串了，而是會將 data 中的變量進行替換得到一個字符串整體。
6、v-on
v-on 是 Vue 中的事件綁定機制。
注意：
v-on:指令可以被簡寫為@
<input type="button" value="按鈕" :title="mytitle + '123'" v-on:click="show">
...
data: {
mytitle: '這是一個自己定義的title'
},
methods: { // 這個 methods屬性中定義了當前Vue實例所有可用的方法
show: function () {
alert('Hello')
}
}
在點擊按鈕的時候，會自動調用 methods 中的 show 方法。
案例：字體滾動播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="搖起來" id="btn1" @click="move">
<input type="button" value="停下來" id="btn2" @click="stop">
<h2 v-text="msg"></h2>
</div>
<script>
var vm = new Vue({
el: "#box",
data: {
msg: "落霞與孤鶩齊飛，秋水共長天一色。",
timeId: null
},
methods: {
move: function () {
if (this.timeId != null) {
clearInterval(this.timeId);
}
var that = this;
this.timeId = setInterval(function () {
var start = that.msg.substring(0, 1);
var end = that.msg.substring(1);
that.msg = end + start;
}, 200);
},
stop: function () {
clearInterval(this.timeId);
}
}
});
</script>
</body>
</html>
注意：
1、在 VM 對象實例中，如果想要獲取 data 上的數據，或者 想要調用 methods 中的 方法，必須通過
this.數據屬性名或this.方法名來進行訪問，這里的 this，就表示 我們 new 出來的 VM 實例對象。2、VM實例，會自動監聽自己身上 data 中所有數據的改變，只要數據一發生變化，就會自動把最新的數據，從data 上同步到頁面中去；【好處：程序員只需要關心數據，不需要考慮如何重新渲染DOM頁面】
7、v-model
v-bind 只能實現數據的單向綁定，從 M 自動綁定到 V（即修改 data 的數據，自動同步到 html）， 無法實現數據的雙向綁定。
使用 v-model 指令，可以實現 表單元素和 Model 中數據的雙向數據綁定（不僅可以修改 data 的數據，自動同步到 html，也可以修改 html 的代碼，同步到 data 數據）。
注意： v-model 只能運用在 表單元素中。
示例：
<input type="text" style="width:100%;" v-model="msg">
...
data: {
msg: 'hello vue.'
},
案例：簡單的計算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc: function() { // 計算器算數的方法
// 邏輯：
switch (this.opt) {
case '+':
this.result = parseFloat(this.n1) + parseFloat(this.n2)
break;
case '-':
this.result = parseFloat(this.n1) - parseFloat(this.n2)
break;
case '*':
this.result = parseFloat(this.n1) * parseFloat(this.n2)
break;
case '/':
this.result = parseFloat(this.n1) / parseFloat(this.n2)
break;
}
}
}
});
</script>
</body>
</html>
8、v-for
8.1、v-for 循環普通數組
我們之前如果要循環賦值給 p 標簽 data中 list=[1,2,3,4,5,6]; 數組的話，會這樣寫：
<body>
<div id="app">
<p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {}
});
</script>
</body>
這樣的話，就會很繁瑣。而 v-for 會提供循環遍歷 list 數組來給 p 標簽賦值。如下：
<body>
<div id="app">
<p v-for="(item, i) in list">索引：{{i}} --- 項：{{item}}</p>
<!-- 索引：0 --- 項：1
索引：1 --- 項：2
索引：2 --- 項：3
索引：3 --- 項：4
索引：4 --- 項：5
索引：5 --- 項：6 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {}
});
</script>
</body>
8.2、v-for 循環對象數組
<body>
<div id="app">
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
methods: {}
});
</script>
</body>
8.3、v-for 循環對象
<body>
<div id="app">
<!-- 注意：在遍歷對象身上的鍵值對的時候， 除了 有 val key ,在第三個位置還有 一個 索引 -->
<p v-for="(val, key, i) in user">值是： {{ val }} --- 鍵是： {{key}} -- 索引： {{i}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: 'Tony Stark',
gender: '男'
}
},
methods: {}
});
</script>
</body>
8.4、v-for 循環數字
<body>
<div id="app">
<!-- in 后面我們放過普通數組，對象數組，對象，還可以放數字 -->
<p v-for="count in 10">這是第 {{ count }} 次循環</p>
</div>
<script>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
注意：如果使用 v-for 迭代數字的話，前面的 count 值從 1 開始。
8.5、v-for 循環 key 屬性
key 屬性可以使得每一遍歷的項是唯一的。
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 注意： v-for 循環的時候，key 屬性只能使用 number或者string -->
<!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
<!-- 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須在使用 v-for 的同時，指定 唯一的 字符串/數字 類型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '趙高' },
{ id: 4, name: '韓非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 添加方法
this.list.unshift({ id: this.id, name: this.name })
}
}
});
</script>
</body>
9、v-if/v-show
v-if 和 v-show 都可以控制元素的顯示與否。但是實現原理不同。
v-if：每次都會重新刪除或創建元素。
v-show ： 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式。
所以，如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show；
如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if。
<h3 v-if="true">這是用v-if控制的元素</h3>
<h3 v-show="true">這是用v-show控制的元素</h3>
四、事件修飾符
-
.stop： 阻止冒泡 -
.prevent： 阻止默認事件（比如點擊超鏈接，阻止跳轉到默認網頁） -
.capture： 添加事件偵聽器時使用事件捕獲模式（與冒泡模式相反） -
.self：只當事件在該元素本身（比如不是子元素）觸發時觸發回調 -
.once：事件只觸發一次，之后還原標簽本身的行為。
示例：
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
<!-- 使用 .prevent 阻止默認行為（跳轉到百度首頁） -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a>
<!-- 使用 .capture 實現捕獲觸發事件的機制：跟冒泡相反，從外到里-->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .self 實現只有點擊當前元素時候，才會觸發事件處理函數 -->
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .once 只觸發一次事件處理函數（如下案例只觸發一次點擊事件，之后還原標簽本身的行為） -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a>
</div>
.stop 和 .self 的區別：
<!-- stop 會阻止冒泡行為 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<!-- .self 只會阻止自己身上冒泡行為的觸發，並不會真正阻止冒泡的行為 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
五、Vue中的樣式
1、class 樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- <h1 class="red thin">這是一個很大很大的H1，大到你無法想象！！！</h1> -->
<!-- 第一種使用方式，直接傳遞一個數組，注意： 這里的 class 需要使用 v-bind 做數據綁定 -->
<h1 :class="['thin', 'italic']">這是一個很大很大的H1</h1>
<!-- 在數組中使用三元表達式 -->
<h1 :class="['thin', 'italic', flag?'active':'']">這是一個很大很大的H1</h1>
<!-- 在數組中使用對象來代替三元表達式，提高代碼的可讀性 -->
<h1 :class="['thin', 'italic', {active:flag} ]">這是一個很大很大的H1</h1>
<!-- 在為 class 使用 v-bind 綁定 對象的時候，對象的屬性是類名，由於 對象的屬性可帶引號，也可不帶引號，所以 這里我沒寫引號； 屬性的值 是一個標識符 -->
<h1 :class="classObj">這是一個很大很大的H1</h1>
</div>
<script>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: {
red: true,
thin: true,
italic: false,
active: false
}
},
methods: {}
});
</script>
</body>
</html>
注意：
1、class 樣式需要使用 v-bind 綁定。
2、class 類樣式可以是數組和對象集合。
2、style 樣式
可以是對象，也可以是對象數組。
<body>
<div id="app">
<!-- 對象就是無序鍵值對的集合 -->
<h1 :style="styleObj1">這是一個h1</h1>
<h1 :style="[ styleObj1, styleObj2 ]">這是一個h1</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObj1: {
color: 'red',
'font-weight': 200
},
styleObj2: {
'font-style': 'italic'
}
},
methods: {}
});
</script>
</body>
注意：要綁定到 style 樣式。