一、Vue模板語法
1.理解
1）漸進式JavaScript框架
2）採用自底向上的增量開發
3）Vue核心關注視圖4)MVVM:
Model ——> ViewModel ——> View
Model <—— ViewModel <—— View
視圖的改變，會影響數據，反之亦然。
2.Vue的基礎語法
1）引入Vue的JS文件，搭建好Vue環境
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>2）準備DOM結構
3)實例化Vue組件 new Vue({ // 掛載元素 el:"#app", // el 是element的簡寫，綁定id爲app的html代碼片段 // 定義組件內部數據 data:{ // 數據格式是JSON格式的鍵值對 msg:"Hello Vue!" } }); 4、獲取組件中的數據 "mustache"語法獲取數據：{{key}} 雙花括號取值，key代表的是vue組件中data屬性的key<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> <!-- 1.引入Vue的核心JS文件 --> <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <!-- 2.準備DOM結構 --> <div id="app"> <!-- 4.獲取組件中的數據 "mustache"語法獲取數據：{{key}} 雙花括號取值，key代表的是vue組件中data屬性的key --> {{msg}} </div> </body> <script type="text/javascript"> /*3.實例化Vue組件*/ new Vue({ //掛載元素 el:"#app",//el是element的簡寫，綁定id爲app的HTML代碼片段 //定義組件內部數據 data:{ //數據格式是json格式的鍵值對 msg:"Hello Vue" } }); </script> </html>
3.插值、JavaScript表達式
插值
"mastache"模板（雙花括號），支持表達式，不支持語句<div id="app"> <!-- 插值： "mastache"模板（雙花括號），支持表達式，不支持語句 --> <div>{{msg}}</div> <!-- 插值：--> <div>{{num+1}}</div> <!-- 數值運算 --> <div>{{flag?"好":"不好"}}</div> <!-- 三目運算符--> <div>{{msg.split("").reverse().join("")}}</div> <!-- 字符串方法 --> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ msg:"hello world", num:10, flag:true } }); </script>
二、指令
1.理解
1）指令 (Directives) 是帶有 v- 前綴的特殊屬性。
2）指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
2.文本指令
1）v-text（默認）
渲染文本，響應式。數據改變，則DOM改變。
簡寫： {{}}2）v-once
只會綁定一次，之後數據改變不再影響DOM
- v-html
渲染文本，可以渲染html格式的文本<div id="app"> <!-- v-text --> <div v-text="msg"></div> <div>{{msg}}</div> <!-- v-once --> <div v-once>{{msg}}</div> <!-- v-html --> <div>{{text}}</div> <div v-html="text"></div> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ msg:"Hello Vue!", text:"<h2>江西</h2>" } }); </script>
3.bind指令
v-bind
v-bind指令可以綁定元素的屬性，動態給屬性賦值。
語法：v-bind:屬性名 = "屬性值"
簡寫： :屬性名 = "屬性值"<div id="app"> <div title="不錯">你覺得怎麼樣？</div> <div v-bind:title="msg">你覺得怎麼樣？</div> <!-- 簡寫版 --> <div :title="msg">你覺得怎麼樣？</div> <hr /> <a href="https://cn.vuejs.org/">Vue</a> <br /> <a :href="website">hello</a> <hr /> <img src="https://cn.vuejs.org/images/logo.png" /> <img :src="srcUrl" /> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ msg:'very good', website:"https://cn.vuejs.org/", srcUrl:"https://cn.vuejs.org/images/logo.png" } }); </script>
4.class綁定
綁定多個class
使用對象classObject綁定
使用數組classList綁定
區別：對象classObject和數組classList
對象classObject可以動態添加和刪除樣式名，而數組classList只能添加樣式名<div id="app"> <!-- 綁定多個class --> <div class="active bg">hello</div> <br> <div :class="{active:true,bg:false}">hello</div> <!-- 對象綁定 --> <div :class="classObj">hello</div> <!-- 數組綁定 --> <div :class="classList">hello</div> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ /* 使用對象classObject綁定 */ classObj:{ active:false, bg:true }, /* 數組 */ classList:["bg","flex","test"] } }); </script>
5.style綁定
1）使用內聯對象Object
2）直接傳入對象styleObject
3）使用數組對象styleList<div id="app"> <div style="background-color: antiquewhite;color: #FF0000;">Vue</div> <hr> <div :style="{backgroundColor: bgcolor,color: fontcolor}">Hello</div> <div :style="styleObj">Hello</div> <div :style="styleList">Hello</div> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ bgcolor:'antiquewhite', fontcolor:'red', styleObj:{ color:"blue", backgroundColor:"red" }, styleList:[ { color:"blue", backgroundColor:"red" }, { width:"200px", height:"100px" } ] } }); </script>
6.綁定事件
v-on:事件名
簡寫： @事件名
<div id="app"> <div>{{count}}</div> <button type="button" v-on:click="count++">add</button> <button type="button" @click="count--">down</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ count:0 } }); </script>
7.方法事件處理器
一般來說事件會綁定一個方法，在方法內部處理相關的事件邏輯。
需要在methods屬性中定義方法，然後v-on引用對應相關的方法名。
在Vue組件中定義methods屬性，在methods屬性中定義函數
methods:{
函數名:fucntion(){
},
函數名(){
}
}<div id="app"> <div>{{count}}</div> <button type="button" v-on:click="add">add</button> <button type="button" @click="down">down</button> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ count:0 }, //組件內部方法 methods:{ add:function(){ this.count++; }, down(){ this.count--; } } }); </script>
8.$even對象
在事件處理函數中訪問DOM原生事件event對象，可以使用特殊變量$event對象傳入。
事件調用函數時，加括號與不加括號的區別？
如果事件調用函數，未添加括號，則默認傳遞event參數<div id="app"> <div>{{count}}</div> <button type="button" v-on:click="add($event)">add</button> <button type="button" @click="down">down</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ count:0 }, // 組件內部方法 methods:{ // add 代表的函數名/方法名；e 代表的是形參名 add:function(e){ console.log(e); // 事件對象 console.log(e.type); // 事件類型 console.log(e.target); // 事件觸發的目標 this.count++; }, down(){ this.count--; } } }); </script>
9.事件修飾符
Vue.js 爲 v-on 提供了事件修飾符。通過由點 (.) 表示的指令後綴來調用修飾符。
stop ： 阻止event冒泡，等效於event.stopPropagation()
prevent ： 阻止event默認事件，等效於event.preventDefault()
capture ： 事件在捕獲階段觸發
self ： 自身元素觸發，而不是子元素觸發
once ： 事件只觸發一次<div id="app"> <!-- 默認 --> <div @click="father"> <h3>父元素</h3> <button type="button" @click="child">按鈕</button> </div> <!-- stop:阻止event冒泡，等效於event.stopPropation() --> <div @click="father"> <h3>父元素</h3> <button type="button" @click.stop="child">按鈕</button> </div> <!-- prevent:阻止event默認事件，等效於event.preventDefault() --> <a href="https://cn.vuejs.org/" @click.prevent="test">Vue</a> <hr /> <!-- capture :事件在捕獲階段觸發 --> <div @click.capture="father"> <h3>父元素</h3> <button type="button" @click.capture="child">按鈕</button> </div> <!-- self:自身元素觸發，而不是子元素觸發 --> <div @click.self="father"> <h3>父元素</h3> <button type="button" @click="child">按鈕</button> </div> <!-- 事件只觸發一次 --> <div @click.once="father"> <h3>父元素</h3> <button type="button" @click="child">按鈕</button> </div> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ count:0 }, //組件內部方法 methods:{ father:function(){ console.log("父元素。。。。"); }, child:function(){ console.log("子元素。。。。"); }, test:function(){ console.log("你好啊。。。。"); } } }); </script>
10.鍵值對修飾符
鍵值修飾符
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right<div id="app"> <input @keyup.enter="enterKey"/>enter 鍵 <hr> <input @keyup.13="enterKey"/>enter 鍵 <hr> <input @keyup.delete="deleteKey"/>delete 刪除鍵 <hr> <button @keyup.enter="enterKey">回車</button> <hr> <form action="https://cn.vuejs.org/" method="get"> 姓名：<input @keyup.enter="submit2"/> <br> 密碼：<input type="text"/> <br> </form> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ count:0 }, // 組件內部方法 methods:{ enterKey: function () { console.log('enter 鍵 觸發...'); }, deleteKey: function () { console.log('delete 刪除鍵 觸發...'); }, submit2:function(){ document.getElementsByTagName("form")[0].submit(); } } });
11.表單校驗
Vue <style> .success{ color: green } .error { color: red; } </style> </head> <body> <div id="app"> 姓名：<input type="text" v-model="uname" @input="valid" /> <span :class="validClass" >{{validTxt}}</span> <hr> 用戶名：{{uname}} </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ uname:"", validTxt:"", validClass:{ success:false, error:false } }, // 組件內部方法 methods:{ valid:function(){ // 判斷文本框的值長度是否大於6 if (this.uname.length > 6) { this.validTxt = "校驗成功"; //this.validClass = "success"; this.validClass.success = true; this.validClass.error = false; } else { this.validTxt = "校驗失敗"; //this.validClass = "error"; this.validClass.error = true; this.validClass.success = false; } } } });
12.if指令
v-if
條件判斷，滿足則執行
v-else-if
配合v-if一起使用，作爲一個條件判斷
v-else
配合v-if一起使用，條件不滿足執行
v-show
根據條件渲染html，使用類似v-if
v-if 和 v-show
兩者的區別是v-if是“真正”的條件渲染，只有爲true時纔會被渲染。v-if也是“惰性”的，假如初始條件爲false，那麼條件變爲true時纔會發生第一次渲染。
v-show只是CSS的display屬性的切換，不論初始條件是否成立，都會進行html渲染，然後改變display的值爲none或者block。
一般來說v-if開銷比較大，如果需要頻繁切換顯示不顯示使用v-show，需要進行條件判斷的但是改變很少的使用v-if。<div id="app"> <div v-if="flag">你能看見我！</div> <div v-else>你看不見我！</div> <hr> <div v-if="num==10" > <h4>num的值爲10</h4> </div> <div v-else-if="num==11"> <h4>num的值爲11</h4> </div> <div v-else> <h4>num的值 不爲10 和 11</h4> </div> <hr> <div v-show="flag">True</div> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ num:12, flag:false }, }); </script>
13.for指令
v-for
可以把一組值進行列表渲染
語法形式： item in items
items 是源數據數組
item 是數組元素迭代的別名。
在 v-for 塊中，對父作用域屬性的完全訪問權限。v-for 還支持一個可選的第二個參數爲當前項的索引。
遍歷數組
語法：
item in items
(item,index) in items
說明：
item：數組元素迭代的別名
items：源數據數組
index：當前項的索引
遍歷對象
v-for也可以遍歷對象，可以指定三個形參:
語法：
(value,key,index) in object
說明：
value：對象中屬性的值
key：對象中屬性的鍵
index：當前項的索引
object：源數據對象
key屬性
用 v-for渲染列表時， 使用key屬性給每個指定一個唯一的ID表示，那麼可以在下次數據渲染時，提高渲染速度。它默認用“就地複用”策略。
如果數據項的順序被改變，重複ID的元素將會被再次使用，不會重新渲染。這個默認的模式是高效的。需要用 v-bind 來綁定動態值 (在這裏使用簡寫)：
取值範圍
v-for也可以指定整數，用來重複多次使用模板。
語法：
v-for="i in num"
說明：
i：當前數
num：結束數<div id="app"> <!-- 遍歷數組 --> <ul> <li v-for="f in list">{{f.name}} -- {{f.price}}</li> </ul> <hr > <ul> <li v-for="(item,index) in list"> {{index}} -- {{item.name}} </li> </ul> <hr> <!-- 遍歷對象 --> <ul> <li v-for="(value,key,index) in person"> {{index}} -- {{key}} -- {{value}} </li> </ul> <hr > <ul> <li v-for="(item,index) in list" :key="item.id"> {{index}} -- {{item.name}} </li> </ul> <!-- 遍歷指定次數 --> <ul> <li v-for="i in 5">第{{i}}次</li> </ul> <hr> <ul> <li v-for="i in num">第{{i}}次</li> </ul> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ // 數組 list:[ {id:1,name:'西瓜',price:15}, {id:2,name:'蘋果',price:10}, {id:3,name:'菠蘿',price:25} ], // 對象 person:{ name:'Tim', age:12, love:'music' }, num:10 }, });
14.表單輸入綁定
用 v-model 指令在表單控件元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。
v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值。
因爲它會選擇 Vue 實例數據來作爲具體的值。
通過 JavaScript 在組件的 data 選項中聲明初始值。 文本框
v-model雙向數據綁定
複選框
單個使用時v-model是邏輯值：true和false，
多個一起使用需要指定value值，選中結果綁定v-model的數組。<div id="app"> <!-- 文本框 --> 姓名：<input type="text" v-model="uname"/> <br> 姓名:{{uname}} <hr > <!-- 複選框 --> 是否喜歡：<input type="checkbox" v-model="isLike" /> <br> 是否喜歡：{{isLike}} <hr > 課程： <input type="checkbox" v-model="lesson" value="html">Html <input type="checkbox" v-model="lesson" value="java">Java <input type="checkbox" v-model="lesson" value="python">python <br> 課程：{{lesson}} <hr > <!-- 單選框 --> <input type="radio" value="yes" v-model="love"> <label>喜歡</label> <input type="radio" value='no' v-model="love"> <label>不喜歡</label> <br> <!-- select 下拉框 --> <select v-model="selected"> <option>下雨</option> <option>晴天</option> <option>多雲</option> </select> <br> <!-- 遍歷集合 選中第二個 --> <select v-model="selected2"> <option v-for="item in list" :value="item.value">{{item.name}}</option> </select> </div> </body> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ uname:"", isLike:true, lesson:[], love:"", selected:"晴天", list:[ {name:"西瓜",value:"1"}, {name:"香蕉",value:"2"}, {name:"蘋果",value:"3"} ], selected2:"2" } });
15.修飾符
使用v-model綁定數據後，可以使用修飾進行數據處理：
.lazy：綁定數據默認實時更新，lazy可以在onChange觸發
.number：返回數字類型的值，轉換不成返回NaN
**.trim：**去除數據的前後空格<div id="app"> 姓名：<input type="text" v-model="uname" /> <br> <!-- .lazy：綁定數據默認實時更新，lazy可以在onChange觸發 --> 姓名：<input type="text" v-model.lazy="uname" /><br> 年齡：<input type="text" v-model="age"><br> <!-- .number：返回數字類型的值，轉換不成返回NaN --> 年齡：<input type="text" v-model.number="age"><br> <br> <!-- .trim：去除數據的前後空格 --> 姓名：<input type="text" v-model.trim="userName"><br> <button @click="show">顯示</button> <hr> 姓名：{{uname}}<br> 年齡：{{age}}<br> 姓名：{{userName}}<br> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ uname:"", age:'10', userName:"" }, methods:{ show:function(){ console.log(this.age); // console.log( typeof this.age); } } });
三、組件
1.組件的定義和使用
組件可以擴展 HTML 元素，封裝可重用的代碼。
Vue自定義組件分爲兩種：
全局註冊和局部註冊，全局組件可以在任何地方引用，局部組件只能在當前Vue實例使用。定義組件
全局註冊： 使用Vue.component(tagName, options)來定義 tagName 代表的是組件名，所有在定義組件時儘量使用中劃線“-”來指定組件名 options 代表的是組件中的相關配置 template 組件的模板局部註冊 在Vue實例對象中，通過components屬性設置局部組件 components:{ tagName:{ template:"內容" } } tagName 代表的是組件名，所有在定義組件時儘量使用中劃線“-”來指定組件名 template 組件的模板 注意： HTML 特性是不區分大小寫的，所有在定義組件時儘量使用中劃線“-”來指定組件名。 即使，使用了駝峯標示命名如：myComponent，在頁面引用時仍然要使用<my-component>進行引用。 使用組件 在指定的元素中，使用 <組件名></組件名> 方式 注：可以使用單標籤（<組件名/>），但不建議；如果使用了，後面的代碼不會生效<div id="app"> <!--使用組件 --> <my-hello></my-hello> <my-hello></my-hello> <!-- <my-hello/> --><!-- 不建議使用單標籤，如果使用了，後面的代碼不會生效 --> <my-hello2></my-hello2> </div> <hr> <div id="root"> <my-hello></my-hello> <my-hello2></my-hello2> </div> </body> <script type="text/javascript"> /* 全局註冊 */ Vue.component('my-hello',{ template:'<h4>Hello</h4>' }); var app = new Vue({ el:"#app", data:{ }, // 定義局部組件 components:{ "my-hello2":{ template:"<h3>Hello Vue</h3>" } } }); new Vue({ el:"#root", data:{ } });
2.is屬性
在table標籤中直接使用自定義組件，無法正常顯示。DOM解析時會解析到
標籤的外部
原因是：
table/ol/ul/select 這種html標籤有特殊的結構要求,不能直接使用自定義標籤。他們有自己的默認嵌套規則
解決方案：
可以使用is進行標籤轉換
<指定元素 is=“組件名”></指定元素>
<table id="app"> <tr is="my-hello"></tr> </table> <hr> </body> <script type="text/javascript"> /* 全局註冊 */ Vue.component('my-hello',{ template:'<h4>Hello</h4>' }); var app = new Vue({ el:"#app", data:{ } });
3.模板
1)直接使用字符串定義
單行字符串 ""或’’
多行字符串 ``2)使用
4.data屬性
通過data屬性指定自定義組件的初始數據，要求data必須是一個函數，如果不是函數就會報錯。
<div id="app"> <my-hello></my-hello> <hr > <my-hello></my-hello> <hr > <my-hello></my-hello> </div> </body> <script type="text/javascript"> /* 全局註冊 */ /* 單行字符串 */ Vue.component('my-hello',{ template:` <div> 數值：{{count}} --- {{msg}}<br/> <button @click="count++">add</button> </div> `, data:function(){ return {count:0,msg:"Hello"}; } }); var app = new Vue({ el:"#app", data:{ } });