1.什么是vue，為什么要使用vue,vue的優勢
/*
1.什么是Vue?
Vue.js 是一套構建用戶界面的`框架`，它不僅易于上手，還可以與其它第三方庫整合(Swiper、IScroll、...)。
2.框架和庫的區別?
框架：是一套完整的解決方案；對項目的`侵入性`較大，項目如果需要更換框架，則需要重構整個項目。
庫（插件）：提供某一個小功能，對項目的`侵入性`較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。
例如: 從jQuery 切換到 Zepto, 無縫切換
從IScroll切換到ScrollMagic, 只需要將用到IScroll的代碼替換成ScrollMagic代碼即可
3.為什么要學習框架?
提升開發效率：在企業中，時間就是效率，效率就是金錢；
前端提高開發效率的發展歷程：原生JS -> jQuery之類的類庫 -> 前端模板引擎 -> Vue / React / Angular
4.框架有很多, 為什么要先學Vue
Vue、Angular、React一起，被稱之為前端三大主流框架！
但是Angular、React是老外編寫的, 所以所有的資料都是英文的
而Vue是國人編寫的, 所以所有的資料都是中文的, 并且Vue中整合了Angular、React中的眾多優點
所以為了降低我們的學習難度, 我們先學Vue, 學完之后再學習Angular和React
5.使用Vue有哪些優勢?
5.1Vue的核心概念之一:
通過數據驅動界面更新, 無需操作DOM來更新界面
使用Vue我們只需要關心如何獲取數據, 如何處理數據, 如何編寫業務邏輯代碼,
我們只需要將處理好的數據交給Vue, Vue就會自動將數據渲染到模板中(界面上)
5.2Vue的核心概念之二:
組件化開發，我們可以將網頁拆分成一個個獨立的組件來編寫
將來再通過封裝好的組件拼接成一個完整的網頁
https://cn.vuejs.org/images/components.png
*/
2.vue基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-Vue基本模板</title>
<!--1.下載導入Vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 2.創建一個Vue的實例對象
let vue = new Vue({
// 3.告訴Vue的實例對象, 將來需要控制界面上的哪個區域
el: '#app',
// 4.告訴Vue的實例對象, 被控制區域的數據是什么
data: {
name: "twc"
}
});
</script>
</body>
</html>
3.數據單向綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-Vue數據單向傳遞</title>
<!--1.下載導入Vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.MVVM設計模式
在MVVM設計模式中由3個部分組成
M : Model 數據模型(保存數據, 處理數據業務邏輯)
V : View 視圖(展示數據, 與用戶交互)
VM: View Model 數據模型和視圖的橋梁(M是中國人, V是美國人, VM就是翻譯)
MVVM設計模式最大的特點就是支持數據的雙向傳遞
數據可以從 M -> VM -> V
也可以從 V -> VM -> M
2.Vue中MVVM的劃分
Vue其實是基于MVVM設計模式的
被控制的區域: View
Vue實例對象 : View Model
實例對象中的data: Model
3.Vue中數據的單向傳遞
我們把"數據"交給"Vue實例對象", "Vue實例對象"將數據交給"界面"
Model -> View Model -> View
-->
<!--這里就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 這里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這里就是MVVM中的Model
data: {
name: "twc"
}
});
</script>
</body>
</html>
4.數據雙向綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-Vue數據雙向傳遞</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.Vue調試工具安裝
如果你能打開谷歌插件商店, 直接在線安裝即可
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
由于國內無法打開谷歌國外插件商店, 所以可以離線安裝
https://www.chromefor.com/vue-js-devtools_v5-3-0/
2.安裝步驟:
2.1下載離線安裝包
2.2打開谷歌插件界面
2.3直接將插件拖入
2.4報錯 程序包無效: "CRX_HEADER_INVALID"
可以將安裝包修改為rar后綴, 解壓之后再安裝
2.5重啟瀏覽器
-->
<!--
2.數據雙向綁定
默認情況下Vue只支持數據單向傳遞 M -> VM -> V
但是由于Vue是基于MVVM設計模式的, 所以也提供了雙向傳遞的能力
在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令創建雙向數據綁定
注意點: v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值
而總是將 Vue 實例的數據作為數據來源
-->
<!--這里就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
<input type="text" v-model="name">
</div>
<script>
// 這里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這里就是MVVM中的Model
data: {
name: "twc",
msg: "xxx"
}
});
</script>
</body>
</html>
5.常用指令
5.1 v-once指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-常用指令-v-once</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是指令? 指令就是Vue內部提供的一些自定義屬性, 這些屬性中封裝好了Vue內部實現的一些功能 只要使用這些指令就可以使用Vue中實現的這些功能 2.Vue數據綁定的特點 只要數據發生變化, 界面就會跟著變化 3.v-once指令: 讓界面不要跟著數據變化, 只渲染一次 --> <!--這里就是MVVM中的View--> <div id="app"> <p v-once>原始數據: {{ name }}</p> <p>當前數據: {{ name }}</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { name: "twc", } }); </script> </body> </html>
5.2 v-cloak指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06-常用指令-v-cloak</title> <style> [v-cloak] { display: none } </style> </head> <body> <!-- 1.Vue數據綁定過程 1.1會先將未綁定數據的界面展示給用戶 1.2然后再根據模型中的數據和控制的區域生成綁定數據之后的HTML代碼 1.3最后再將綁定數據之后的HTML渲染到界面上 正是在最終的HTML被生成渲染之前會先顯示模板內容 所以如果用戶網絡比較慢或者網頁性能比較差, 那么用戶會看到模板內容 2.如何解決這個問題 利用v-cloak配合 [v-cloak]:{display: none}默認先隱藏未渲染的界面 等到生成HTML渲染之后再重新顯示 3.v-cloak指令作用: 數據渲染之后自動顯示元素 --> <!--這里就是MVVM中的View--> <div id="app"> <p v-cloak>{{ name }}</p> </div> <script src="js/vue.js"></script> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { name: "twc", } }); </script> </body> </html>
5.3 v-text 和 v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-常用指令v-text和v-html</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-text指令 v-text就相當于過去學習的innerText 2.什么是v-html指令 v-html就相當于過去學習的innerHTML --> <!--這里就是MVVM中的View--> <div id="app"> <!--插值的方式: 可以將指定的數據插入到指定的位置--> <!-- <p>++++{{ name }}++++</p>--> <!--插值的方式: 不會解析HTML--> <p>++++{{ msg }}++++</p> <!--v-text的方式: 會覆蓋原有的內容--> <p v-text="name">++++++++</p> <!--v-text的方式: 也不會解析HTML--> <p v-text="msg">++++++++</p> <!--v-html的方式: 會覆蓋原有的內容--> <p v-html="name">++++++++</p> <!--v-html的方式:會解析HTML--> <p v-html="msg">{{name}}</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { name: "twc", msg: "<span>我是span</span>" } }); </script> </body> </html>
5.4 v-if v-else v-else-if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08-常用指令v-if</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-if指令 條件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素 2.v-if特點: 如果條件不滿足根本就不會創建這個元素(重點) 3.v-if注意點 v-if可以從模型中獲取數據 v-if也可以直接賦值一個表達式 --> <!-- 4.v-else指令 v-else指令可以和v-if指令配合使用, 當v-if不滿足條件時就執行v-else就顯示v-else中的內容 5.v-else注意點 v-else不能單獨出現 v-if和v-else中間不能出現其它內容 --> <!-- 6.v-else-if指令 v-else-if可以和v-if指令配合使用, 當v-if不滿足條件時就依次執行后續v-else-if, 哪個滿足就顯示哪個 7.v-else-if注意點 和v-else一樣 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p v-if="show">我是true</p>--> <p v-if="hidden">我是false</p> <!-- <p v-if="true">我是true</p>--> <!-- <p v-if="false">我是false</p>--> <p v-if="age >= 18">我是true</p> <p v-if="age < 18">我是false</p> <!-- <p v-if="age >= 18">成年人</p>--> <!-- <p>中間的內容</p>--> <!-- <p v-else>未成年人</p>--> <p v-if="score >= 80">優秀</p> <p v-else-if="score >= 60">良好</p> <p v-else>差</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { show: true, hidden: false, age: 17, score: 50 } }); </script> </body> </html>
5.5 v-show
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09-常用指令v-show</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-show指令 v-show和v-if的能夠一樣都是條件渲染, 取值為true就顯示, 取值為false就不顯示 2.v-if和v-show區別 v-if: 只要取值為false就不會創建元素 v-show: 哪怕取值為false也會創建元素, 只是如果取值是false會設置元素的display為none 3.v-if和v-show應用場景 由于取值為false時v-if不會創建元素, 所以如果需要切換元素的顯示和隱藏, 每次v-if都會創建和刪除元素 由于取值為false時v-show會創建元素并設置display為none, 所有如果需要切換元素的顯示和隱藏, 不會反復創建和刪除, 只是修改display的值 所以: 如果企業開發中需要頻繁切換元素顯示隱藏, 那么推薦使用v-show, 否則使用v-if --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p v-show="true">我是true</p>--> <!-- <p v-show="false">我是false</p>--> <!-- <p v-show="age >= 18">我是true</p>--> <!-- <p v-show="age < 18">我是false</p>--> <p v-show="show">我是段落1</p> <p v-show="hidden">我是段落2</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { show: true, hidden: false, age: 18 } }); </script> </body> </html>
5.6 v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10-常用指令v-for</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-for指令 相當于JS中的for in循環, 可以根據數據多次渲染元素 2.v-for特點 可以遍歷 數組, 字符, 數字, 對象 --> <!--這里就是MVVM中的View--> <div id="app"> <ul> <li v-for="(value, index) in list">{{index}}--{{value}}</li> <li v-for="(value, index) in 'abcdefg'">{{index}}--{{value}}</li> <li v-for="(value, index) in 6">{{index}}--{{value}}</li> <li v-for="(value, key) in obj">{{key}}---{{value}}</li> </ul> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { list: ["張三", "李四", "王五", "趙六"], obj: { name: "lnj", age: 33, gender: "man", class: "知播漁" } } }); </script> </body> </html>
5.7 v-bind
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10-常用指令v-bind</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-bind指令 在企業開發中想要給"元素"綁定數據, 我們可以使用{{}}, v-text, v-html 但是如果想給"元素的屬性"綁定數據, 就必須使用v-bind 所以v-bind的作用是專門用于給"元素的屬性"綁定數據的 2.v-bind格式 v-bind:屬性名稱="綁定的數據" :屬性名稱="綁定的數據" 3.v-bind特點 賦值的數據可以是任意一個合法的JS表達式 例如: :屬性名稱="age + 1" --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p>{{name}}</p>--> <!-- <p v-text="name"></p>--> <!-- <p v-html="name"></p>--> <!--注意點: 如果要給元素的屬性綁定數據, 那么是不能夠使用插值語法的--> <!-- <input type="text" value="{{name}}">--> <!--注意點: 雖然通過v-model可以將數據綁定到input標簽的value屬性上 但是v-model是有局限性的, v-model只能用于input/textarea/select 但是在企業開發中我們還可能需要給其它標簽的屬性綁定數據--> <input type="text" v-model="name"> <!-- <input type="text" v-bind:value="name">--> <!-- <input type="text" :value="name">--> <input type="text" :value="age + 1"> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { name: "twc", age: 18 } }); </script> </body> </html>
5.8 v-bind 用來綁定類名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12-常用指令-綁定類名</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .size{ font-size: 100px; } .color{ color: red; } .active{ background: skyblue; } </style> </head> <body> <!-- 1.v-bind指令的作用 v-bind指令給"任意標簽"的"任意屬性"綁定數據 對于大部分的屬性而言我們只需要直接賦值即可, 例如:value="name" 但是對于class和style屬性而言, 它的格式比較特殊 2.通過v-bind綁定類名格式 :class="['需要綁定類名', ...]" 3.注意點: 3.1直接賦值一個類名(沒有放到數組中)默認會去Model中查找 :class="需要綁定類名" 2.2數組中的類名沒有用引號括起來也會去Model中查找 :class="[需要綁定類名]" 2.3數組的每一個元素都可以是一個三目運算符按需導入 :class="[flag?'active':'']" 2.4可以使用對象來替代數組中的三目運算符按需導入 :class="[{'active': true}]" 2.5綁定的類名太多可以將類名封裝到Model中 obj: { 'color': true, 'size': true, 'active': false, } 4.綁定類名企業應用場景 從服務器動態獲取樣式后通過v-bind動態綁定類名 這樣就可以讓服務端來控制前端樣式 常見場景: 618 雙11等 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p class="size color active">我是段落</p>--> <!-- 注意點: 如果需要通過v-bind給class綁定類名, 那么不能直接賦值 默認情況下v-bind會去Model中查找數據, 但是Model中沒有對應的類名, 所以無效, 所以不能直接賦值 --> <!-- <p :class="size">我是段落</p>--> <!-- 注意點: 如果想讓v-bind去style中查找類名, 那么就必須把類名放到數組中 但是放到數組中之后默認還是回去Model中查找 --> <!-- <p :class="[size]">我是段落</p>--> <!-- 注意點: 將類名放到數組中之后, 還需要利用引號將類名括起來才會去style中查找 --> <!-- <p :class="['size', 'color', 'active']">我是段落</p>--> <!-- 注意點: 如果是通過v-bind類綁定類名, 那么在綁定的時候可以編寫一個三目運算符來實現按需綁定 格式: 條件表達式 ? '需要綁定的類名' : '' --> <!-- <p :class="['size', 'color', flag ? 'active' : '']">我是段落</p>--> <!-- 注意點: 如果是通過v-bind類綁定類名, 那么在綁定的時候可以通過對象來決定是否需要綁定 格式: {'需要綁定的類名' : 是否綁定} --> <!-- <p :class="['size', 'color',{'active' : false}]">我是段落</p>--> <!-- 注意點: 如果是通過v-bind類綁定類名, 那么還可以使用Model中的對象來替換數組 綁定的類名太多可以將類名封裝到Model中 --> <p :class="obj">我是段落</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { flag: false, obj:{ 'size': false, 'color': false, 'active': true, } } }); </script> </body> </html>
5.9 v-bind綁定樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>13-常用指令-綁定樣式</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.如何通過v-bind給style屬性綁定數據 1.1將數據放到對象中 :style="{color:'red','font-size':'50px'}" 1.2將數據放到Model對象中 obj: { color: 'red', 'font-size': '80px', } 2.注意點 2.1如果屬性名稱包含-, 那么必須用引號括起來 2.2如果需要綁定Model中的多個對象, 可以放到一個數組中賦值 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p style="color: red">我是段落</p>--> <!-- 注意點: 和綁定類名一樣, 默認情況下v-bind回去Model中查找, 找不到所以沒有效果 --> <!-- <p :style="color: red">我是段落</p>--> <!-- 注意點: 我們只需要將樣式代碼放到對象中賦值給style即可 但是取值必須用引號括起來 --> <!-- <p :style="{color: 'red'}">我是段落</p>--> <!-- 注意點: 如果樣式的名稱帶-, 那么也必須用引號括起來才可以 --> <!-- <p :style="{color: 'red', 'font-size': '100px'}">我是段落</p>--> <!-- <p :style="obj">我是段落</p>--> <!-- 注意點: 如果Model中保存了多個樣式的對象 ,想將多個對象都綁定給style, 那么可以將多個對象放到數組中賦值給style即可 --> <p :style="[obj1, obj2]">我是段落</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { obj1:{ "color": "blue", "font-size": "100px" }, obj2: { "background-color": "red" } } }); </script> </body> </html>
5.10 v-on
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-常用指令-v-on</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-on指令? v-on指令專門用于給元素綁定監聽事件 2.v-on指令格式 v-on:事件名稱="回調函數名稱" @事件名稱="回調函數名稱" 3.v-on注意點: v-on綁定的事件被觸發之后, 會去Vue實例對象的methods中查找對應的回調函數 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <button onclick="alert('lnj')">我是按鈕</button>--> <!-- 注意點: 1.如果是通過v-on來綁定監聽事件, 那么在指定事件名稱的時候不需要寫on 2.如果是通過v-on來綁定監聽事件, 那么在賦值的時候必須賦值一個回調函數的名稱 --> <!-- <button v-on:click="alert('lnj')">我是按鈕</button>--> <!-- 注意點: 當綁定的事件被觸發后, 會調用Vue實例的methods對象中對應的回調函數 --> <!-- <button v-on:click="myFn">我是按鈕</button>--> <button @click="myFn">我是按鈕</button> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, methods: { myFn(){ alert('lnj') } } }); </script> </body> </html>v-on 修飾符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-常用指令-v-on修飾符</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .a{ width: 300px; height: 300px; background: red; } .b{ width: 200px; height: 200px; background: blue; } .c{ width: 100px; height: 100px; background: green; } </style> </head> <body> <!-- 1.v-on修飾符 在事件中有很多東西需要我們處理, 例如事件冒泡,事件捕獲, 阻止默認行為等 那么在Vue中如何處理以上內容呢, 我們可以通過v-on修飾符來處理 2.常見修飾符 .once - 只觸發一次回調。 .prevent - 調用 event.preventDefault()。阻止默認行為 .stop - 調用 event.stopPropagation()。阻止事件冒泡 .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。 .capture - 添加事件偵聽器時使用 capture 模式。 --> <!--這里就是MVVM中的View--> <div id="app"> <!--注意點: 默認情況下事件的回調函數可以反復的執行, 只要事件被觸發就會執行--> <button v-on:click="myFn">我是按鈕</button> <!--如果想讓事件監聽的回調函數只執行一次, 那么就可以使用.once修飾符--> <button v-on:click.once ="myFn">我是按鈕</button> <!--如果想阻止元素的默認行為, 那么可以使用.prevent修飾符--> <a v-on:click.prevent="myFn">我是A標簽</a> <!-- 默認情況下載嵌套的元素中, 如果都監聽了相同的事件, 那么會觸發事件冒泡 如果想阻止事件冒泡, 那么可以使用.stop修飾符 --> <div class="a" @click="myFn1"> <div class="b" @click.stop="myFn2"> <div class="c" @click="myFn3"></div> </div> </div> <!-- 如果想讓回調只有當前元素觸發事件的時候才執行, 那么就可以使用.self修飾符,以下不會打印爸爸 --> <div class="a" @click="myFn1"> <div class="b" @click.self="myFn2"> <div class="c" @click="myFn3"></div> </div> </div> <!-- 默認情況下是事件冒泡, 如果想變成事件捕獲, 那么就需要使用.capture修飾符 --> <div class="a" @click.capture="myFn1"> <div class="b" @click.capture="myFn2"> <div class="c" @click.capture="myFn3"></div> </div> </div> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專門用于存儲監聽事件回調函數 methods: { myFn(){ alert('lnj'); }, myFn1(){ console.log("爺爺"); }, myFn2(){ console.log("爸爸"); }, myFn3(){ console.log("兒子"); } } }); </script> </body> </html>v-on 的注意點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16-常用指令-v-on注意點</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.v-on注意點 1.1綁定回調函數名稱的時候, 后面可以寫()也可以不寫 v-on:click="myFn" v-on:click="myFn()" 1.2可以給綁定的回調函數傳遞參數 v-on:click="myFn('lnj', 33)" 1.3如果在綁定的函數中需要用到data中的數據必須加上this --> <!--這里就是MVVM中的View--> <div id="app"> <button @click="myFn('lnj', 33, $event)">我是按鈕</button> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { gender: "man" }, // 專門用于存儲監聽事件回調函數 methods: { myFn(name, age, e){ // alert('lnj'); console.log(name, age, e); console.log(this.gender); } } }); </script> </body> </html>
5.11 自定義指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>18-常用指令-自定義指令</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.自定義全局指令 在Vue中除了可以使用Vue內置的一些指令以外, 我們還可以自定義指令 2.自定義全局指令語法 ue.directive('自定義指令名稱', { 生命周期名稱: function (el) { 指令業務邏輯代碼 } }); 3.指令生命周期方法 自定義指令時一定要明確指令的業務邏輯代碼更適合在哪個階段執行 例如: 指令業務邏輯代碼中沒有用到元素事件, 那么可以在bind階段執行 例如: 指令業務邏輯代碼中用到了元素事件, 那么就需要在inserted階段執行 4.自定義指令注意點 使用時需要加上v-, 而在自定義時不需要加上v- --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p v-color>我是段落</p>--> <input type="text" v-focus> </div> <script> /* directive方法接收兩個參數 第一個參數: 指令的名稱 第二個參數: 對象 注意點: 在自定義指令的時候, 在指定指令名稱的時候, 不需要寫v- 注意點: 指令可以在不同的生命周期階段執行 bind: 指令被綁定到元素上的時候執行 inserted: 綁定指令的元素被添加到父元素上的時候執行 * */ Vue.directive("color", { // 這里的el就是被綁定指令的那個元素 bind: function (el) { el.style.color = "red"; } }); Vue.directive("focus", { // 這里的el就是被綁定指令的那個元素 //此時如果將insert改為bind并不會聚焦，因為在bind時期，還沒有渲染到界面 inserted: function (el) { el.focus(); } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專門用于存儲監聽事件回調函數 methods: { } }); </script> </body> </html>自定義指令參數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19-常用指令-自定義指令參數</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.自定義指令參數 在使用官方指令的時候我們可以給指令傳參 例如: v-model="name" 在我們自定義的指令中我們也可以傳遞傳遞 2.獲取自定義指令傳遞的參數 在執行自定義指令對應的方法的時候, 除了會傳遞el給我們, 還會傳遞一個對象給我們 這個對象中就保存了指令傳遞過來的參數 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p v-color="'blue'">我是段落</p>--> <p v-color="curColor">我是段落</p> </div> <script> Vue.directive("color", { // 這里的el就是被綁定指令的那個元素 bind: function (el, obj) { // el.style.color = "red"; el.style.color = obj.value; } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { curColor: 'green' }, // 專門用于存儲監聽事件回調函數 methods: { } }); </script> </body> </html>自定義局部指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-常用指令-自定義局部指令</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.自定義全局指令的特點 在任何一個Vue實例控制的區域中都可以使用 2.自定義局部指令的特點 只能在自定義的那個Vue實例中使用 3.如何自定義一個局部指令 給創建Vue實例時傳遞的對象添加 directives: { // key: 指令名稱 // value: 對象 'color': { bind: function (el, obj) { el.style.color = obj.value; } } } --> <!--這里就是MVVM中的View--> <div id="app1"> <p v-color="'blue'">我是段落</p> </div> <div id="app2"> <p v-color="'red'">我是段落</p> </div> <script> // 這里就是MVVM中的View Model let vue1 = new Vue({ el: '#app1', // 這里就是MVVM中的Model data: {}, // 專門用于存儲監聽事件回調函數 methods: {} }); // 這里就是MVVM中的View Model let vue2 = new Vue({ el: '#app2', // 這里就是MVVM中的Model data: {}, // 專門用于存儲監聽事件回調函數 methods: {}, // 專門用于定義局部指令的 directives: { "color": { // 這里的el就是被綁定指令的那個元素 bind: function (el, obj) { el.style.color = obj.value; } } } }); </script> </body> </html>
