前端框架vue學習
1、VUE概述
1. Vue.js 是什麼？
- Vue.js 是簡單小巧，漸進式，功能強大的技術棧
2. Vue.js 的模式
- MVVM模式，視圖層和數據層的雙向綁定，讓咱們無需再去關心DOM操做的事情，更過的精力放在數據和業務邏輯上去
3. Vue.js 環境搭建
- script 引入 src（如：
<script src="../lib/vue.js" type="text/javascript"></script>
） - vue 腳手架工具 vue-cli 搭建
4.Vue.js 的優勢
- 低耦合。視圖（View）能夠獨立於 Model 變化和修改，一個 ViewModel 能夠綁定到不一樣的 "View" 上，當 View 變化的時候 Model 能夠不變，當 Model 變化的時候 View 也能夠不變。
- 可重用性。能夠把一些視圖邏輯放在一個 ViewModel 裏面，讓不少 view 重用這段視圖邏輯。
- 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計。
- 可測試。界面素來是比較難於測試的，而如今測試能夠針對 ViewModel 來寫。
- 易用、靈活、高效。
2、VUE的指令學習
1.text+html+cloak+插值表達式學習
指令：
插值表達式：
語法：{{要插入的值}}，此時至關於佔位符，到時候{{關鍵字}}會被替換成
Model中的數據
bug點：
當網速較慢時，Vue初始化未完成時，插值表達式不能被解析，會直接顯示
出來，加載完畢以後又會被替換成真實結果，形成閃爍（Vue的加載代碼寫在
HTML元素以後時會出現該bug）
v-cloak指令：
語法：把它看成HTML元素的一個屬性使用
示例：
<p v-cloak>{{msg1}}</p>
特色：
當Vue加載完畢後，v-cloak屬性會自動消失
使用：
添加以下CSS樣式：讓全部帶v-cloak屬性的元素隱藏，Vue加載完成後顯示
實現，解決插值表達式閃爍的問題
[v-cloak]{
display: none;
}
v-text：
語法：<p v-text="msg1"></p>
做用：和插值表達式同樣，用於給HTML元素添加文本
區別：
1.v-text不會存在閃爍問題
2.v-text會將Model中的數據徹底替換到HTML元素中（覆蓋）
3.插值表達式只會將Model中的數據替換到插值表達式中（佔位符內容的替換）
相同點：
1.插值表達式和v-text均可以給HTML元素顯示文本
2.插值表達式和v-text都不會解析要添加文本中的HTML標籤（原樣顯示）
v-html：
和v-text的惟一區別：給HTML添加內容時會解析內容中的HTML
實例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-cloak、v-text、v-html指令以及插值表達式的學習</title> <style> [v-cloak]{ display: none; }
</style> </head> <body> <h1>v-cloak、v-text、v-html指令以及插值表達式的學習</h1> <div id="app"> <p v-cloak>{{msg1}}</p> <p>{{msg1}}</p> <p v-text="msg1"></p> <p v-text="msg2"></p> <p>{{msg2}}</p> <p v-html="msg2"></p> </div> <script src="../lib/vue.js" type="text/javascript"></script> <script type="text/javascript"> //vue應用對象 var vm = new Vue({ ////綁定屬性 el:"#app", data:{ msg1:"Hello", msg2:"<p style='color:red'>我是一個p標籤</p>" } }); </script> </body> </html>
編輯測試的結果：javascript
2.bind+on指令的學習
v-bind：
語法：在HTML元素的屬性目前加上綁定標識，此時HTML的該屬性的值就會根據屬性值的名字從Model中獲取數據
示例：
<label>用戶名：<input type="text" name="username" v-bind:value="msg" /></label>
var vm = new Vue({
el:"#app",
data:{
msg:"我是來自Model中的內容！",
name:"李師師"
}
});
注意：
1.【v-bind:】用於綁定HTML元素屬性的值
2.【v-bind:】能夠簡寫爲:
3.Vue框架會把使用了v-bind:標識的HTML的屬性的值看成一個Javascript表達式來使用
只要表達式合法，就能執行（固然，數據必須時字面量或來自於Model中）
如：
:value="msg+'你好'"
:value="msg+name"
v-on：
語法：在HTML的事件屬性（不帶on）前加上綁定標識，此時HTML觸發此事件時，會執行事件中綁定的代碼
示例：
<button v-on:click="sayHello(name)">點擊下顯示你好</button>
<button @click="sayHello(name)">點擊下顯示你好</button>
var vm = new Vue({
el:"#app",
data:{
msg:"我是來自Model中的內容！",
name:"李師師"
},
methods:{
sayHello:function (name) {
alert("你好！"+name);
}
}
});
注意：
1.常見的web網頁的事件都支持綁定
2.事件名字不帶on
3.事件觸發的方法必須在methods中定義
4.v-on標識的屬性會被Vue解析爲特定JavaScript，只要內容符合JavaScript規範
都能正確執行（好比傳入參數）
4.【v-on:】等價於【@】
實例演示：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-bind、v-on指令的學習</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <h1>v-bind、v-on指令的學習</h1> <div id="app"> <label>用戶名：<input type="text" name="username" v-bind:value="msg" /></label> <hr/> <label>用戶名：<input type="text" name="username" :value="msg" /></label> <hr/> <label>用戶名：<input type="text" name="username" :value="msg+'你好'"></label> <hr/> <label>用戶名：<input type="text" name="username" :value="msg+name"></label> <button v-on:click="sayHello(name)">點擊下顯示你好</button> <button @click="sayHello(name)">點擊下顯示你好</button> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{
msg:"我是一個練習長達兩年半的練習生！",
name:"菜徐坤"
}, methods:{ sayHello:function (name) { alert("你好！"+name); } } }); </script> </body>
測試結果：
點擊按鈕css
3.VUE中的事件修飾符
1.事件默認是會冒泡的（點擊內部元素，會逐層向外擴散，相同的事件就會被觸發---冒泡）
阻止方式：給須要阻止冒泡的事件加上stop修飾
特色：事件到了加了stop修飾的元素時就會被阻斷
2.阻止元素的默認事件
元素默認會執行它的默認事件
默認事件：
2.1：超連接的跳轉
2.2：表單的提交
阻止方式：給須要阻止默認事件的事件綁定加上prevent修飾
3.使用事件捕獲模式處理事件（觸發事件的順序和事件冒泡恰好相反）
特色：加了capture事件修飾的容器先捕獲到事件，而後按照冒泡順序
觸發，固然若是其它元素也設置了capture事件修飾，則按照修飾順序來
使用方式：給須要使用捕獲機制處理的事件綁定加入修飾符capture
4.事件源是自身時才觸發事件
使用方式：給元素綁定的事件中加入self修飾，此時只有事件源是元素自己時
纔會觸發事件
特色：
1.能阻止事件冒泡
2.只能阻止自身的事件不被觸發，而其子元素和父元素依然知足冒泡行爲
或捕獲機制
3.這是stop和self之間的一個差距
5.限定事件有效次數爲1
使用方式：給元素綁定的事件加入once修飾，表示此事件只會執行一次
特色：綁定事件只執行一次，那麼意味着事件的全部修飾也會在事件無效後消失
好比：事件冒泡和默認行爲
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的事件修飾符</title> <script src="../lib/vue.js" type="text/javascript"></script> <style type="text/css"> div[id]{ box-sizing: border-box; } #outer{ width: 400px; height: 400px; background-color: yellow; padding: 100px; } #inner{ width: 200px; height: 200px; background-color: red; padding: 50px; } #content{ width: 100px; height: 100px; background-color: deeppink; } </style> </head> <body> <h1>Vue中的事件修飾符</h1> <div id="app"> <!--阻止事件冒泡--> <!--<div id="outer" @click="outerClick()"> <div id="inner" @click.stop="innerClick()"> <div id="content" @click="contentClick()"></div> </div> </div>--> <!--阻止默認事件--> <hr/> <a href="https://www.baidu.com" @click.prevent="aClick">點擊跳轉到百度</a> <hr/> <form action="https://www.baidu.com"> <button @click.prevent="btnClick">點擊提交表單</button> </form> <!--使用捕獲機制處理綁定事件--> <!--<div id="outer" @click.capture="outerClick()"> <div id="inner" @click.capture="innerClick()"> <div id="content" @click.capture="contentClick()"></div> </div> </div>--> <!--使用self表示自身觸發--> <div id="outer" @click="outerClick()"> <div id="inner" @click.self="innerClick()"> <div id="content" @click="contentClick()"></div> </div> </div> <!--阻止默認事件--> <hr/> <a href="https://www.baidu.com" @click.prevent.once="aClick">點擊跳轉到百度</a> <hr/> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{}, methods:{ contentClick(){ console.log("content被點擊了..."); }, innerClick(){ console.log("inner被點擊了..."); }, outerClick(){ console.log("outer被點擊了..."); }, aClick(){ console.log("a被點擊了..."); }, btnClick(){ console.log("btn被點擊了..."); } } }); </script> </body> </html>
測試結果：
4.雙向數據綁定以及實現簡易計算器
v-mode：惟一的一個實現雙向數據綁定的指令
語法：
<input type="text" v-model="num1" />
data:{
num1:'0',
num2:'0'
}
適用元素：表單元素，其它元素不能使用v-model指令
input系列（能夠輸入內容的）、select、textarea
雙向綁定：
model層數據的改變會影響view層HTML結果
HTML中表單元素值的改變會寫入對應的model層的數據中
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的雙向數據綁定指令v-mode</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <div class="box"> <h1>Vue中的雙向數據綁定指令v-mode</h1> <label>單價：<input type="text" v-model="price"></label><br/> <label>數量：<input type="text" v-model="num"></label><br/> <button @click="calc()">點擊計算總價</button><br/> <label>總價：<span style="color:deeppink" v-text="sum"></span></label> <hr/> <h1>使用v-mode雙向數據綁定實現建議計算器</h1> <label>操做數1：<input type="text" v-model="num1" /></label> <select v-model="opr"> <option value="+">+</option> <option value="-">-</option> <option value="*">x</option> <option value="/">/</option> </select> <label>操做數1：<input type="text" v-model="num2" /></label> <button @click="doCalc()">=</button> <span style="font-size: 20px;color:deeppink" v-text="result"></span> </div> <script type="text/javascript"> var vm2 = new Vue({ el:".box", data:{ price:12, num:1, sum:12, num1:'0', num2:'0', opr:'+', result:0 }, methods:{ calc(){ this.sum = this.price*this.num; }, doCalc(){ //標準的switch分支根據計算類型不一樣獲得不一樣結果 /*switch(this.opr){ case "+": this.result = parseInt(this.num1)+parseInt(this.num2); break; case "-": this.result = parseInt(this.num1)-parseInt(this.num2); break; case "*": this.result = parseInt(this.num1)*parseInt(this.num2); break; case "/": this.result = parseInt(this.num1)/parseInt(this.num2); break; }*/ //使用eval計算獲取結果 this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)"); } } }); </script> </body> </html>
測試結果：
5.Vue給行內元素綁定上樣式屬性
Vue綁定元素樣式：
Vue實現行內樣式：
方式1：傳入JavaScript對象{樣式名字1:值1,樣式名字2:值2...}
方式2：傳入一個Vue中的Model層的一個屬性值
方式3：傳入一個Vue中的Model層的多個屬性值組成的數組
Vue實現class樣式：
方式1：直接傳入單個class的名字
:class="'color'"
方式2：傳入class名字組成的數組
:class="['color','fontSize']"
方式3：使用三目表達式實現樣式的邏輯加入
:class="['color','fontSize',false?'active':'']"
:class="['color','fontSize',5>3?'active':'']"
:class="['color','fontSize',flag===false?'active':'']"
方式4：數組中嵌套對象
:class="['color','fontSize',{active:false}]"
方式5：整個class的值就使用數組
:class="{color:true,fontSize:false,space:true,style:true,active:false}
方式6：從Vue的Model中獲取class值
:class="[classInBox01,classInBox02]"
【注意】
1.JavaScript的對象中，屬性能夠不使用引號（單雙）
2.當屬性包含字符-的時候，必須使用引號，不然會報錯
3.使用vue綁定class值時，class的值必須使用引號引發來，不然會看成變量從Model中查找
4.使用vue綁定class值時，若是值爲對象，則不能加引號
實例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用Vue給元素綁定樣式屬性</title> <script src="../lib/vue.js" type="text/javascript"></script> <style type="text/css"> .color{ color: deeppink; } .fontSize{ font-size: 30px; } .space{ letter-spacing: 0.5em; } .style{ font-style: italic; } .active{ background-color: yellow; } </style> </head> <body> <div id="app"> <h1 v-bind:style="{color:'red','font-size':'20px'}">我是一個H1標題，它會發生不少變化喔~</h1> <h1 v-bind:style="innerStyle01">我是一個H1標題，它會發生不少變化喔~</h1> <h1 v-bind:style="[innerStyle01,innerStyle02]">我是一個H1標題，它會發生不少變化喔~</h1> <hr/> <h1 :class="'color'">我是一個H1標題，它會發生不少變化喔~</h1> <h1 :class='"color"'>我是一個H1標題，它會發生不少變化喔~</h1> <h1 :class="['color','fontSize']">我是一個H1標題，它會發生不少變化喔~</h1> <h1 :class="['color','fontSize',false?'active':'']">我是一個H1標題，它會發生不少變化喔~</h1> <h1 :class="['color','fontSize',5>3?'active':'']">我是一個H1標題，它會發生不少變化喔~</h1> <h1 :class="['color','fontSize',flag===false?'active':'']">我是一個H1標題，它會發生不少變化喔~</h1> <h1 :class="['color','fontSize',{active:false}]">我是一個H1標題，它會發生不少變化喔~</h1> <h1 :class="{color:true,fontSize:false,space:true,style:true,active:false}">我是一個H1標題，它會發生不少變化喔~</h1> <h1 :class="[classInBox01,classInBox02]">我是一個H1標題，它會發生不少變化喔~</h1> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ innerStyle01:{color:'red','font-size':'20px'}, innerStyle02:{"letter-spacing":"1em"}, flag:true, classInBox01:{color:true,fontSize:false}, classInBox02:{space:true,style:true,active:false} } }); </script> </body> </html>
測試結果：
6.VUE中的for指令
1.使用v-for指令遍歷簡單數組
<p v-for="name in names">{{name}}</p>
<p v-for="name,index in names" v-text="name+'---'+index"></p>
2.使用v-for指令遍歷對象數組
<p v-for="user in users">id：{{user.id}}---name：{{user.name}}</p>
3.使用v-for指令遍歷對象屬性值
<p v-for="value,key in cqCity">{{key+'--'+value}}</p>
4.使用v-for指令遍歷數字（做用就是標準的for循環次數遍歷）
<p v-for="num,index in 12" v-text="num+'---'+index"></p>
【注意】
1.遍歷獲得的值可使用【插值表達式、v-text、v-html】顯示
2.無論遍歷何種數據類型，均可以獲得值和索引
3.遍歷對象屬性和值時能夠獲得【值、屬性名字、索引】
4.值的賦值順序是：值、【鍵名】、索引
5.一次遍歷中，多個結果之間使用,分割便可對應賦值（value,key,index）
6.遍歷過程當中接受值的變量名字能夠任意
7.遍歷數字時數字是從1開始，不能是負數（由於該功能是固定次數遍歷）
8.在組件中使用數據時，必定要用key惟一綁定數據（保證對UI組件的操做不會由於其它組件的變化而發生變化）
注意：
1.key必須是基本數據類型（string/number）
報錯：Avoid using non-primitive value as key, use string/number value instead.
2.key的數據值必定不要重複
報錯：Duplicate keys detected: '3'. This may cause an update error.
技巧：通常使用對象中的值惟一屬性（主鍵）做爲key，好比id
語法：
<p v-for="user in users" :key="user.id">
<label><input type="checkbox"/>{{user.id}}---{{user.name}}</label>
</p>
【知識點】
1.若是組件的屬性的值是一個變量，則必須使用v-bind:或者:進行屬性值的綁定
2.數組的push()方法用於向數組末尾加入元素，數組的unshift()方法用於向數組最前面加入元素
this.users.push({id:this.id,name:this.name,age:this.age});
this.users.unshift({id:this.id,name:this.name,age:this.age});
3.在遍歷對象數組並結合組件（表單元素）一塊兒使用時，必定要指定惟一的key屬性，進行組件和數據
的惟一關聯，避免被其它操做（指非本元素）影響
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的for指令</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <div id="app"> <h1>Vue中的for指令</h1> <p v-for="name in names">{{name}}</p> <hr/> <p v-for="name,index in names" v-text="name+'---'+index"></p> <hr/> <p v-for="user in users" v-text="user"></p> <hr/> <p v-for="user in users">id：{{user.id}}---name：{{user.name}}---age：{{user.age}}</p> <hr/> <p v-for="value,key in cqCity">{{key+'--'+value}}</p> <hr/> <p v-for="num in 12" v-text="num"></p> <hr/> <p v-for="num,index in 12" v-text="num+'---'+index"></p> <h1>Vue中的for指令實現數據綁定</h1> <label>id：<input type="text" v-model="id"/></label> <label>name：<input type="text" v-model="name"/></label> <label>age：<input type="text" v-model="age"/></label> <label><button @click="add()">添加人員信息</button></label> <p v-for="user in users" :key="user.id"> <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label> </p> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ names:["陳斯","楊曉露","徐子雁","冉春嫦","冷芹","冉維","彭麗敏","王超羣","彭前"], users:[ {id:1,name:"胡歌",age:32}, {id:2,name:"袁弘",age:33}, {id:3,name:"霍建華",age:35} ], cqCity:{no:"渝",level:"市",area:["渝北區","渝中區","江北區","沙坪壩區","江北區"]}, id:'', name:'', age:'' }, methods:{ add(){ //this.users.push({id:this.id,name:this.name,age:this.age}); this.users.unshift({id:this.id,name:this.name,age:this.age}); } } }); </script> </body> </html>
測試結果：html
7.VUE的if和show指令
v-if和v-show指令：
v-if和v-show的區別？
1.v-if切換元素狀態的具體操做是（建立元素--刪除元素）
比較消耗建立性能
2.v-show切換元素狀態的具體操做是（修改css的display樣式）
比較消耗渲染性能
使用技巧：
若是該元素會常常顯示/隱藏，則使用v-show
若是該元素默認狀況下不會顯示（大多數時候不會顯示），則使用v-if
代碼技巧：
若是使用vue綁定的方法只有一句代碼，則能夠直接寫在綁定結果中
<button @click="flag=!flag">控制元素的顯示隱藏</button>
實例：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue中的if和show指令</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <h1>使用vue中的v-if和v-show指令實現元素的顯示和隱藏</h1> <div id="app"> <button v-on:click="toggle()">控制元素的顯示隱藏</button> <button @click="flag=!flag">控制元素的顯示隱藏</button> <p v-if="flag">我是使用v-if控制的p標籤</p> <p v-show="flag">我是使用v-show控制的p標籤</p> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ flag:true }, methods:{ toggle(){ this.flag = !this.flag; } } }); </script> </body> </html>
測試結果：前端
可見點擊後，原按鈕下的文本信息被隱藏
8.使用Vue和bootstrap模擬數據表的操做
數組方法：
回調中的返回值不能阻止循環（必須循環完成才能獲得最後結果）
forEach()---返回void，在回調內部能夠作任何操做
filter()----返回過濾後的數組
回調中的返回值能夠阻止繼續循環（查到告終果直接結束循環）
findIndex()-返回整數（內部回調函數最終沒有返回true時，則返回-1，不然返回回調過程當中的下標）
some()------返回boolean（就是回調中的return語句的結果）
元素操做：
splice(startIndex,count,...newElements)：刪除從startIndex下標處開始的count個元素
還能夠添加新元素newElements，返回新的數組
push(newElements)：在數組末尾添加新的元素newElements，返回新數組的長度
unshift(newElements)：在數組的最前方添加新的元素newElements，返回新數組的長度
字符串方法：
其它類型數據->字符串
var dataStr = String(其它類型數據);
var dataStr = 對象.toString();
var dataStr = 對象+'';
模板字符串：
使用飄號 `` 包裹佔位模板-> var dateStr = `${year}-${month}-${dayNow}`
此時模板中的${year}等會被解析成對應變量的值 如 year month dayNow
字符串填充：
padStart(length,padContent)--在字符串的起始位置填充內容padContent，直至字符串長度爲length
padEnd(length,padContent)----在字符串的結束位置填充內容padContent，直至字符串長度爲length
自定義過濾器：
Vue全局過濾器：
1.必須定義在建立Vue對象以前（Javascript的邊解析邊執行原理）
2.定義以後在整張頁面中可使用（一個頁面一個Window，一個Window下只有一個Vue）
3.定義方式
參數1：固定（須要被過濾處理的數據）
參數2...參數n：過濾器被調用時傳遞的參數
Vue.filter("過濾器名字",function(data,param1,param2...){
});
4.調用方式
<h1>{{msg|v-過濾器名字(參數值1,參數值2...)|過濾器2...|過濾器n...}}</h1>
Vue具體對象（特定做用域）過濾器：
1.定義在一個Vue對象中
2.定義方式
var vm = new Vue({
el:"#app1",
data:{},
methods:{},
filters:{
過濾器名字:function(data,param1,param2...){
}或
過濾器名字(data,param1,param2...){
}
}
});
【注意】
1.全局過濾器必定要定義在使用Vue以前
2.Vue的過濾器執行原理
渲染內容 -- 交給第一個處理器 -- 獲得結果 -- 交給第二個處理器 -- 獲得結果 .... 獲得結果--渲染
按鍵修飾符：（用於修飾鍵盤事件，當按鍵匹配時觸發）
系統內置：
.enter、.tab、.delete (捕獲「刪除」和「退格」鍵)、.esc、.space
.up、.down、.left、.right
使用方式：
<p @keyup.enter="add()">在p標籤上按下回車鍵</p>
<p @keyup.13="add()">在p標籤上按下回車鍵</p>
原理：
把事件綁定後的修飾keyCode拿到Vue內部事件對象event的keyCode進行比較，匹配則觸發
系統把常見的按鍵的keyCode和別名進行了對應（13--enter等）
自定義按鍵修飾：
Vue.config.keyCodes.別名=特定keyCode;
【注意】
1.自定義的按鍵修飾應該寫在使用Vue以前
2.按鍵修飾是能夠串聯的
如 <p @keyup.enter.down="add()">在p標籤上按下回車鍵</p> 表示按下 回車鍵和下鍵 都會觸發
自定義指令：https://cn.vuejs.org/v2/guide/custom-directive.html#ad
系統內置：
v-cloak、v-text、v-html、v-bind、v-on、v-for、v-if、v-show、v-model
自定義：
全局：
1.必須定義在使用Vue以前（邊解析邊執行原理）
2.定義方式
參數1：指令名字
參數2：各聲明周期函數組成的對象（周期函數可選重寫，並不必定須要所有重寫）
bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)
update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前
指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新
componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用
unbind：只調用一次，指令與元素解綁時調用
生命週期函數的參數說明：
el：指令所綁定的元素，能夠用來直接操做 DOM 。
binding：一個對象，包含如下屬性（def、name、rawName、value、expression、modifiers）
vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
Vue.directive("指令名字",{
bind:function (el, f, vnode) {},
inserted:function (el, binding, vnode, oldVnode) {},
update:function (el, ref, vnode) {},
componentUpdated:function (el, binding, vnode) {},
unbind:function (el, binding, vnode, oldVnode, isDestroy) {}
});
局部：
定義方式：
var vm = new Vue({
el:"#app",
data:{},
methods:{},
filters:{},
directives:{
指令名字1:{
bind:function(){},
inserted:function(){},
update:function(){},
componentUpdated:function(){},
unbind:function(){}
},
指令名字2:{}
....
}
});
簡易定義方式：
Vue.directive("指令名字",function(el,binding,vnode,oldVnode){
此時function中的代碼會做用到bind和inserted鉤子函數上
});
【注意】
1.自定義的指令，Vue系統會自動給名字加上v-
2.調用指令時，必定要加上v-，若是你的指令名字是以v-開始，則最終調用是v-v-指令名字
3.自定義的指令，須要指定其對應的鉤子函數（如不指定，則使用默認實現）
4.自定義指令時，常關注的鉤子函數（bind、inserted）（所以自定義指令的簡寫方式默認就是實現該鉤子函數）
Vue數據查看工具：vue Devtools
安裝：瀏覽器在線安裝插件vue Devtools或者本地安裝插件vue Devtools
使用：
1.該插件只能在使用了vue.js的站點上使用
2.該插件須要打開審查元素進行使用
3.進入審查元素時，選擇vue菜單項便可
4.左側的一個Root表明一個vue實例對象（一個做用域空間）
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用vue和Bootstrap模擬數據表的操做</title> 6 <link href="../lib/bootstrap.css" rel="stylesheet" type="text/css" /> 7 <script src="../lib/vue.js" type="text/javascript"></script> 8 </head> 9 <body> 10 11 <h1>使用vue和Bootstrap模擬數據表的操做</h1> 12 <div id="app"> 13 <div class="panel panel-primary"> 14 <div class="panel-heading"> 15 <h3 class="panel-title">汽車品牌</h3> 16 </div> 17 <div class="panel-body form-inline"> 18 <label @keyup.enter="add()"> 19 Id： 20 <input type="text" class="form-control" v-model="id" /> 21 </label> 22 <label> 23 Name： 24 <input type="text" class="form-control" v-model="name" v-go/> 25 </label> 26 <label> 27 CTime： 28 <input type="text" class="form-control" v-model="cTime" @keyup.f2.13="add()"/> 29 </label> 30 <button class="btn btn-primary" @click="add()">添加</button> 31 <label> 32 Keywords： 33 <input type="text" class="form-control" v-model="keywords" v-focus/> 34 </label> 35 </div> 36 </div> 37 <table class="table table-bordered table-hover table-responsive table-striped"> 38 <thead> 39 <tr> 40 <th>Id</th> 41 <th>Name</th> 42 <th>CTime</th> 43 <th>Operation</th> 44 </tr> 45 </thead> 46 <!--綁定固定數據--> 47 <!--<tbody> 48 <tr v-for="car in cars" :key="car.id"> 49 <td>{{car.id}}</td> 50 <td>{{car.name}}</td> 51 <td>{{car.cTime}}</td> 52 <td><a href="#" @click.prevent="del(car.id)">刪除</a></td> 53 </tr> 54 </tbody>--> 55 56 <!--綁定動態搜索數據--> 57 <tbody> 58 <tr v-for="car in search(keywords)" :key="car.id"> 59 <td>{{car.id}}</td> 60 <td>{{car.name}}</td> 61 <td>{{car.cTime|dateFormat()}}</td> 62 <td><a href="#" @click.prevent="del(car.id)">刪除</a></td> 63 </tr> 64 </tbody> 65 </table> 66 </div> 67 <script type="text/javascript"> 68 //建立全局時間格式化過濾器 69 Vue.filter("dateFormat",function (data,pattern) { 70 //console.log(this,data,pattern); 71 var date = new Date(data); 72 var year = String(date.getFullYear()).padStart(2,'0'); 73 var month = String(date.getMonth()+1).padStart(2,'0'); 74 var dayNow = String(date.getDate()).padStart(2,'0'); 75 var hour = String(date.getHours()).padStart(2,'0'); 76 var minute = String(date.getMinutes()).padStart(2,'0'); 77 var seconds = String(date.getSeconds()).padStart(2,'0'); 78 if(pattern&&pattern.toLowerCase()==="yyyy-mm-dd"){ 79 return year+"-"+month+"-"+dayNow; 80 }else{ 81 return `${year}-${month}-${dayNow} ${hour}:${minute}:${seconds}`; 82 } 83 }); 84 //配置按鍵修飾符 85 Vue.config.keyCodes.f2=113; 86 //定義全局指令 87 //bind: function bind (el, ref, vnode) 88 Vue.directive("focus",{ 89 bind:function (el,data,vNode) { 90 console.log(el,data,vNode); 91 //el.focus(); 92 }, 93 inserted:function (el,ref,vNode) { 94 el.focus(); 95 }, 96 update:function () { 97 98 }, 99 componentUpdated:function () { 100 101 }, 102 unbind:function () { 103 104 } 105 }); 106 var vm = new Vue({ 107 el:"#app", 108 data:{ 109 id:'', 110 name:'', 111 cTime:'', 112 keywords:'', 113 cars:[ 114 {id:1,name:"蘭博基尼",cTime:new Date()}, 115 {id:2,name:"保時捷",cTime:new Date()}, 116 {id:3,name:"瑪莎拉蒂",cTime:new Date()}, 117 ] 118 }, 119 methods:{ 120 add(){ 121 var newCar = {id:this.id,name:this.name,cTime:this.cTime}; 122 this.cars.push(newCar); 123 this.id = this.name = this.cTime = ''; 124 }, 125 del(id){ 126 //步驟1：拿到id 127 //步驟2：根據id值刪除數據 128 //真實數據庫：發送請求便可 129 //模擬數據：根據對象的id值，從數組中查找出該id值對應的對象的索引 130 //步驟3：執行刪除操做 131 //真實數據庫：發送請求刪除 132 //模擬數據：從數組中移出 133 //方法聲明：some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean; 134 //this.doDel1(id); 135 //this.doDel2(id); 箭頭函數 136 this.doDel3(id); 137 }, 138 doDel1(id){ 139 var _this = this; 140 var isOk = this.cars.some(function (car,index,callObj) { 141 //callObj：每次調用some方法的數組 142 //this：Window對象 143 console.log(callObj,this); 144 if(car.id === id){ 145 console.log(car); 146 //splice(start: number, deleteCount: number, ...items: T[]): T[]; 147 _this.cars.splice(index,1).unshift(); 148 return true; 149 } 150 }); 151 }, 152 doDel2(id){ 153 var isOk = this.cars.some((car,index,callObj)=>{ 154 console.log(callObj,this); 155 if(car.id===id){ 156 this.cars.splice(index,1); 157 return true; 158 } 159 }); 160 }, 161 doDel3(id){ 162 //findIndex(predicate: (value: T, index: number, obj: T[]) => boolean, thisArg?: any): number; 163 //返回找到的索引，找不到返回-1 164 var index = this.cars.findIndex((car,index,callObj)=>{ 165 if(car.id===id){ 166 return true; 167 } 168 }); 169 console.log(index); 170 if(index!==-1){this.cars.splice(index,1);} 171 }, 172 search(keywords){//執行過濾搜索 173 /*var newCars = []; 174 //forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void; 175 this.cars.forEach((car,index,callObj)=>{ 176 if(car.name.indexOf(keywords)!==-1){ 177 newCars.push(car); 178 } 179 }); 180 return newCars; 181 //console.log(keywords);*/ 182 183 //filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[]; 184 var newCars = this.cars.filter((car,index,callObj)=>{ 185 //includes(searchString: string, position?: number): boolean; 186 if(car.name.includes(keywords)){ 187 return car; 188 } 189 }); 190 return newCars; 191 } 192 }, 193 filters:{}, 194 directives:{ 195 go(el,ref,vNode){ 196 console.log(el,ref,vNode); 197 } 198 } 199 }); 200 </script> 201 </body> 202 </html>
測試結果：vue
9.在vue中自定義過濾器
自定義過濾器：
Vue全局過濾器：
1.必須定義在建立Vue對象以前（Javascript的邊解析邊執行原理）
2.定義以後在整張頁面中可使用（一個頁面一個Window，一個Window下只有一個Vue）
3.定義方式
參數1：固定（須要被過濾處理的數據）
參數2...參數n：過濾器被調用時傳遞的參數
Vue.filter("過濾器名字",function(data,param1,param2...){
});
4.調用方式
<h1>{{msg|v-過濾器名字(參數值1,參數值2...)|過濾器2...|過濾器n...}}</h1>
Vue具體對象（特定做用域）過濾器：
1.定義在一個Vue對象中
2.定義方式
var vm = new Vue({
el:"#app1",
data:{},
methods:{},
filters:{
過濾器名字:function(data,param1,param2...){
}或
過濾器名字(data,param1,param2...){
}
}
});
【注意】
1.全局過濾器必定要定義在使用Vue以前
2.Vue的過濾器執行原理
渲染內容 -- 交給第一個處理器 -- 獲得結果 -- 交給第二個處理器 -- 獲得結果 .... 獲得結果--渲染
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在Vue中自定義過濾器</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <h1>在Vue中自定義過濾器</h1> 10 <div id="app1"> 11 <h4>{{msg|replaceWords('我','他')|addStartInfo('----')}}</h4> 12 </div> 13 <hr/> 14 <div id="app2"> 15 <h4>{{msg|replaceWords('你','我')|addStartInfo('----')|addEndInfo('~~~~~')}}</h4> 16 </div> 17 <script type="text/javascript"> 18 //定義全局過濾器 19 Vue.filter("replaceWords",function (data,oldWorld,newWorld) { 20 var reg = new RegExp(oldWorld,"g"); 21 return data.replace(reg,newWorld); 22 }); 23 Vue.filter("addEndInfo",function (data,endInfo) { 24 return data.concat(endInfo); 25 }); 26 var vm1 = new Vue({ 27 el:"#app1", 28 data:{ 29 msg:"我是你的愛人，我是對你最好的人，我好傷心，你從未關心我！" 30 }, 31 methods:{ 32 33 }, 34 filters:{ 35 addStartInfo(data,startInfo){ 36 return startInfo.concat(data); 37 } 38 } 39 }); 40 var vm2 = new Vue({ 41 el:"#app2", 42 data:{ 43 msg:"我是你的愛人，我是對你最好的人，我好傷心，你從未關心我！" 44 }, 45 methods:{ 46 47 } 48 }); 49 </script> 50 </body> 51 </html>
測試結果：java
10.VUE中自定義指令
自定義指令：https://cn.vuejs.org/v2/guide/custom-directive.html#ad
系統內置：
v-cloak、v-text、v-html、v-bind、v-on、v-for、v-if、v-show、v-model
自定義：
全局：
1.必須定義在使用Vue以前（邊解析邊執行原理）
2.定義方式
參數1：指令名字
參數2：各聲明周期函數組成的對象（周期函數可選重寫，並不必定須要所有重寫）
bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)
update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前
指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新
componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用
unbind：只調用一次，指令與元素解綁時調用
生命週期函數的參數說明：
el：指令所綁定的元素，能夠用來直接操做 DOM 。
binding：一個對象，包含如下屬性（def、name、rawName、value、expression、modifiers）
vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
Vue.directive("指令名字",{
bind:function (el, f, vnode) {},
inserted:function (el, binding, vnode, oldVnode) {},
update:function (el, ref, vnode) {},
componentUpdated:function (el, binding, vnode) {},
unbind:function (el, binding, vnode, oldVnode, isDestroy) {}
});
局部：
定義方式：
var vm = new Vue({
el:"#app",
data:{},
methods:{},
filters:{},
directives:{
指令名字1:{
bind:function(){},
inserted:function(){},
update:function(){},
componentUpdated:function(){},
unbind:function(){}
},
指令名字2:{}
....
}
});
簡易定義方式：
Vue.directive("指令名字",function(el,binding,vnode,oldVnode){
此時function中的代碼會做用到bind和inserted鉤子函數上
});
【注意】
1.自定義的指令，Vue系統會自動給名字加上v-
2.調用指令時，必定要加上v-，若是你的指令名字是以v-開始，則最終調用是v-v-指令名字
3.自定義的指令，須要指定其對應的鉤子函數（如不指定，則使用默認實現）
4.自定義指令時，常關注的鉤子函數（bind、inserted）（所以自定義指令的簡寫方式默認就是實現該鉤子函數）
5.bind和inserted執行時機詳講
Vue.directive("color",{
bind:function (el,binding) {
//css樣式能夠在bind中設置
el.style.color=binding.value; //獲取指令傳遞過來的數據（能夠是任意數據類型）
},
inserted:function (el,binding) {
//JavaScript效果等須要在inserted中設置
el.focus();
}
});
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue中自定義指令詳細測試</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input v-color="'blue'" value="我是一個h1啊~" /> 11 <br> 12 <input v-color="'red'" value="我是一個h1啊~" /> 13 </div> 14 <script type="text/javascript"> 15 /*Vue.directive("color",function (el,binding,vnode,oldVnode,isDistory) { 16 console.log(this,el,binding,vnode,oldVnode,isDistory); 17 el.style.color=binding.value; 18 });*/ 19 Vue.directive("color",{ 20 bind:function (el,binding) { 21 //css樣式能夠在bind中設置 22 el.style.color=binding.value; //獲取指令傳遞過來的數據（能夠是任意數據類型） 23 }, 24 inserted:function (el,binding) { 25 //JavaScript效果等須要在inserted中設置 26 el.focus(); 27 } 28 }); 29 var vm = new Vue({ 30 el:"#app", 31 data:{}, 32 methods:{}, 33 filters:{}, 34 directives:{} 35 }); 36 </script> 37 </body> 38 </html>
測試結果：node
以上十種指令就是VUE的基本指令，熟練掌握以上指令，合理使用，我以爲最大的便捷之處就在於，前端功能和後端功能很明顯的分離，對於工做分工，明確各自職責是十分有利，同時前端可模擬進行一些數據操做，爲操做真實數據提供了一些安全保障。web
相關文章
- 1. 前端學習Vue框架
- 2. 【前端框架】前端框架學習
- 3. 前端框架學習react還是vue？
- 4. 前端框架Vue學習筆記
- 5. 前端框架開始學習Vue(一)
- 6. 前端Vue框架快速學習
- 7. 前端框架之vue初步學習
- 8. 前端框架開始學習Vue(三)
- 9. 前端框架VUE
- 10. VUE前端框架
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端學習Vue框架
- 2. 【前端框架】前端框架學習
- 3. 前端框架學習react還是vue？
- 4. 前端框架Vue學習筆記
- 5. 前端框架開始學習Vue(一)
- 6. 前端Vue框架快速學習
- 7. 前端框架之vue初步學習
- 8. 前端框架開始學習Vue(三)
- 9. 前端框架VUE
- 10. VUE前端框架