1、技術在迭代，有時候你為了生活沒有辦法，必須掌握一些新的技術，可能你不會或者沒有時間造輪子，那么就先把利用輪子吧。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入門</title> 6 <!-- 引入vue.min.js文件，直接引用這個文件就行了，不用引用jquery.js文件的 --> 7 <script type="text/javascript" src="./vue.min.js"></script> 8 </head> 9 <body> 10 11 12 <div id="app">{{message}}</div> 13 14 <script type="text/javascript"> 15 //創建一個Vue的實例，讓這個實例去接管id為app的這個元素 16 var vue = new Vue({ 17 el:"#app", //el關鍵字是element單詞的縮寫，代表元素。#app是id為app。el的值等於#app代表和那個dom節點的id做綁定。 18 data:{ //data關鍵字是存放的需求數據。去處理id等於app這一塊區域的內容。 19 message:"hello vue!" //message名稱可以根據自己需求起名稱。 20 } 21 }); 22 </script> 23 </body> 24 </html>
2、掛載點，模板，實例之前的關系：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入門</title> 6 <!-- 引入vue.min.js文件，直接引用這個文件就行了，不用引用jquery.js文件的 --> 7 <script type="text/javascript" src="./vue.min.js"></script> 8 </head> 9 <body> 10 11 12 <!-- 掛載點，模板，實例之前的關系 --> 13 14 <!-- 此div標簽被稱為vue1實例的掛載點。vue1會處理該掛載點下面的內容。 --> 15 <!-- 掛載點內部的內容被稱為模板，模板內容也可以寫到template標簽里面，切記template值需要使用html元素包含起來。 --> 16 <div id="app"></div> 17 18 <!-- 此div標簽被稱為vue2實例的掛載點 --> 19 <div id="app2">{{message}}</div> 20 21 <script type="text/javascript"> 22 //創建一個Vue的實例，讓這個實例去接管id為app的這個元素 23 //實例vue1，創建了一個Vue實例。 24 var vue1 = new Vue({ 25 el: "#app", //el關鍵字是element單詞的縮寫，代表元素。#app是id為app。el的值等於#app代表和那個dom節點的id做綁定。 26 template: '<h1>I am biehl,{{message}}</h1>', //template標簽的值被稱為模板內容。 27 data:{ //data關鍵字是存放的需求數據。去處理id等於app這一塊區域的內容。 28 message:"hello vue!" //message名稱可以根據自己需求起名稱。 29 } 30 }); 31 32 var vue2 = new Vue({ 33 el:"#app2", 34 data:{ 35 message:"你好，vue框架" 36 } 37 38 }); 39 </script> 40 </body> 41 </html>
3、Vue中方法的使用以及屬性的改變，Vue實例中的數據，事件，方法。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入門</title> 6 <!-- 引入vue.min.js文件，直接引用這個文件就行了，不用引用jquery.js文件的 --> 7 <script type="text/javascript" src="./vue.min.js"></script> 8 </head> 9 <body> 10 11 12 <!-- 掛載點，模板，實例之前的關系 --> 13 14 <!-- 此div標簽被稱為vue1實例的掛載點。vue1會處理該掛載點下面的內容。 --> 15 <!-- 掛載點內部的內容被稱為模板，模板內容也可以寫到template標簽里面，切記template值需要使用html元素包含起來。 --> 16 <div id="app"></div> 17 18 <!-- 此div標簽被稱為vue2實例的掛載點 --> 19 <div id="app2">{{message}}</div> 20 21 <!-- {{number}}、{{msg}}被稱為插值表達式 --> 22 <!-- <div id="app3">{{number}},{{msg}}</div> --> 23 24 <!-- v-text是vue的一個屬性指令，值是一個變量，代表了h4要顯示的變量就是number的值，等同於v-html屬性命令，此命令將html進行轉義，v-text不轉義。 --> 25 <div id="app3"> 26 <!-- <h4 v-text="number"></h4> --> 27 <div v-on:click="()=>{alert('world vue!!!')}">{{msg}}</div> 28 <div v-on:click="handleClick">{{msg}}</div> 29 <!-- v-on:的簡寫是@這個符號 --> 30 <div @click="handleClick2">{{msg}}</div> 31 </div> 32 33 34 <script type="text/javascript"> 35 //創建一個Vue的實例，讓這個實例去接管id為app的這個元素 36 //實例vue1，創建了一個Vue實例。 37 var vue1 = new Vue({ 38 el: "#app", //el關鍵字是element單詞的縮寫，代表元素。#app是id為app。el的值等於#app代表和那個dom節點的id做綁定。 39 template: '<span>I am biehl,{{message}}</span>', //template標簽的值被稱為模板內容。 40 data:{ //data關鍵字是存放的需求數據。去處理id等於app這一塊區域的內容。 41 message:"hello vue!" //message名稱可以根據自己需求起名稱。 42 } 43 }); 44 45 var vue2 = new Vue({ 46 el:"#app2", 47 data:{ 48 message:"你好，vue框架" 49 } 50 }); 51 52 var vue3 = new Vue({ 53 el:"#app3", 54 data:{ 55 number:123, //vue中改變數據的顯示，設法改變數據即可，即可完成數據的改變。 56 msg:"hello vue!" 57 }, 58 methods:{ 59 handleClick:function(){ 60 console.log("world vue!!!!!!!!"); 61 alert("world vue!!!!!!!!"); 62 this.msg = "world vue!!!"; //在vue的methods中改變data里面的數據，如此調用即可完成數據的改變 63 }, 64 handleClick2:function(){ 65 this.msg = "hello vue!!!"; 66 }, 67 } 68 }); 69 </script> 70 </body> 71 </html>
4、vue中屬性綁定和雙向數據綁定。1）、v-bind:等同於:。2）、v-on:等同於@。3）、雙向綁定v-model。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入門</title> 6 <!-- 引入vue.min.js文件，直接引用這個文件就行了，不用引用jquery.js文件的 --> 7 <script type="text/javascript" src="./vue.min.js"></script> 8 </head> 9 <body> 10 11 <!-- vue中屬性綁定和雙向數據綁定。1、v-bind:等同於:。2、v-on:等同於@。 --> 12 <div id="app1"> 13 <div v-bind:title="title">{{msg}}</div> 14 <div :title="'I am biehl , ' + title">{{msg}}</div> 15 <!-- v-bind:value等價於:value。 --> 16 <input type="text" name="userName" v-bind:value="content"> 17 <div>{{content}}</div> 18 <!-- 雙向綁定v-model,指定data的password的值 --> 19 <input type="password" name="password" v-model="password"> 20 <div>{{password}}</div> 21 22 </div> 23 24 25 <script type="text/javascript"> 26 var vue1 = new Vue({ 27 el:"#app1", //el的值是id，所以一定記得加上#，例如#app1 28 data:{ 29 msg:"hello vue!", 30 title:"this is hello vue!!!", 31 content:"this is content!!!", 32 password:"123456", 33 } 34 }); 35 36 </script> 37 </body> 38 </html>
5、Vue中計算屬性和偵聽器。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入門</title> 6 <!-- 引入vue.min.js文件，直接引用這個文件就行了，不用引用jquery.js文件的 --> 7 <script type="text/javascript" src="./vue.min.js"></script> 8 </head> 9 <body> 10 11 <!-- vue中屬性綁定和雙向數據綁定。1、v-bind:等同於:。2、v-on:等同於@。 --> 12 <div id="app1"> 13 <div v-bind:title="title">{{msg}}</div> 14 <div :title="'I am biehl , ' + title">{{msg}}</div> 15 <!-- v-bind:value等價於:value。 --> 16 <input type="text" name="userName" v-bind:value="content"> 17 <div>{{content}}</div> 18 <!-- 雙向綁定v-model,指定data的password的值 --> 19 <input type="password" name="password" v-model="password"> 20 <div>{{password}}</div> 21 </div> 22 23 <br/><br/> 24 25 <!-- Vue中計算屬性和偵聽器 --> 26 <div id="app2"> 27 姓：<input type="text" name="firstName" v-model="firstName" /><br/> 28 名：<input type="text" name="lastName" v-model="lastName" /> <br/> 29 <!-- 冗余的顯示 --> 30 姓名：<span>{{firstName}}{{lastName}}</span> <br/> 31 姓名：<span>{{fullName}}</span><br/> 32 33 <div>{{count}}</div> 34 <div v-text="count"></div> 35 <div v-html="count"></div> 36 37 <!-- 監聽器的使用 --> 38 39 40 </div> 41 42 43 <script type="text/javascript"> 44 var vue1 = new Vue({ 45 el:"#app1", //el的值是id，所以一定記得加上#，例如#app1 46 data:{ 47 msg:"hello vue!", 48 title:"this is hello vue!!!", 49 content:"this is content!!!", 50 password:"123456", 51 } 52 }); 53 54 55 /* Vue中計算屬性和偵聽器 */ 56 var vue2 = new Vue({ 57 el:"#app2", 58 data:{ 59 firstName:"張", 60 lastName:"三三", 61 count:0, 62 }, 63 //vue計算屬性computed 64 computed:{ 65 fullName:function(){ 66 return this.firstName + ' ' + this.lastName; 67 }, 68 }, 69 //監聽器,監聽某一個數據的變化，當某一個數據變化，就執行自己的邏輯。 70 watch:{ 71 /*firstName:function(){ 72 this.count++; 73 }, 74 lastName:function(){ 75 this.count++; 76 },*/ 77 fullName:function(){ 78 this.count++; 79 //alert("什么鬼......"); 80 } 81 } 82 }); 83 </script> 84 </body> 85 </html>
6、Vue中的v-if、v-for、v-show命令。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入門</title> 6 <!-- 引入vue.min.js文件，直接引用這個文件就行了，不用引用jquery.js文件的 --> 7 <script type="text/javascript" src="./vue.min.js"></script> 8 </head> 9 <body> 10 11 <!-- Vue中的v-if、v-for、v-show命令 --> 12 <div id="app1"> 13 <!-- v-if會讓div標簽消失 --> 14 <div v-if="show">{{msg}}</div> 15 <button type="button" @click="handleClick">toggle</button> 16 17 <br/><br/> 18 19 <!-- v-show標簽是將div的樣式display屬性設置為none的，style="display: none;" --> 20 <div v-show="show">{{msg}}</div> 21 <button type="button" @click="handleClick2">toggle</button> 22 23 <!-- v-for標簽進行循環操作 --> 24 <ul> 25 <!-- 將list的值放到item里面，然后將item展示出來。:key加強渲染，但是循環值必須不同。 --> 26 <li v-for="(item,index) of list" :key="item">{{item}}</li> 27 </ul> 28 </div> 29 30 31 32 <script type="text/javascript"> 33 var vue1 = new Vue({ 34 el:"#app1", 35 data:{ 36 msg:"您好，vue!", 37 show:true, 38 list:[11,22,33,44,55,66] 39 }, 40 methods:{ 41 handleClick:function(){ 42 // this.show = !this.show，表示取show得反。這種思路很巧妙。 43 this.show = !this.show 44 }, 45 handleClick2:function(){ 46 // this.show = !this.show，表示取show得反。這種思路很巧妙。 47 this.show = !this.show 48 } 49 } 50 }); 51 52 </script> 53 </body> 54 </html>
7、Vue的全局組件、局部組件。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入門</title> 6 <!-- 引入vue.min.js文件，直接引用這個文件就行了，不用引用jquery.js文件的 --> 7 <script type="text/javascript" src="./vue.min.js"></script> 8 </head> 9 <body> 10 11 <div id="app1"> 12 <div> 13 <!-- v-model數據交互 --> 14 <input type="text" name="userName" v-model="inputValue"/> 15 <!-- 點擊事件 --> 16 <button @click="handleClick">提交</button> 17 <!-- <ul> 18 循環遍歷輸出結果 19 <li v-for="(item,index) of list" :key="index">{{item}}</li> 20 </ul> --> 21 22 <!-- 全局組件 --> 23 <!-- <ul> 24 <todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item> 25 </ul> --> 26 27 <!-- 局部組件 --> 28 <ul> 29 <todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item> 30 </ul> 31 32 </div> 33 </div> 34 35 36 <script type="text/javascript"> 37 // 組件的拆分。全局組建 38 /*Vue.component('todo-item',{ 39 props:['content'], 40 template:'<li>{{content}}</li>' 41 });*/ 42 43 // 局部組件 44 var toDoItem = { 45 props:['content'], 46 template:'<li>{{content}}</li>' 47 }; 48 49 // vue實例 50 var vue1 = new Vue({ 51 el:"#app1", 52 //局部組件 53 components:{ 54 'todo-item':toDoItem 55 }, 56 data:{ 57 msg:"hello vue!", 58 inputValue:'', 59 list:[], 60 }, 61 methods:{ 62 handleClick:function(){ 63 // vue的思路圍繞着數據進行操作的，之前都是操作的dom. 64 // 判斷是否不為空且不為空字符串。 65 if(this.inputValue != null && this.inputValue != ''){ 66 // 將輸入框里面的值加到數組里面，展示在下面的列表里面 67 this.list.push(this.inputValue), 68 // 將輸入框里面的值設置為空 69 this.inputValue = '' 70 } 71 } 72 } 73 }); 74 75 </script> 76 </body>