以下是正文。
Vue初體驗
新建一個空的項目，引入vue.js文件。寫如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--這個div區域就是MVVM中的 View-->
<div id="div1">
{{name}}
</div>
</body>
<script>
//new出來的對象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //當前vue對象將接管上面的div區域
data: {//data就是MVVM中的 module
name: 'smyhvae'
}
});
</script>
</html>
顯示效果：
如果我們在控制台輸入myVue.data+='123'，頁面會自動更新name的值。
下面來講一下Vue的各種系統指令。
v-on：注冊事件
v-on 的用法舉例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--這個div區域就是MVVM中的 View-->
<div id="div1">
<!-- 給button節點綁定按鈕的點擊事件 -->
{{name}}
<button v-on:click="change">改變name的值</button>
</div>
</body>
<script>
//new出來的對象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //當前vue對象將接管上面的div區域
data: { //data就是MVVM中的 module
name: 'smyhvae'
},
//注意，下方這個 `methods` 是Vue中定義方法的關鍵字，不能改
methods: {
change: function() { //上面的button按鈕的點擊事件
this.name += '1';
}
}
});
</script>
</html>
上方代碼中，我們給button按鈕綁定了點擊事件。注意，這個button標簽要寫在div區域里（否則點擊事件不生效），因為下方的View module接管的是div區域。
v-on的簡寫形式
例如：
<button v-on:click="change">改變name的值</button>
可以簡寫成：
<button @click="change">改變name的值</button>
v-on的常用事件
-
v-on:click
-
v-on:keydown
-
v-on:keyup
-
v-on:mousedown
-
v-on:mouseover
-
v-on:submit
-
....
v-on的事件修飾符
v-on 提供了很多事件修飾符來輔助實現一些功能。事件修飾符有如下：
-
.stop阻止冒泡。本質是調用 event.stopPropagation()。 -
.prevent阻止默認事件。本質是調用 event.preventDefault()。 -
.capture添加事件監聽器時，使用 capture 模式。 -
.self只有當事件是從偵聽器綁定的元素本身觸發時，才觸發回調。 -
``.{keyCode | keyAlias}` 只當事件是從偵聽器綁定的元素本身觸發時，才觸發回調。
-
``.native` 監聽組件根元素的原生事件。
寫法示范：
<!-- click事件 -->
<button v-on:click="doThis"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>
<!-- 串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
舉例：（.prevent的用法舉例）
現在有一個form表單：
<form action="http://www.baidu.com">
<input type="submit" value="表單提交">
</form>
我們知道，上面這個表單因為type="submit"，因此它是一個提交按鈕，點擊按鈕后，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去。這是表單的默認行為。
現在，我們可以用.prevent來阻止這種默認行為。修改為：點擊按鈕后，不提交到服務器，而是執行我們自己想要的事件（在submit方法中另行定義）。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 阻止表單中submit的默認事件 -->
<form @submit.prevent action="http://www.baidu.com">
<!-- 執行自定義的click事件 -->
<input type="submit" @click="mySubmit" value="表單提交">
</form>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
mySubmit: function() {
alert('ok');
}
}
});
</script>
</html>
上方代碼中，我們通過.prevent阻止了提交按鈕的默認事件，點擊按鈕后，執行的是mySubmit()方法里的內容。這個方法名是可以隨便起的，我們甚至可以起名為submit，反正默認的submit已經失效了。
插值表達式 {{}}
數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值。例如：
<span>Message: {{ msg }}</span>
Mustache 標簽將會被替代為對應數據對象上 msg 屬性（msg定義在data對象中）的值。
無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會自動更新。
{{}}對JavaScript 表達式支持，例如：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ name == 'smyhvae' ? 'true' : 'false' }}
{{ message.split('').reverse().join('') }}
但是有個限制就是，每個綁定都只能包含單個表達式，如下表達式無效：
<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}
v-text
v-text可以將一個變量的值渲染到指定的元素中。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<div id="div1">
<span v-text="name"></span>
</div>
</body>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello smyhvae'
}
});
</script>
</html>
結果：
v-html
v-text是純文本，而v-html會被解析成html元素。
注意：使用v-html渲染數據可能會非常危險，因為它很容易導致 XSS（跨站腳本） 攻擊，使用的時候請謹慎，能夠使用{{}}或者v-text實現的不要使用v-html。
v-cloak
v-cloak：保持和元素實例的關聯，直到結束編譯后自動消失。
這個指令和CSS 規則一起用的時候，可以隱藏未編譯的標簽直到實例准備完畢。比如說，在網絡很慢的情況下，通過v-cloak隱藏元素，當加載完畢后，再顯示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
/*網絡很慢時，在span上加上 v-cloak和css樣式控制以后，瀏覽器在加載時會先把span隱藏起來。
直到 Vue實例化完畢以后，v-cloak 會自動消失，那么對應的css樣式就會失去作用，最終將span中的內容呈現給用戶 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="div1">
<span v-cloak>{{name}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello1 smyhvae22'
}
});
</script>
</html>
v-bind
v-bind：給html元素或者組件動態綁定一個或多個特性，例如動態綁定style和class。
比如說：
<img v-bind:src="imageSrc">
<div v-bind:style="{ fontSize: size + 'px' }"></div>
上方代碼中的imageSrc和size其實是Vue實例里面的變量。
上面兩行代碼可以簡寫成：
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="div1">
<!-- value里的值只是簡單的字符串 -->
<input type="text" value="name">
<!-- 加上 v-bind 之后，value里的值是 Vue 里的變量 -->
<input type="text" v-bind:value="name">
<!-- 超鏈接后面的path是 Vue 里面的變量 -->
<a v-bind="{href:'http://www.baidu.com/'+path}">超鏈接</a>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'smyhvae',
path: `2.html`
}
});
</script>
</html>
效果：
v-model：雙向數據綁定
上面的一段中，我們通過v-bind，給<input>標簽綁定了data對象里的name屬性。當data -> name的值發生改變時，<input>標簽里的內容會自動更新。
可我現在要做的是：我在<input>標簽里修改內容，要求data -> name的值自動更新。從而實現雙向數據綁定。該怎么做呢？這就可以利用v-model這個屬性。
代碼舉例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<form action="#">
<input type="text" id="username" v-model="myAccount.username">
<input type="password" id="pwd" v-model="myAccount.userpwd">
<input type="submit" v-on:click="submit1" value="注冊">
</form>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
//上面的標簽中采用v-model進行雙向數據綁定，數據會自動更新到data里面來
data: {
name: 'smyhvae',
myAccount: {username: '', userpwd: ''}
},
//在methods里綁定各種方法，根據業務需要進行操作
methods: {
submit1: function () {
alert(this.myAccount.username + " pwd=" + this.myAccount.userpwd);
}
}
});
</script>
</html>
此時，便可實現我們剛剛要求的雙向數據綁定的效果。
v-for：for循環
作用：根據數組中的元素遍歷指定模板內容生成內容。
引入
比如說，如果我想給一個ul中的多個li分別賦值1、2、3...。如果不用循環，就要挨個賦值：
<body>
<div id="app">
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3]
}
});
</script>
效果：
為了實現上面的效果，如果我用v-for進行賦值，代碼就簡潔很多了：
<body>
<div id="app">
<ul>
<!-- 使用v-for對多個li進行遍歷賦值 -->
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3]
}
});
</script>
接下來，我們詳細講一下v-for的用法。需要聲明的是，Vue 1.0的寫法和Vue 2.0的寫法是不一樣的。本文全部采用Vue 2.0的寫法
數組的遍歷賦值
針對下面這樣的數組：
<script>
new Vue({
el: '#app',
data: {
arr1: [2, 5, 3, 1, 1],
}
});
</script>
將數組中的值賦給li：
<li v-for="item in arr1">{{item}}</li>
將數組中的值和index賦給li：
<!-- 括號里如果寫兩個參數：第一個參數代表值，第二個參數代表index -->
<li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>
效果如下：
對象的遍歷賦值
針對下面這樣的對象：
<script>
new Vue({
el: '#app',
data: {
obj1: {
name: 'smyhvae',
age: '26',
gender: '男'
}
}
});
</script>
將上面的obj1對象的數據賦值給li，寫法如下：
<body>
<div id="app">
<ul>
<!-- 括號里如果寫兩個參數：則第一個參數代表value，第二個參數代表key -->
<li v-for="(value,key) in obj1">值：{{value}} --- 鍵：{{key}} </li>
<h3>---分隔線---</h3>
<!-- 括號里如果寫三個參數：則第一個參數代表value，第二個參數代表key，第三個參數代表index -->
<li v-for="(value,key,index) in obj1">值：{{value}} --- 鍵：{{key}} --- index：{{index}} </li>
</ul>
</div>
</body>
效果如下：
v-if：設置元素的顯示和隱藏
作用：根據表達式的值的真假條件，來決定是否渲染元素，如果為false則不渲染（達到隱藏元素的目的），如果為true則渲染。
在切換時，元素和它的數據綁定會被銷毀並重建。
舉例如下：（點擊按鈕時，切換和隱藏盒子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="toggle">顯示/隱藏</button>
<div v-if="isShow">我是盒子</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle: function() {
this.isShow = !this.isShow;
}
}
});
</script>
</html>
效果如下：
v-show：設置元素的顯示和隱藏
作用：根據表達式的真假條件，來切換元素的 display 屬性。如果為false，則在元素上添加 display:none屬性；否則移除display:none屬性。
舉例如下：（點擊按鈕時，切換和隱藏盒子）
我們直接把上一段代碼中的v-if改成v-show就可以了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="toggle">顯示/隱藏</button>
<div v-show="isShow">我是盒子</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle: function() {
this.isShow = !this.isShow;
}
}
});
</script>
</html>
效果如下：
v-if和v-show的區別：
v-if和v-show都能夠實現對一個元素的隱藏和顯示操作。但是v-if是添加/刪除DOM元素，而v-show是在這個元素上添加/移除style="display:none"屬性。
我的公眾號
想學習代碼之外的軟技能？不妨關注我的微信公眾號：生命團隊（id：vitateam）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
