介紹
Vue是一套用於構建用戶界面的漸進式框架。Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
用法
1、Vue實例
1<body>
2 <div id="root">{{msg}}</div>
3
4 <script>
5 new Vue({
6 el: "#root",
7 data: {
8 msg: "hello world"
9 },
10 methods{
11
12 }
13 })
14 </script>
15</body>上述代碼中，在script標籤中實例化了一個Vue對象，該Vue對象和id爲root的div標籤綁定了，所以可以通過Vue來操作這個div標籤。data中存放的數據可供div調用，這樣可以動態的修改div中的數據；methods中用於存放各種方法，供標籤調用。div標籤又被稱作掛載點；{{}}被稱作插值表達式。
2、Vue中的數據、事件和方法
- v-text：用於操作純文本，它會替代顯示對應的數據對象上的值，它可以用{{}}來簡寫。
1<body>
2 <div id="root">
3 <h1 v-text="number"></h1>
4 </div>
5
6 <script>
7 new Vue({
8 el: "#root",
9 data: {
10 msg: "hello world",
11 number: "123"
12 }
13 })
14 </script>
15</body>- v-html：用於輸出html，它與v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。
1<body>
2 <div id="root">
3 <h1 v-text="number"></h1>
4 <h1 v-html="content"></h1>
5 </div>
6
7 <script>
8 new Vue({
9 el: "#root",
10 data: {
11 msg: "hello world",
12 number: "123",
13 content: "<h1>hello world</h1>"
14 }
15 })
16 </script>
17</body>- v-on:事件名稱：用來綁定一個事件監聽器，通過它調用我們Vue實例中定義的方法。v-on:可以簡寫成@符號。
1<body>
2
3 <div id="root">
4 <div @click="handleClick">{{content}}</div>
5 </div>
6
7 <script>
8 new Vue({
9 el: "#root",
10 data: {
11 content: "hello"
12 },
13 methods: {
14 handleClick: function() {
15 this.content = "world"
16 }
17 }
18 })
19 </script>
20</body>3、屬性綁定和雙向數據綁定
- v-bind:屬性名稱：它可以往元素的屬性中綁定數據，也可以動態地根據數據爲元素綁定不同的樣式。v-bind:可以簡寫成:符號。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 </div>
6
7 <script>
8 new Vue({
9 el: "#root",
10 data: {
11 content: "hello world",
12 title:"I'm hello world"
13 }
14 })
15 </script>
16</body>- v-model：該指令綁定的元素就是組件的輸出結果。一般用於表單組件，當輸入框中的內容改變時，文本也跟着改變。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 </div>
8
9 <script>
10 new Vue({
11 el: "#root",
12 data: {
13 content: "hello world",
14 title:"I'm hello world",
15 vcontent:"I'm v-model"
16 }
17 })
18 </script>
19</body>4、計算屬性和偵聽器
- computed：比較適合對多個變量或者對象進行處理後返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化。如果監測的值沒有發生改變的話，那麼會再次使用這個結果值時不會去再次計算，而是使用上次的緩存值。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 姓：<input v-model="firstName" /> 名：<input v-model="lastName" />
8 <div>{{fullName}}</div>
9 </div>
10
11 <script>
12 new Vue({
13 el: "#root",
14 data: {
15 content: "hello world",
16 title: "I'm hello world",
17 vcontent: "I'm v-model",
18 firstName: '',
19 lastName: ''
20 },
21 computed :{
22 fullName: function() {
23 return this.firstName + ' ' + this.lastName
24 }
25 }
26 })
27 </script>
28</body>- watch：偵聽器指的是去監聽某一個數據（data裏面）或者計算屬性（computed裏面）的變化，一旦數據發生了變化，就能回調。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 姓：<input v-model="firstName" /> 名：<input v-model="lastName" />
8 <div>{{fullName}}</div>
9 <div>{{count}}</div>
10 </div>
11
12 <script>
13 new Vue({
14 el: "#root",
15 data: {
16 content: "hello world",
17 title: "I'm hello world",
18 vcontent: "I'm v-model",
19 firstName: '',
20 lastName: '',
21 count: 0
22 },
23 computed: {
24 fullName: function() {
25 return this.firstName + ' ' + this.lastName;
26 }
27 },
28 watch: {
29 fullName: function() {
30 this.count++;
31 }
32 }
33 })
34 </script>
35</body>5、三個常見指令
- v-if：控制元素是否存在（顯示）的，直接把元素從DOM樹中移除或者添加到DOM樹中，性能略差。
- v-show：控制元素是否顯示的，通過改變display屬性來控制元素是否顯示，性能略好。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 姓：<input v-model="firstName" /> 名：<input v-model="lastName" />
8 <div>{{fullName}}</div>
9 <div v-if="show">{{count}}</div>
10 <button @click="handleClick">toggon</button>
11 </div>
12
13 <script>
14 new Vue({
15 el: "#root",
16 data: {
17 content: "hello world",
18 title: "I'm hello world",
19 vcontent: "I'm v-model",
20 firstName: '',
21 lastName: '',
22 count: 0,
23 show:true
24 },
25 methods: {
26 handleClick: function() {
27 this.show=!this.show;
28 }
29 },
30 computed: {
31 fullName: function() {
32 return this.firstName + ' ' + this.lastName;
33 }
34 },
35 watch: {
36 fullName: function() {
37 this.count++;
38 }
39 }
40 })
41 </script>
42</body>- v-for：指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素迭代的別名。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 姓：<input v-model="firstName" /> 名：<input v-model="lastName" />
8 <div>{{fullName}}</div>
9 <div v-if="show">{{count}}</div>
10 <button @click="handleClick">toggon</button>
11 <ul>
12 <li v-for="(item, index) of list" :key="index">
13 {{item}}
14 </li>
15 </ul>
16 </div>
17
18 <script>
19 new Vue({
20 el: "#root",
21 data: {
22 content: "hello world",
23 title: "I'm hello world",
24 vcontent: "I'm v-model",
25 firstName: '',
26 lastName: '',
27 count: 0,
28 show:true,
29 list:[1,2,3]
30 },
31 methods: {
32 handleClick: function() {
33 this.show=!this.show;
34 }
35 },
36 computed: {
37 fullName: function() {
38 return this.firstName + ' ' + this.lastName;
39 }
40 },
41 watch: {
42 fullName: function() {
43 this.count++;
44 }
45 }
46 })
47 </script>
48</body>組件的使用
組件是可複用的Vue實例，且帶有一個名字，在Vue中分爲全局組件和局部組件，局部組件需要在Vue對象中註冊才能被使用。
1、全局組件的定義
1<body>
2 <todo-item></todo-item>
3</body>
4
5<script>
6 Vue.component('todo-item',{
7 template: '<li>item</li>'
8 })
9
10 new Vue({
11
12 })
13</script>2、局部組件的定義
1<body>
2 <todo-item></todo-item>
3</body>
4
5<script>
6 var TodoItem={
7 template='<li>item</li>';
8 }
9
10 new Vue({
11 //註冊局部組件，然後才能在外部使用
12 components:{
13 'todo-item':TodoItem
14 }
15 })
16</scr