Vue模板語法
一、Vue，漸進式Javascript框架。javascript
漸進式的含義理解，從左到右遞進關係，聲明式渲染（最簡單的模式）->組件系統（組件化）->客戶端路由（局部更新，瀏覽器的歷史回退功能）->集中式狀態管理（Vuex作狀態管理）->項目構建（大型項目，先後端分離）。css
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <!--
10 Vue的基本使用步驟
11 1）、須要提供標籤用於填充數據。
12 2）、引入vue.js庫文件。
13 3）、可使用vue的語法作功能了。
14 4）、把vue提供的數據填充到標籤。使用插值表達式{{}}，做用就是將數據填充到指定的標籤的位置。
15 -->
16 <!-- {{}}叫作插值表達式，將數據填充到html標籤中，插值表達式支持基本的計算操做。-->
17 <div id="app">
18 <div>{{msg}}</div>
19 <div>{{'I love you ' + msg}}</div>
20 <div>{{1 + 2 + 3}}</div>
21 </div>
22
23
24 <script src="vue.js" type="text/javascript"></script>
25 <script type="text/javascript">
26 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
27 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
28 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
29 var vm = new Vue({
30 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
31 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
32 // data模型數據，值是一個對象。
33 data: { // 用於提供數據。
34 msg: 'hello Vue!'
35 }
36
37 });
38 </script>
39 </body>
40 </html>
二、Vue模板語法，默認語法的功能就是前端渲染，前端渲染即便把數據填充到html標籤中。數據（來自服務器） + 模板（html標籤） = 前端渲染（產物是靜態html內容）。html
前端渲染的三種方式。前端
1）、原生js拼接字符串。基本上就是將數據以字符串的方式拼接到html標籤中。缺點是不一樣開發人員的代碼風格差異很大，隨着業務的複雜，後期的維護變得逐漸困難起來。
2）、使用前端模板引擎。它擁有本身的一套模板語法規則。優勢是你們都遵循一樣的規則寫代碼，代碼可讀性明顯提升了，方便後期的維護。缺點是沒有專門提升事件機制。
3）、使用vue特有的模板語法。包含差值表達式、指令、事件綁定、屬性綁定、樣式綁定、分支循環結構。vue
三、Vue模板語法，什麼是指令？html5
1）、什麼是自定義屬性。自定義屬性是區別於標準屬性的，標準屬性是標籤自帶的屬性。
2）、Vue指令的本質就是自定義屬性。
3）、Vue指令的格式，以v-開始，好比v-cloak。指令的名稱取決於設計者。java
四、Vue模板語法，v-cloak指令用法。ajax
1）、插值表達式存在的問題，就是閃動。
2）、若是解決該問題，使用v-cloak指令，能夠解決閃動的問題。
3）、解決該問題的原理，先隱藏，替換好值以後再顯式最終的值。編程
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6
7 <style type="text/css">
8 [v-cloak] {
9 display: none;
10 }
11 </style>
12 </head>
13 <body>
14
15 <!--
16 v-cloak指令的用法。
17 1）、須要提升樣式。
18 [v-cloak] {
19 display: none;
20 }
21 2）、在插值表達式所在的標籤中添加v-cloak指令。
22 3)、原理，先經過樣式隱藏內容，而後在內存中進行值的替換，替換好以後再顯式最終的結果，此時就不會顯式{{}}這種閃動效果。
23 -->
24 <div id="app" v-cloak>
25 <div>{{msg}}</div>
26 </div>
27
28
29 <script src="vue.js" type="text/javascript"></script>
30 <script type="text/javascript">
31 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
32 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
33 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
34 var vm = new Vue({
35 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
36 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
37 // data模型數據，值是一個對象。
38 data: { // 用於提供數據
39 msg: 'hello Vue!'
40 }
41
42 });
43 </script>
44 </body>
45 </html>
五、Vue模板語法，v-text、v-html、v-pre數據綁定指令用法。後端
1）、v-text填充純文本。特色1、相比較插值表達式更加簡潔。不存在閃動問題，比插值表達式好使的哦。
2）、v-html填充html片斷。特色1、存在安全問題。特色2、本網站內部數據可使用，來自第三方數據不能夠用。
3）、v-pre填充原始信息。特色1、顯式原始信息，跳過編譯過程，分析編譯過程。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <div>{{msg}}</div>
11 <!-- v-text沒有閃動問題的，用戶體驗更好，比插值表達式更加好使 -->
12 <div v-text="msg"></div>
13 <!-- 內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯，在網站上動態渲染任意 HTML 是很是危險的，由於容易致使 XSS *** -->
14 <div v-html="msg2"></div>
15 <!-- 顯式原始信息，跳過編譯過程(分析編譯過程) -->
16 <div v-pre>{{msg}}</div>
17 </div>
18
19
20 <script src="vue.js" type="text/javascript"></script>
21 <script type="text/javascript">
22 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
23 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
24 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
25 var vm = new Vue({
26 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
27 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
28 // data模型數據，值是一個對象。
29 data: { // 用於提供數據
30 msg: 'hello Vue!',
31 msg2: '<h1>hello Vue!</h1>', //可使用v-html標籤展現html代碼。
32 }
33
34 });
35 </script>
36 </body>
37 </html>
六、Vue模板語法，數據響應式。
1）、如何理解響應式。html5中的響應式（屏幕尺寸的變化致使樣式的變化）、數據的響應式（數據的變化致使頁面內容的變化）。
2）、什麼是數據綁定。數據綁定就是將數據填充到標籤中。
3）、v-once只編譯一次。顯式內容以後再也不具備響應式功能。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <div>{{msg}}</div>
11 <!-- v-once只編譯一次。顯式內容以後再也不具備響應式功能。 -->
12 <!-- v-once的應用場景，若是顯式的信息後續不須要再修改，可使用v-once指令，能夠能夠提升性能，由於Vue就不須要去監聽它的變化了。 -->
13 <div v-once>{{info}}</div>
14 </div>
15
16
17 <script src="vue.js" type="text/javascript"></script>
18 <script type="text/javascript">
19 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
20 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
21 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
22 var vm = new Vue({
23 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
24 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
25 // data模型數據，值是一個對象。
26 data: { // 用於提供數據
27 msg: 'hello Vue!',
28 info: 'hello world Vue !',
29 }
30
31 });
32 </script>
33 </body>
34 </html>
七、Vue模板語法，雙向數據綁定。
MVVM設計思想，最只要的理念就是分治，把不一樣的功能代碼放到不一樣的模塊，經過特定的方式創建關聯。
1）、M指的是Model，就是data裏面的數據，提供數據的。Model經過VM的Data Bindings數據綁定View。
2）、V指的是View，就是所寫的模板Dom元素，提供頁面展現效果的。View經過VM的DOM Listeners事件監聽Model。
3）、VM指的是View-Model，就是控制邏輯，實現控制邏輯將二者結合到一塊兒。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <div>{{msg}}</div>
11 <!-- 主要是用於表單輸入域中。 -->
12 <!-- 雙向數據綁定分析，方向1、頁面影響數據，方向2、數據影響頁面。 -->
13 <!-- 用戶修改頁面內容數據會改變，數據改變了影響插值表達式的內容頁面改變。 -->
14 <div>
15 <input type="text" v-model="msg" />
16 </div>
17 </div>
18
19
20 <script src="vue.js" type="text/javascript"></script>
21 <script type="text/javascript">
22 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
23 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
24 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
25 var vm = new Vue({
26 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
27 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
28 // data模型數據，值是一個對象。
29 data: { // 用於提供數據
30 msg: 'hello Vue!',
31 }
32
33 });
34 </script>
35 </body>
36 </html>
八、Vue模板語法，事件綁定。
1）、 Vue如何處理事件？
v-on指令用法：<input type="button" v-on:click="num++" />。
v-on簡寫形式，<input type="button" @click="num++"/>。
2）、事件函數的調用方式。
直接綁定函數名稱：<button v-on:click="add">加一</button>。不須要傳遞事件對象，默認攜帶事件對象。
調用函數：<button @click="reduce()">減一</button>。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <div>{{num}}</div>
11 <!-- 若是邏輯直接寫到@click、v-on:click後面，不合理，隨着業務量增多，這裏變得十分冗餘。 -->
12 <div>
13 <input type="button" v-on:click="num++" value="加一" />
14 <input type="button" @click="num--" value="減一" />
15
16 <br />
17 <button v-on:click="add">加一</button>
18 <button @click="reduce()">減一</button>
19 </div>
20 </div>
21
22
23 <script src="vue.js" type="text/javascript"></script>
24 <script type="text/javascript">
25 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
26 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
27 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
28 var vm = new Vue({
29 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
30 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
31 // data模型數據，值是一個對象。
32 data: { // 用於提供數據
33 // msg: 'hello Vue!',
34 num: 1, // num初始化值爲1
35 },
36 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
37 add: function() {
38 this.num++; // 此處的this指的是vm即Vue的實例，經過vm能夠訪問到num。
39 },
40 reduce: function() {
41 this.num--;
42 }
43 }
44
45 });
46 </script>
47 </body>
48 </html>
3）、事件函數的參數傳遞。若是傳參事件對象，固定格式$event。
普通的參數和事件對象：<button @click="say("hi",$event)">Say Hi</button>。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <div>{{num}}</div>
11 <!-- 若是邏輯直接寫到@click、v-on:click後面，不合理，隨着業務量增多，這裏變得十分冗餘。 -->
12 <div>
13 <input type="button" v-on:click="num++" value="加一" />
14 <input type="button" @click="num--" value="減一" />
15
16 <br />
17 <!--
18 事件綁定-參數傳遞。
19 1）、若是事件直接綁定函數名稱，那麼默認會傳遞事件對象做爲事件函數的第一個參數。
20 2）、若是事件綁定函數調用，那麼事件對象必須做爲最後一個參數進行顯式傳遞，而且事件對象的名稱必須是固定的$event。
21 -->
22 <!-- v-on:click="add"不須要傳遞事件對象，默認攜帶事件對象。 -->
23 <button v-on:click="add">加一</button>
24 <!-- 這種狀況是傳遞具體的參數 -->
25 <button @click="reduce(2,3,4)">減二</button>
26
27 <!-- 傳遞事件對象，最後一個參數是事件對象，而且$event名稱是固定的 -->
28 <button @click="multip(2,3,$event)">乘二</button>
29 </div>
30 </div>
31
32
33 <script src="vue.js" type="text/javascript"></script>
34 <script type="text/javascript">
35 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
36 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
37 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
38 var vm = new Vue({
39 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
40 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
41 // data模型數據，值是一個對象。
42 data: { // 用於提供數據
43 // msg: 'hello Vue!',
44 num: 1, // num初始化值爲1
45 },
46 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
47 add: function() {
48 console.log(event.target.tagName); // 經過event事件對象能夠拿到觸發事件的對象。
49 console.log(event.target.innerHTML); // 經過event事件對象能夠拿到內容。
50 this.num++; // 此處的this指的是vm即Vue的實例，經過vm能夠訪問到num。
51 },
52 reduce: function(param1, param2, param3) {
53 console.log(param1);
54 console.log(param2);
55 console.log(param3);
56 this.num = this.num - param1;
57 },
58 multip: function(param1, param2, event) {
59 console.log(param1);
60 console.log(param2);
61 console.log(event.target.tagName); // 經過event事件對象能夠拿到觸發事件的對象。
62 console.log(event.target.innerHTML); // 經過event事件對象能夠拿到內容。
63 this.num = this.num * param1;
64 },
65
66 }
67
68 });
69 </script>
70 </body>
71 </html>
4）、事件修飾符，處理事件的特殊行爲。
.stop阻止冒泡：<a v-on:click.stop="">跳轉</a>。
.prevent阻止默認行爲：<a v-on:click.prevent="">跳轉</a>。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <div>{{num}}</div>
11 <!-- 冒泡行爲，會執行這裏的點擊事件 -->
12 <div @click="add0">
13 <!--
14 事件綁定-參數傳遞。
15 1）、若是事件直接綁定函數名稱，那麼默認會傳遞事件對象做爲事件函數的第一個參數。
16 2）、若是事件綁定函數調用，那麼事件對象必須做爲最後一個參數進行顯式傳遞，而且事件對象的名稱必須是固定的$event。
17 -->
18 <!-- v-on:click="add"不須要傳遞事件對象，默認攜帶事件對象。 -->
19 <!-- .stop阻止了冒泡的發生 -->
20 <button v-on:click.stop="add">加一</button>
21 <!-- 這種狀況是傳遞具體的參數 -->
22 <button @click="reduce(2,3,4)">減二</button>
23
24 <!-- 傳遞事件對象，最後一個參數是事件對象，而且$event名稱是固定的 -->
25 <button @click="multip(2,3,$event)">乘二</button>
26
27 <!-- 阻止默認行爲，典型應用是超連接，默認的時候會發生跳轉，.prevent事件修飾符阻止默認行爲 -->
28 <a href="https://www.baidu.com/" @click.stop.prevent="stopBlank">百度</a>
29 </div>
30 </div>
31
32
33 <script src="vue.js" type="text/javascript"></script>
34 <script type="text/javascript">
35 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
36 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
37 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
38 var vm = new Vue({
39 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
40 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
41 // data模型數據，值是一個對象。
42 data: { // 用於提供數據
43 // msg: 'hello Vue!',
44 num: 1, // num初始化值爲1
45 },
46 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
47 // 經過點擊事件的冒泡觸發了該方法的執行。
48 add0: function() {
49 this.num++;
50 },
51 add: function() {
52 console.log(event.target.tagName); // 經過event事件對象能夠拿到觸發事件的對象。
53 console.log(event.target.innerHTML); // 經過event事件對象能夠拿到內容。
54 this.num++; // 此處的this指的是vm即Vue的實例，經過vm能夠訪問到num。
55
56 // 阻止冒泡行爲，就不會發生冒泡的行爲。能夠拿到事件對象就能夠阻止冒泡的。
57 // stopPropagation此方法能夠根據事件對象調用阻止冒泡的發生。
58 // event.stopPropagation();
59
60 },
61 reduce: function(param1, param2, param3) {
62 console.log(param1);
63 console.log(param2);
64 console.log(param3);
65 this.num = this.num - param1;
66 },
67 multip: function(param1, param2, event) {
68 console.log(param1);
69 console.log(param2);
70 console.log(event.target.tagName); // 經過event事件對象能夠拿到觸發事件的對象。
71 console.log(event.target.innerHTML); // 經過event事件對象能夠拿到內容。
72 this.num = this.num * param1;
73 },
74 stopBlank: function(event) {
75 // 阻止默認跳轉行爲，原生Js的api，換成事件修飾符。
76 // event.preventDefault();
77 },
78
79 }
80
81 });
82 </script>
83 </body>
84 </html>
5）、按鍵修飾符。
.enter回車鍵：<input v-on:keyup.enter='submit'>。
.delete刪除鍵：<input v-on:keyup.delete='handle'>。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <form action="">
11 <div>帳號：<input type="text" v-on:keyup.delete="clearContext" v-model="name" /></div>
12 <!-- v-on:keyup.enter按鍵修飾符，經過回車就能夠觸發事件 -->
13 <div>密碼：<input type="text" v-on:keyup.enter="handleSubmit" v-model="password" /></div>
14 <div><input type="button" v-on:click="handleSubmit" value="提交"></div>
15 </form>
16
17 </div>
18 </div>
19
20
21 <script src="vue.js" type="text/javascript"></script>
22 <script type="text/javascript">
23 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
24 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
25 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
26 var vm = new Vue({
27 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
28 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
29 // data模型數據，值是一個對象。
30 data: { // 用於提供數據
31 name: '',
32 password: ''
33 },
34 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
35 handleSubmit: function() {
36 // 此時能夠將表單的內容經過ajax提交到後臺
37 console.log(this.name, this.password)
38 },
39 clearContext: function() {
40 // 按delete鍵的時候，清空用戶名
41 this.name = '';
42 this.password = '';
43 }
44 }
45
46 });
47 </script>
48 </body>
49 </html>
6）、自定義按鍵修飾符。
全局config.keyCodes對象：Vue.config.keyCodes.f1=112。
註釋：keyCodes是一個對象，f1是自定義的，112是一個值，這個值是每個按鍵的惟一標識，經過這個事件對象能夠獲取到這個惟一標識。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <input type="text" v-on:keyup="handle" v-model="info" />
11
12 <!-- 13就是Enter的惟一標識，可使用這種形式v-on:keyup.13，就不用自定義按鍵了，可是數值的形式不直觀 -->
13 <input type="text" v-on:keyup.13="handle" v-model="info" />
14 <!-- 事件綁定，自定義按鍵修飾符，規則，自定義按鍵修飾符名字是自定義的，可是對應的值必須是按鍵對應的event.keyCode的值。-->
15 <input type="text" v-on:keyup.f1="handle" v-model="info" />
16 </div>
17 </div>
18
19
20 <script src="vue.js" type="text/javascript"></script>
21 <script type="text/javascript">
22 // 自定義按鍵修飾符，可使用 `v-on:keyup.f1`
23 Vue.config.keyCodes.f1 = 112
24 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
25 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
26 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
27 var vm = new Vue({
28 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
29 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
30 // data模型數據，值是一個對象。
31 data: { // 用於提供數據
32 info: '',
33 },
34 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
35 handle: function() {
36 // 能夠經過event.keyCode獲取到每個按鍵的惟一標識
37 console.log(event.keyCode)
38 }
39 }
40
41 });
42 </script>
43 </body>
44 </html>
九、簡單相加計算器。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <!--
11 1）、經過v-model指令實現數值a和數值b的綁定。
12 2）、給計算按鈕綁定事件，實現計算邏輯。
13 3）、將計算結果綁定到對應的位置。
14 -->
15
16 <h1>簡單計算器</h1>
17 <div>
18 <span>數值A：</span>
19 <span>
20 <input type="text" v-model="a" />
21 </span>
22 </div>
23 <div>
24 <span>數值B：</span>
25 <span>
26 <input type="text" v-model="b" />
27 </span>
28 </div>
29 <div>
30 <button @click="handle">計算</button>
31 </div>
32 <div>
33 <span>計算結果：</span>
34 <span v-text="result"></span>
35 </div>
36 </div>
37 </div>
38
39
40 <script src="vue.js" type="text/javascript"></script>
41 <script type="text/javascript">
42 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
43 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
44 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
45 var vm = new Vue({
46 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
47 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
48 // data模型數據，值是一個對象。
49 data: { // 用於提供數據
50 a: '',
51 b: '',
52 result: ''
53 },
54 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
55 handle: function() {
56 // 實現計算結果，默認獲取獲得的是字符串，這裏須要先轉換成整數
57 this.result = parseInt(this.a) + parseInt(this.b);
58 }
59 }
60
61 });
62 </script>
63 </body>
64 </html>
十、Vue模板語法，屬性綁定。
1）、Vue如何動態處理屬性。
v-bind指令用法：<a v-bind:href='url'>跳轉</a>。
縮寫形式：<a :href='url'>跳轉</a>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <a href="https://www.baidu.com">百度</a>
11
12 <!-- v-bind指令用法，使用外部的url來填充訪問連接 -->
13 <a v-bind:href="url">百度</a>
14 <a :href="url">百度</a>
15 <button @click="handle">切換</button>
16
17 </div>
18
19
20 <script src="vue.js" type="text/javascript"></script>
21 <script type="text/javascript">
22 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
23 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
24 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
25 var vm = new Vue({
26 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
27 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
28 // data模型數據，值是一個對象。
29 data: { // 用於提供數據
30 url: 'https://www.baidu.com'
31 },
32 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
33 handle: function() {
34 // 修改url地址
35 this.url = 'https://cn.vuejs.org/';
36 }
37 }
38
39 });
40 </script>
41 </body>
42 </html>
2）、v-model的底層實現原理分析，v-model用於實現雙向數據綁定。v-model底層用到的是屬性綁定和事件綁定的組合。<input v-bind:value="msg" v-on:input="msg=$event.target.value" />
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <div v-text="msg"></div>
11 <!-- 經過v-on:input實現，修改數據影響模型中的數據，當input輸入框發生變化，觸發input事件 -->
12 <input v-bind:value="msg" v-on:input="handle" />
13 <!-- 簡化形式，經過v-on:input="msg=$event.target.value"能夠獲取到最新值，將最新值賦值給v-on:input裏面的msg -->
14 <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value" />
15 <!-- v-model="msg"數據雙向綁定 -->
16 <input type="text" v-model="msg" />
17 </div>
18
19
20 <script src="vue.js" type="text/javascript"></script>
21 <script type="text/javascript">
22 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
23 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
24 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
25 var vm = new Vue({
26 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
27 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
28 // data模型數據，值是一個對象。
29 data: { // 用於提供數據
30 msg: 'hello'
31 },
32 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
33 handle: function(event) {
34 // 經過拿到event對象就能夠操做元素的值
35 // 覆蓋原來的值，影響模型中的數據，而模型中數據改變了進而應該視圖中的數據，這就是雙向綁定。
36 // 使用輸入域中的最新的數據覆蓋原來的數據。
37 this.msg = event.target.value;
38 }
39 }
40
41 });
42 </script>
43 </body>
44 </html>
十一、Vue模板語法，樣式綁定。
1）、經過class樣式進行處理，處理標籤的屬性。
對象語法：<div v-bind:class="{active:isActive}"></div>。對象形式的。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 <style type="text/css">
7 .active {
8 border: 1px solid red;
9 width: 100px;
10 height: 100px;
11 }
12
13 .error {
14 background-color: orange;
15 }
16 </style>
17 </head>
18 <body>
19
20 <div id="app">
21 <!-- 傳統方式是操做dom的class屬性，Vue使用的v-bind:class="{}"來操做屬性便可 -->
22 <!-- 對象形式：v-bind:class="{}"的大括號裏面是一個對象，對象是鍵值對形式的，鍵是類名，值是屬性，控制是否顯式 -->
23 <div v-bind:class="{active : isActive}">哈哈哈</div>
24
25 <!-- 對象形式：多個對象 -->
26 <div v-bind:class="{active : isActive,error : isError}">呵呵呵</div>
27 <!-- 切換，能夠切換是否展現 -->
28 <button @click="handle">切換</button>
29 </div>
30
31 <script src="vue.js" type="text/javascript"></script>
32 <script type="text/javascript">
33 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
34 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
35 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
36 var vm = new Vue({
37 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
38 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
39 // data模型數據，值是一個對象。
40 data: { // 用於提供數據
41 isActive: 'true', // true默認是展現的，isActive其中is開頭的通常是標誌位，要麼是true，要麼是false。
42 isError: 'true', // true顯式，false不顯示
43 },
44 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
45 handle: function() {
46 // 控制isActive的值，在true和false之間進行切換，使用!取反來操做
47 this.isActive = !this.isActive;
48 this.isError = !this.isError;
49 }
50 }
51
52 });
53 </script>
54 </body>
55 </html>
數組語法：<div v-bind:class="[activeClass, errorClass]"></div>。數組形式的。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 <style type="text/css">
7 .active {
8 border: 1px solid red;
9 width: 100px;
10 height: 100px;
11 }
12
13 .error {
14 background-color: orange;
15 }
16 </style>
17 </head>
18 <body>
19
20 <div id="app">
21 <!-- 數組形式，綁定樣式 -->
22 <div v-bind:class="[activeClass, errorClass]">哈哈哈</div>
23
24 <!-- 切換，能夠切換是否展現 -->
25 <button @click="handle">切換</button>
26 </div>
27
28 <script src="vue.js" type="text/javascript"></script>
29 <script type="text/javascript">
30 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
31 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
32 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
33 var vm = new Vue({
34 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
35 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
36 // data模型數據，值是一個對象。
37 data: { // 用於提供數據
38 activeClass: 'active', // activeClass表示的是類名稱
39 errorClass: 'error', //
40 },
41 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
42 handle: function() {
43 this.activeClass = ''; // 直接將類名置空，就能夠去掉這個樣式
44 this.errorClass = '';
45 }
46 }
47
48 });
49 </script>
50 </body>
51 </html>
2)、樣式綁定相關語法細節。
a、對象綁定和數組綁定能夠結合使用。
b、class綁定的值能夠簡化操做。
c、默認的class如何處理。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 <style type="text/css">
7 .active {
8 border: 1px solid red;
9 width: 100px;
10 height: 100px;
11 }
12
13 .error {
14 background-color: orange;
15 }
16
17 .colors {
18 color: blue;
19 }
20
21 .base {
22 font-size: 28px;
23 }
24 </style>
25 </head>
26 <body>
27
28 <div id="app">
29 <!--
30 樣式綁定相關語法細節。
31 一、對象綁定和數組綁定能夠結合使用。
32 二、class綁定的值能夠簡化操做。
33 三、默認的class如何處理。
34 -->
35 <!-- 數組形式和對象樣式組合使用，綁定樣式，可是若是樣式過多，可讀性變差 -->
36 <div v-bind:class="[activeClass, errorClass, {colors: isColor}]">哈哈哈</div>
37
38 <!-- 數組形式的簡化寫法 -->
39 <div v-bind:class="arrClasses">嘿嘿嘿</div>
40
41 <!-- 對象形式的簡化寫法 -->
42 <div v-bind:class="objClass">呵呵呵</div>
43
44 <!-- 默認的class如何處理，默認的class不會被覆蓋，而是結合到了一塊兒 -->
45 <div class="base" v-bind:class="objClass">哼哼哼</div>
46
47
48 <!-- 切換，能夠切換是否展現 -->
49 <button @click="handle">切換</button>
50 </div>
51
52 <script src="vue.js" type="text/javascript"></script>
53 <script type="text/javascript">
54 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
55 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
56 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
57 var vm = new Vue({
58 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
59 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
60 // data模型數據，值是一個對象。
61 data: { // 用於提供數據
62 activeClass: 'active', // activeClass表示的是類名稱
63 errorClass: 'error', //
64 isColor: true,
65 arrClasses: ['active', 'error'], // 簡化數組形式
66 objClass: { // 對象形式的簡化
67 active: true,
68 error: true,
69 }
70 },
71 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
72 handle: function() {
73 this.isColor = !this.isColor; //
74 this.objClass.error = !this.objClass.error; // 對象形式修改樣式
75 }
76 }
77
78 });
79 </script>
80 </body>
81 </html>
3）、style樣式處理，也稱爲內聯樣式。
對象語法：<div v-bind:style="{color: activeColor,fontSize: fontSize}"></div>。直接寫了css樣式。
數組語法：<div v-bind:class="[baseStyles, overridingStyles]"></div>。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <!-- 對象形式，若是樣式較多，可讀性很差 -->
11 <div v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle}">哈哈哈</div>
12 <!-- 對象形式簡化用法，經過使用對象形式的一組樣式來展現 -->
13 <div v-bind:style="objStyles">哈哈哈</div>
14
15 <!-- 數組語法，裏面存放的多個對象的形式 -->
16 <div v-bind:style="[objStyles, overwiteStyles]"></div>
17
18 <!-- 切換，能夠切換是否展現 -->
19 <button @click="handle">切換</button>
20 </div>
21
22 <script src="vue.js" type="text/javascript"></script>
23 <script type="text/javascript">
24 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
25 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
26 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
27 var vm = new Vue({
28 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
29 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
30 // data模型數據，值是一個對象。
31 data: { // 用於提供數據
32 borderStyle: '1px solid red', //
33 widthStyle: '100px', //
34 heightStyle: '200px',
35 objStyles: {
36 border: '1px solid red', //
37 width: '200px', //
38 height: '100px',
39 },
40 overwiteStyles: {
41 border: '3px solid orange', //
42 width: '100px', //
43 height: '200px',
44 backgroundColor: 'pink',
45 }
46 },
47 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
48 handle: function() {
49 this.heightStyle = '100px'; //
50 this.objStyles.width = '100px'; // 能夠修改對象裏面的屬性的樣式值
51 this.overwiteStyles.height = '100px'; // 能夠修改對象裏面的屬性的樣式值
52 }
53 }
54
55 });
56 </script>
57 </body>
58 </html>
十二、Vue模板語法，分支循環結構。
1）、分支結構，v-if、v-else、v-else-if、v-show。
v-if和v-show的區別，v-if控制元素是否渲染到頁面。v-show控制元素是否顯式（已經渲染到了頁面）。若是一個元素頻繁的顯式和隱藏就使用v-show，若是一個元素渲染出來以後變化的比較少的話就用v-if，控制的是dom元素的增長或者刪除。。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <input v-model="score" />
11 <!-- 分支結構，渲染出來的只有一個div，區別於v-show -->
12 <div v-if="score>= 90">優秀</div>
13 <div v-else-if="score< 90 && score >= 80">良好</div>
14 <div v-else-if="score< 80 && score > 70">通常</div>
15 <div v-else-if="score< 70 && score > 60">及格</div>
16 <div v-else>不及格</div>
17
18 <br />
19 <!-- v-show的原理，控制元素樣式是否顯式，就是display:none或者display:block; -->
20 <!-- 分支結構，v-show，當爲false的時候，頁面不展現，可是瀏覽器源碼是展現的，false的樣式是style="display: none;" -->
21 <div v-show="flag">測試v-show</div>
22 <!-- 切換 -->
23 <button @click="handle">切換</button>
24 </div>
25
26 <script src="vue.js" type="text/javascript"></script>
27 <script type="text/javascript">
28 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
29 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
30 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
31 var vm = new Vue({
32 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
33 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
34 // data模型數據，值是一個對象。
35 data: { // 用於提供數據
36 score: '',
37 flag: true,
38 },
39 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
40 handle: function() {
41 this.flag = !this.flag;
42 }
43 }
44
45 });
46 </script>
47 </body>
48 </html>
2）、分支循環結構，循環結構。
a）、v-for遍歷數組：<li v-for="item in list">{{item}}</li>。
<li v-for="(item, index) in list">{{item}} + '---' + {{index}}</li>。
b）、key的做用，幫助vue區分不一樣的元素，從而提升性能。
<li :key='item.id' v-for="(item,index) in list">{{item}} + '---' + {{index}}</li>。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <span>水果列表：</span>
11 <!-- 循環遍歷 -->
12 <!-- 使用v-text進行展現，能夠避免閃動現象發生 -->
13 <li v-for="item in fruit" v-text="item"></li>
14 <!-- 使用插值表達式，可能出現閃動 -->
15 <!-- <li v-for="item in fruit">{{item}}</li> -->
16
17 <br />
18 <span>水果列表：</span>
19 <!-- 展現的索引和元素，使用空格隔開 -->
20 <li v-for="(item,index) in fruit">{{index + " " + item}}</li>
21 <!-- 展現形式和上面的一致 -->
22 <li v-for="(item,index) in fruit">{{index}} {{item}}</li>
23
24 <br />
25 <span>水果列表：</span>
26 <!-- 複雜的數組對象結構 -->
27 <li v-for="item in cfruit">
28 <!-- 經過點來獲取數組對象的屬性值 -->
29 <span>{{item.ename}} {{item.cname}}</span>
30 </li>
31
32 <br />
33 <span>水果列表：</span>
34 <!-- key的做用，幫助vue區分不一樣的元素，從而提升性能。Vue在處理Dom元素的時候，須要區分兄弟節點之間彼此是不同的，給每一個兄弟節點標註一個惟一標識 -->
35 <!-- 使用惟一標識，方便區分是那一個元素 -->
36 <li :key='item.id' v-for="(item,index) in cfruit">
37 <!-- 經過點來獲取數組對象的屬性值 -->
38 <span>{{item.ename}} {{item.cname}}</span>
39 </li>
40 </div>
41
42 <script src="vue.js" type="text/javascript"></script>
43 <script type="text/javascript">
44 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
45 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
46 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
47 var vm = new Vue({
48 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
49 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
50 // data模型數據，值是一個對象。
51 data: { // 用於提供數據
52 fruit: ['apple', 'orange', 'banana'],
53 cfruit: [{
54 id: 1,
55 ename: 'apple',
56 cname: '蘋果',
57 }, {
58 id: 2,
59 ename: 'orange',
60 cname: '橘子',
61 }, {
62 id: 3,
63 ename: 'banana',
64 cname: '香蕉',
65 }, ]
66 },
67 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
68
69 }
70
71 });
72 </script>
73 </body>
74 </html>
3）、分支循環結構，循環結構。
a）、v-for遍歷對象：<div v-for='(value, key, index) in object'></div>。
b）、v-if和v-for結合使用：<div v-if='value == 12' v-for='(value, key, index) in object'></div>。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <!-- v-for遍歷對象 -->
11 <div v-for="(value, key, index) in object">
12 {{index}} {{key}} {{value}}
13 </div>
14
15 <br />
16 <!-- v-if和v-for結合使用 -->
17 <div v-if="value == 22" v-for="(value, key, index) in object">{{index}} {{key}} {{value}}</div>
18 </div>
19
20 <script src="vue.js" type="text/javascript"></script>
21 <script type="text/javascript">
22 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
23 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
24 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
25 var vm = new Vue({
26 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
27 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
28 // data模型數據，值是一個對象。
29 data: { // 用於提供數據
30 object: {
31 name: '張三三',
32 age: 22,
33 gender: '男性',
34 }
35 },
36 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
37
38 }
39
40 });
41 </script>
42 </body>
43 </html>
1三、Tab選項卡。
1）、實現靜態ui效果，用傳統的方式實現標籤結構和樣式。
2）、基於數據重構ui效果，將靜態的結構和樣式重構爲基於Vue模板語法的形式，處理事件綁定和js控制邏輯。
3）、總結，Vue模板 + Js控制邏輯 = Vue實例對象，實現前端功能。
4）、聲明式編程，模板的結構和最終顯示的效果基本一致。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 <style>
7 .tal ul{
8 overflow: hidden;
9 padding: 0;
10 margin: 0;
11 }
12 .tab ul li{
13 box-sizing: border-box;
14 padding: 0;
15 float: left;
16 width: 100px;
17 height: 45px;
18 line-height: 45px;
19 list-style: none;
20 text-align: center;
21 border-top: 1px solid black;
22 border-right: 1px solid black;
23 cursor: pointer;
24 }
25 .tab ul li:first-child{
26 border-left: 1px solid black;
27 }
28 .tab ul li.active{
29 background-color: orange;
30 }
31 .tab div{
32 width: 500px;
33 height: 300px;
34 display: none;
35 text-align: center;
36 font-size: 30px;
37 line-height: 300px;
38 border: 0px solid black;
39 border-top: 0px;
40 }
41 .tab div.current{
42 display: block;
43 }
44 </style>
45 </head>
46 <body>
47
48 <div id="app">
49 <!-- Tab選項卡。 -->
50 <div class="tab">
51 <!-- 展現tab欄 -->
52 <ul>
53 <li v-on:click="change(index)" v-bind:class="currentIndex == index ? 'active':''" :key='item.id' v-for="(item,index) in list">{{item.title}}</li>
54 </ul>
55 <!-- 展現圖片 -->
56 <div v-bind:class="currentIndex == index ? 'current':''" :key='item.id' v-for="(item,index) in list">
57 <!-- <img v-bind:src="item.path" /> -->
58 <img :src="item.path" />
59 </div>
60 </div>
61 </div>
62
63 <script src="vue.js" type="text/javascript"></script>
64 <script type="text/javascript">
65 // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
66 // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
67 // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
68 // Vue實例對象將Vue模板和Js控制邏輯粘合到一塊兒，最終實現前端功能
69 var vm = new Vue({
70 // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
71 el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
72 // data模型數據，值是一個對象。
73 data: { // 用於提供數據
74 currentIndex: 0, //選項卡當前的索引
75 list: [{
76 id: 1,
77 title: '小米10Pro',
78 path: 'img/1.jpg',
79 }, {
80 id: 2,
81 title: '小米9Pro',
82 path: 'img/2.jpg',
83 }, {
84 id: 3,
85 title: '小米8Pro',
86 path: 'img/3.jpg',
87 }],
88 },
89 methods: { // methods屬性裏面能夠定義不少方法的，值是一個對象。方法須要定義到methods屬性當中。
90 change: function(index) {
91 // 實現選項卡的切換操做，切換的本質就是修改的類名稱，操做類名稱就是經過currentIndex這個索引的，由於這個索引影響三目運算符的真假
92 this.currentIndex = index;
93 }
94 }
95
96 });
97 </script>
98 </body>
99 </html>
實現效果以下所示：
相關文章
- 1. VUE 模板語法
- 2. Vue模板語法
- 3. vue模板語法
- 4. Vue 模板語法
- 5. Vue-模板語法
- 6. vue 模板語法
- 7. (Vue)vue模板語法
- 8. Vue 基礎模板語法
- 9. vue一.模板語法
- 10. Vue模板語法V-bind
- 更多相關文章...
- • Maven 項目模板 - Maven教程
- • Eclipse 代碼模板 - Eclipse 教程
- • Kotlin學習（一）基本語法
- • 委託模式
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. VUE 模板語法
- 2. Vue模板語法
- 3. vue模板語法
- 4. Vue 模板語法
- 5. Vue-模板語法
- 6. vue 模板語法
- 7. (Vue)vue模板語法
- 8. Vue 基礎模板語法
- 9. vue一.模板語法
- 10. Vue模板語法V-bind