vue初學：基礎概念
阿新 • • 發佈：2018-12-23
一、vue使用步驟：
1.引包vue.js
2.html中寫要操作的DOM節點
3.建立vue物件：new Vue({options});
4.配置options:el:(要操作的物件，用選擇器，同jquery),
emplate:(模板，指定要插入的內容:{{插值表示式}},注：必須只有一個根節點),
data(function(){return key:emplate中要操作的資料}),
methods:{函式名:function(){函式體，（this.xxx呼叫data中定義的資料）(this.xxxMethods呼叫methods中的方法)}}
components:{'在emplate中要使用的標籤名':要宣告的子元件名}
二、vue基礎概念：
1.插值表示式可以是：data中定義的資料；{{ '字串' }}；三元表示式；布林值；物件{{ {key:value} }}
2.指令：形如"v-xxx"，用於更簡便的操作頁面和資料。
三、 常用vue指令：
1.v-text
2.v-html
3.v-if
4.v-else-if
5.v-else
6.v-show
7.v-bind 給屬性繫結值，語法：v-bind:屬性名="常量||變數名"(常量要寫引號),簡寫 :屬性名="常量||變數名"
8.v-on 繫結事件 語法：v-on:事件名="函式名||表示式"，簡寫 @事件名="函式名||表示式"
9.v-if和v-show的區別：
v-if和v-show都是用來控制元素的渲染。v-if判斷是否載入，可以減輕伺服器的壓力，在需要時載入,但有更高的切換開銷;v-show調整DOM元素的CSS的dispaly屬性，可以使客戶端操作更加流暢，但有更高的初始渲染開銷。如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。
10.v-bind和v-model區別：
v-bind可設定所有屬性的屬性值，但只能單向讀取vue中的資料；
v-model只可設定value屬性值，屬於雙向資料流
11.v-for 遍歷陣列或物件，語法：v-for="item in arr/obj"
擴充套件知識點：
陣列：v-for="(item,index) in arr"
物件：v-for="(value,key,index) in obj"
附demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue第一個頁面</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style> .a{ background-color: #ccc; } .b{ background-color: pink; } </style> </head> <body> <div id="zl"></div> <script type="text/javascript"> new Vue({ el : "#zl", template : `<div> <div v-text="myText"></div> <hr/> <div v-html="myHtml"></div> <h4 v-if="isExit">v-if控制是否存在</h4> <h4 v-show="isShow">v-show控制是否顯示</h4> <!-- 以下三個指令，需結合使用 --> <button v-if="num == 1" >測試v-if</button> <button v-else-if="num == 2" >測試v-else-if</button> <button v-else >測試v-else</button> <input type="text" v-bind:value="myBind" :file=" 'XXX' "></input> <button v-on:click="myBind='aaa'">用v-on修改vue中資料</button> <button @click="myBind='bbb'">用v-on簡寫修改vue中資料</button> <!-- 雙向繫結 --> <hr/> <i>當用戶輸入“同意”時顯示按鈕：</i> <input type="text" v-model="myModel"/> <button type="submit" v-show="myModel=='同意' ">提交</button> <!-- v-for --> <hr/> <ul> <li v-for="item in stud" :class="item.class">{{item.name}}</li> </ul> <!-- methods --> <button v-on:click="toggleCont">{{name}}</button> <!-- 可縮寫為@:click --> </div>`, data : function(){ return { name : "點我！", myText : "<h1>我是myText的內容</h1>", myHtml : "<h1>我是myHtml的內容</h1>", isExit : true, isShow : true, num : 4, myBind : "v-bind測試", myModel : "v-model測試", stud : [{name:'張三',class:'a'},{name:'李四',class:'b'},{name:'王五',class:'a'}] } }, methods : { toggleCont : function(){ this.name = "聽話" } } }); </script> </body> </html>
四、元件化：
1.區域性元件使用步驟：1.建立子---2.宣告子---3.使用子
建立子元件：var 子元件名稱（首字母大寫）={
template:'子模板'.....跟new Vue(){}中的內容一樣
}
父元件components中宣告子元件：components:{'在emplate中要使用的標籤名':要宣告的子元件名}
父元件template中使用子元件:template:'<標籤名></標籤名>'
2.註冊全域性元件步驟：Vue.component('元件名',{.....})
五、 父元件向子元件傳遞資料：
步驟：1.父傳資料（屬性）---2.宣告資料---3.使用資料
父元件template中，用v-bind將要傳遞的資料繫結到子元件標籤屬性中；
子元件中props:['屬性名']宣告此資料；
子元件template中{{屬性名}}使用此資料
附demo:（用的Hbuild對es6的支援不是特別好，字串拼接，忍。。。）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>vue元件練習</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"></div> <script type="text/javascript"> //註冊全域性元件 Vue.component('my-btn',{ template : '<button style="background-color:red;color:#fff;">紅色的按鈕</button>' }) //區域性子元件 var Mytop = { data : function(){ return { myText : '<i>測試v-text</i>', myHtml : '<i>測試v-html</i>', myValue : '單/雙向資料流...', stud : { name : 'jack', sex : '女', age : '26' }, studs : ['張三','李四','王五'] } }, props : ['myTest'], template : '<div><h5>我是頭部</h5>'+'<p v-text="myText"></p>'+ '<p v-html="myHtml"></p>'+'<p v-if=""></p><hr/>'+ '單向v-bind：<input type="text" :value="myValue"/>'+ '雙向v-model:<input type="text" v-model="myValue">'+ '<p>這裡輸出v-model中雙向繫結的資料：{{myValue}}</p><hr/>'+ 'v-for迴圈物件：<ul><li v-for="(val,key,i) in stud">{{key}}:{{val}}:{{i}}</li></ul>'+ 'v-for迴圈陣列：<ul><li v-for="item in studs">{{item}}</li></ul><hr/>'+ '<b>接收到父元件的資料為：{{myTest}}</b><hr/>'+ '<my-btn/></div>' } var Mybody = { data : function(){ return { isShow : true, isExit : true } }, template : '<div><p v-show="isShow">我是中部v-show測試</p>'+ '<p v-if="isExit">v-if測試</p>'+ '<button @click="myToggle">點我顯示或隱藏</button>'+ '<my-btn/></div>', methods : { myToggle : function(){ this.isShow = !this.isShow; this.isExit = !this.isExit; } } } //入口元件 var App = { components : { 'mytop' : Mytop, 'mybody' : Mybody, }, data : function(){ return { 'myTest' : '我是父向子傳遞的資料' } }, template : '<div><h3>我是入口</h3>'+'<mytop :myTest="myTest"></mytop>'+'<mybody/>'+ '<my-btn/></div>', } new Vue({ el : "#app", components : { 'app' : App }, template : '<app/>' }) </script> </body> </html>
六、 過濾器filter||filters：
作用：用於A資料到B資料的產出
區域性過濾器filters：
1.在區域性元件中定義filters:{'過濾器名',function(原資料形參,引數1){....return...}}
2.使用：template中資料輸出：{{原資料實參(指明針對誰進行操作) | 過濾器名(實參1)}}
全域性過濾器filter：
1.Vue.filter('過濾器名',function(引數){...})
2.使用與區域性過濾器相同
附demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>過濾器filter || filters</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> </div> <script type="text/javascript"> Vue.filter('myTest',function(data){ return '我是全域性過濾器的內容,'+data; }) var App = { template :'<div><h5>請輸入內容，檢視內容是否被反轉：</h5>'+ '<input type="text" v-model="myText"/><p>{{myText | reverse("英文版")}}</p><hr/>'+ '<h5>全域性過濾器：</h5><p>{{mydata | myTest}}</p></div>', data : function(){ return { myText : '', mydata : '123' } }, filters : { reverse : function(str,lang){ return lang + ":" + str.split('').reverse().join(''); } } } new Vue({ el : "#app", components : { 'app' : App }, template : '<app/>' }) </script> </body> </html>
七、watch監視器：
基本資料型別簡單監視，複雜資料型別（obj/arr)深度監視
用法：watch : {
要監視的data資料 : function(newV,oldV){...},
要監視的obj/arr資料 : {
deep : true,
handler : function(newV,oldV){...}
}
}
附demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>監視watch</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> </div> <script type="text/javascript"> var App = { data : function(){ return { myText : '111', stus : [{name : 'jack'}] } }, template : '<div><input type="text" v-model="myText" />'+ '<button @click="stus[0].name= \'rose\' ">深度監視stus[0].name</button></div>', watch : { myText : function(newV,oldV){ if(newV == 'I love you'){ alert(oldV + ' too'); } }, stus : { deep : true,//深度監視 handler : function(newV,oldV){ console.log('監控成功'); } } } } new Vue({ el : '#app', components : { 'app' : App }, template : '<app/>' }) </script> </body> </html>
八、computed群體監視器：
用法：computed : {
監視器名稱 : function(){//(監視器名稱接收此函式return出去的資料)
return this.xxx;//(this.xxx為本元件中data定義的資料)
}
}
附demo:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>computed群體監視</title> 7 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 8 </head> 9 <body> 10 <div id="app"> 11 12 </div> 13 <script type="text/javascript"> 14 var App = { 15 data : function(){ 16 return { 17 value01 : 0, 18 value02 : 0, 19 rate : 0 20 } 21 }, 22 template : '<div><p>計算(a+b)*c的值：</p>a:<input type="text" v-model="value01"/>'+ 23 'b:<input type="text" v-model="value02"/><br/>c:<input type="text" v-model="rate"/>'+ 24 '<p>{{result}}</p></div>', 25 computed : { 26 result : function(){ 27 return (parseFloat(this.value01)+parseFloat(this.value02))*parseFloat(this.rate); 28 } 29 } 30 } 31 new Vue({ 32 el : '#app', 33 components : { 34 'app' : App 35 }, 36 template : '<app/>' 37 38 }) 39 </script> 40 </body> 41 </html>
九、 watch和v-model的區別
v-model : 只用於對資料的雙向繫結及展示。是對單個數據的監視
watch : 可用於對資料的雙向繫結、展示，以及一些複雜的行為。也是對單個數據的監視
computed : 用於群體監視
十、內建元件slot：
父元件傳遞的DOM結構
附demo:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>slot內建元件</title> 7 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 8 <style type="text/css"> 9 li { 10 list-style: none; 11 float: left; 12 width: 33%; 13 height: 50px; 14 background-color: aqua; 15 border: 1px solid black; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="app"></div> 21 <script type="text/javascript"> 22 Vue.component('myLi',{ 23 template : '<li><slot></slot></li>' 24 }) 25 var App = { 26 template : '<div><ul><myLi><h4>111</h4></myLi>'+ 27 '<myLi><button>222</button><b>222</b></myLi>'+ 28 '<myLi><input type="text" value="333"/></myLi>'+ 29 '<myLi>444</myLi><myLi>555</myLi><myLi>666</myLi>'+ 30 '<myLi>777</myLi><myLi>888</myLi><myLi>999</myLi></ul></div>' 31 } 32 new Vue({ 33 el : '#app', 34 components : { 35 'app' : App 36 }, 37 template : '<app/>' 38 }) 39 </script> 40 </body> 41 </html>
十一、元件生命週期：
beforeCreate : 元件建立之前(不可獲取到元件中的資料)
created : 元件建立之後
beforeMount : vue啟動前的DOM
mounted : vue啟動後的DOM
//beforeUpdate/updated在DOM發生更新時才會被觸發
beforeUpdate : 更新前DOM
updated : 更新後DOM
beforeDestory : 本元件銷燬之前
destroyed : 本元件銷燬之後
//對於元件的頻繁建立和銷燬是不對的，內建元件<keep-alive></keep-alive>包裹後的v-if表示啟用或停用該元件
alivated : 元件被啟用
dealivated : 元件被停用
附demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>元件生命週期</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/元件生命週期.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> </div> </body> </html>
1 window.onload = function(){ 2 var MyTest = { 3 data : function(){ 4 return { 5 myText : '111' 6 } 7 }, 8 template : '<h3>{{myText}}</h3>' 9 } 10 var App = { 11 data : function(){ 12 return { 13 myText : 'aaa', 14 isExit : true 15 } 16 }, 17 components : { 18 'myTest' : MyTest 19 }, 20 template : '<div><h5>{{myText}}</h5><button @click="myText+=1 ">更改DOM資料</button>'+ 21 '<hr/><myTest v-if="isExit"></myTest><button @click="isExit = !isExit">建立及銷燬MyTest子元件</button></div>', 22 beforeCreate : function(){ 23 //元件建立之前 24 console.log(this.myText); 25 }, 26 created : function(){ 27 //元件建立之後 28 console.log(this.myText); 29 }, 30 beforeMount : function(){ 31 //vue啟動前的DOM 32 console.log(document.body.innerHTML); 33 }, 34 mounted : function(){ 35 //vue啟動後的DOM 36 console.log(document.body.innerHTML); 37 }, 38 //beforeUpdate/updated在DOM發生更新時才會被觸發 39 beforeUpdate : function(){ 40 //更新前DOM 41 console.log(document.body.innerHTML); 42 }, 43 updated : function(){ 44 //更新後DOM 45 console.log(document.body.innerHTML); 46 } 47 } 48 new Vue({ 49 el : '#app', 50 components : { 51 'app' : App 52 }, 53 template : '<app/>' 54 }) 55 }