-
簡介
對於很多剛接觸Vue的同學，最難做到的就是編程思路的切換，這篇博客，帶大家快速的上手Vue的基礎開發。安裝這裏就不具體介紹了，大概就是去官網下載vue源碼包，在本地保存下來，讓後通過script標籤引入vue源碼庫，然後就可以使用了。
-
創建第一個vue實例
<!DOCTYPE html>
<!-- 創建第一個vue實例 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el: '#root', //掛載點
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>
首先我們通過script標籤引入vue，那麼我們就可以創建一個vue實例了，在vue實例中，我們可以傳入一個大參數，參數裏面包含幾個部分，首先是el參數，el的意思是讓vue這個對象去接管頁面上的一個element(元素），讓這個vue實例和具體的dom節點作綁定；而data參數則是存放了vue裏面所有的數據。讓我們來看下頁面運行效果：
這樣，一個簡單的vue實例就完成了，是不是so easy！
-
掛載點，模板與實例
如果el元素和div標籤中的id對應上，那麼div標籤就是這個vue實例的掛載點，vue只會處理掛載點下面的內容，在掛載點內部的內容，我們都稱爲模板內容。模板內容不僅可以寫在掛載點內，還可以寫到vue實例裏面，代碼如下：
<!DOCTYPE html>
<!-- 掛載點，模板，實例之間的關係 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root"></div>
<script>
new Vue({
el: '#root', //掛載點
template: '<h1>hello {{msg}}</h1>',
data: {
msg: 'world'
}
})
</script>
</body>
</html>
效果如下：
-
vue中的數據，事件和方法
如上圖代碼中，我們通過'{{‘開始 ’}}' 結束，中間加個‘msg’的語法，我們叫做插值表達式。我們把msg的值插入到<h1>標籤中，
除了這樣的寫法，我們還有v-text 和v-html指令，代碼如下
<!DOCTYPE html>
<!-- 掛載點，模板，實例之間的關係 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1 v-text="context"></h1><!-- 轉義後的內容 -->
<h1 v-html="context"></h1><!-- 不會轉義 -->
<h1>{{context}}</h1> <!-- {{}} 是v-text的簡寫形式-->
</div>
<script>
new Vue({
el: '#root', //掛載點
data: {
number: 123,
context: '<h1>hello</h1>'
}
})
</script>
</body>
</html>
運行效果：
通過效果展示，就能知道v-text 會轉義，v-html不會轉義，"{{}}"其實是v-text的簡寫形式，那麼如何給模板上的一個標籤綁定一個事件呢，假設我們希望頁面上的內容被點擊了後，由hello變成world。該怎麼做呢，那麼就來講下v-on:click指令,代碼直接附上
<!DOCTYPE html>
<!-- 掛載點，模板，實例之間的關係 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- <div v-on:click="click">{{content}}</div> -->
<div @click="click">{{content}}</div>
</div>
<script>
new Vue({
el: '#root', //掛載點
data: {
content: 'hello'
},
methods: {
click: function () {
this.content = 'world'
}
}
})
</script>
</body>
</html>
我們在掛載點下的div標籤中加入v-on:click指令，當指令被執行的時候，後面要跟一個函數，定義爲click，在vue實例中，要引入函數方法，我們就要定義methods參數，並在裏面定義具體的函數方法
此外v-on:click 可以簡寫爲@click，那麼vue中的數據，事件和方法就介紹完了
-
vue中的屬性綁定和雙向數據綁定
首先我們來看個簡單的實例：
<!DOCTYPE html>
<!-- 屬性綁定和雙向數據綁定 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div title="this is hello world">hello world</div>
</div>
<script>
new Vue({
el: '#root'
})
</script>
</body>
</html>
title是html的一個屬性，當鼠標放在hello world上，會有一個‘this is hello world’提示語，如果我們希望這個提示語可變，該怎麼做呢，那麼我們就來介紹下v-bind指令代碼如下
<!DOCTYPE html>
<!-- 屬性綁定和雙向數據綁定 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="title">hello world</div>
</div>
<script>
new Vue({
el: '#root',
data:{
title:'this is hello world'
}
})
</script>
</body>
</html>
通過v-bind屬性，將當前的title屬性和當前的數據項title進行綁定另外，v-bind:title 可以簡寫爲 :title
接下來我們來講解下雙向數據綁定，在講雙向數據綁定之前，我們先來了解一下單項數據綁定，單項數據綁定的意思是，數據決定頁面的顯示，但頁面無法更改數據的內容。比如：
<!DOCTYPE html>
<!-- 屬性綁定和雙向數據綁定 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="title">hello world</div>
<input :value="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el: '#root',
data:{
title:'this is hello world',
content:"this is content"
}
})
</script>
</body>
</html>
效果：
改變輸入框的內容，div裏面的內容並沒有發生改變。運用雙向數據綁定指令v-model，改變輸入框裏的值，讓div的內容也發生改變。
<!DOCTYPE html>
<!-- 屬性綁定和雙向數據綁定 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="title">hello world</div>
<input v-model="content" />
<div>{{content}}</div>
</div>
<script>
new Vue({
el: '#root',
data:{
title:'this is hello world',
content:"this is content"
}
})
</script>
</body>
</html>
-
v-if、v-show、v-for指令
啥也不多說了，直接上代碼解釋：
<!DOCTYPE html>
<!-- v-if,v-show,v-for -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-if='show'>hello world</div> <!--變量值爲false，元素會清除 -->
<!-- <div v-show='show'>hello world</div> --> <!--變量值爲false，元素不會清除 -->
<button @click="click">toggle</button>
<ul>
<!-- <li v-for="item of list" :key="item">{{item}}</li> -->
<!-- key值提升渲染的效率 ，key值不能相同-->
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: '#root', //掛載點
data: {
show: true,
list: [1, 2, 3]
},
methods: {
click: function () {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
點擊toggle，隱藏hello world，可以通過v-if或者v-show實現
v-if 和 v-show 的區別：
v-if 爲false的時候，dom元素會清除
v-show爲false的時候，元素不會清除，只是加了html標籤display:none
頁面循環展示數據使用v-for，加入:key,可以提升渲染的效率，key要求值都不同，假如循環的數據有相同，則可以加入index，代表每一項的下標。能保證唯一性。