- 解釋：指令 ，Directives， 是帶有 v- 字首的特殊屬性，可以在html标簽中使用，可以看成特殊的html屬性
- 作用：指令提供了一些特殊的功能，當指令綁定到标簽上時，可以給标簽增加一些特殊的行為
- 比如 ： v-model、 v-bind、 v-if、 v-for 等等
- 【本質：底層:DOM 操作。】
指令 : directives
- 解釋 : 帶有 v-字首 的特殊屬性 , 特殊标記
- 作用 : 提供一些特殊 的功能 , 給 html 添加額外的功能
<div title='哈哈' v-if v-for></div>
- 比如 : v-model v-bind v-text ....
- 位置 : <XXX 位置></XXX>
- 特點 : v- wx:if ng- mg-
- 說明 : v-if、 v-model，底層:DOM 操作
6.1 v-model (常用)
說明 ： 用在表單元素中， 用來實作資料雙向綁定 (input checkbox 等等)
作用 ： 将 資料txt 和 文本框的值 綁定到一起， 任何一方發生改變，都會引起對方的改變
注意 ： v-model 在不同類型的表單元素中，該指令的作用不同
<!-- 文本輸入框 綁定的是值 -->
<input type="text" v-model="txt" />
<!-- 多選框 綁定的選中狀态 -->
<input type="checkbox" v-model="isChecked" />
09-指令1-v-model(重點).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
指令1 v-model 雙向資料綁定
說明 : 把 `input的value值` 和 `data裡的msg` 綁定到了一起,一方改變,另外一方也會 跟着改變
調試工具 : devTools
場景 : v-model 一般使用在表單元素上 (單選框 多選框 文本輸入框 下拉框 文本域等等)
注意點 : v-model 使用在不同的表單元素上, 綁定的值不一樣
v-model 綁定到文本輸入框裡面 => 綁定是字元串類型的内容
v-model 綁定到多選框裡面 ==> 綁定是布爾類型true/false
-->
<div id="app">
<!-- 文本輸入框 -->
<input type="text" v-model="msg" />
<!-- <h1 v-model="msg">我是h1</h1> -->
<!-- 多選框 -->
<input type="checkbox" v-model="isChecked" />
<!-- 使用v-bind也可以，動态綁定屬性 -->
<input type="checkbox" name="" id="" :checked="isChecked">
<!-- 下面這樣不行，隻要寫了checked，不管值是true、false，都會選 -->
<input type="checkbox" name="" id="buxing" checked>
<button>按鈕</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: '測試資訊',
isChecked: false
}
})
document.querySelector('button').onclick = function () {
document.querySelector('#buxing').checked = !document.querySelector('#buxing').checked
}
</script>
</body>
</html>
6.2 v-text 和 v-html
說明 ： 設定文本内容
- v-text ： 相當于之前的 innerText ， 設定文本内容(不識别 html 标簽) == 标簽内部{{}}
- v-html ： 相當于之前的 innerHTML ， 設定文本内容(是被 html 标簽)
- 資料
msg1： '<a>這是一條資訊</a>'，
msg2： '<a href="#">我也是一條資訊</a>'
10-指令2-v-text和v-html.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
v-text 和 v-html 指令
1、（1）v-text 相當于 之前的 innerText，不能識别标簽；（2）和 {{}} 效果是一樣的 , 差別: 位置 不一樣
2、v-html 相當于 之前 innerHTML，識别标簽
-->
<div id="app">
<div v-text="msg1"></div>
<div>{{ msg1 }}</div>
<hr />
<div v-html="msg2"></div>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg1: '<h1>測試v-text</h1>',
msg2: '<h1>測試v-html</h1>'
}
})
</script>
</body>
</html>
6.3 v-bind (常用)
說明 ： 動态綁定資料 (單向) 【由M到V。】
出現原因 ： 在 HTML 屬性中， 無法使用插值表達式
// 加載靜态資料
<a href="https://wbaidu.com">aaa</a>
// 想加載動态資料 {{ }}可以擷取data中的資料，但是 {{}} 不能使用在屬性中， 隻能出現的标簽内容裡
<a href="{{ src }}">aaa</a>
// 是以使用v-bind
<a v-bind:href="{{ src }}">aaa</a> ok
<img v-bind:src="src"> ok
縮略 ： v-bind 全部省略，隻留下一個：
改為 ：
<a :href="src">aaa</a> ok
<img :src="src" /> ok
以後 使用
靜态加載資料 ： <a href="https://wbaidu.com">aaa</a>
動态加載資料 ： <a :href="href">aaa</a>
11-指令3-v-bind(重點).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
1. {{}} 不能用在屬性值上, 一般使用在 标簽内容部分， <XX>位置</XX>
2. v-bind 動态綁定一個資料 (單向 m => v)
3. v-bind 的文法糖 :屬性='data裡的一個屬性'
4. v-bind 一般使用在屬性上, 任意标簽皆可使用
5. 動态綁定一個資料, 既然有個{{}}，為什麼要要有v-bind？
{{}} 用在标簽内容上面 , 不能用在屬性上 , 是以才會添加 v-bind
-->
<div id="app">
<!-- 靜态的顯示一個資料 -->
<!-- <div>測試資訊</div> -->
<!-- 動态的顯示 -->
<!-- <div>{{ msg }}</div> -->
<!-- 假如說使用在屬性上面 -->
<!-- 給屬性添加一個靜态資料 -->
<!-- <div title="測試資訊5">我是 div</div> -->
<!-- 給屬性添加一個動态的資料，{{}} 不能用在屬性值上 -->
<!-- <div title="{{ msg }}">我也是div</div> -->
<!-- 使用v-bind -->
<!-- <div v-bind:title="msg">我也是div</div> -->
<!-- 因為 v-bind 經常使用 文法糖 簡寫 -->
<!-- <div :title="msg">我也是div</div> -->
<!-- 靜态 -->
<!-- <img src="./guisun.png" alt="" /> -->
<!-- 動态 -->
<!-- 第一步 : 屬性前面加一個: -->
<!-- 第二步 : 屬性值, 用data裡的資料 -->
<!--
src='src'：把 src 這個 字元串指派 src 屬性
:src='src'：把 src對應值=./guisun.png 指派給 src屬性
-->
<img :src="src" alt="" /> <!-- 不要漏掉: -->
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: '哈哈',
src: './guisun.png'
}
})
</script>
</body>
</html>
6.3.1 v-bind 和 v-model 的差別
// v-model ： 資料雙向綁定 表單元素上
// ： ： 動态綁定資料(單向) 任意元素動态讀取屬性
容易出錯點 ：
<!-- v-model 資料雙向綁定 -->
<!--場景 ： 表單元素中 -->
<input type="checkbox" v-model="isChecked1" /> <br />
<!-- v-bind 資料動态綁定 (單向) -->
<!--場景 ： 主要用在屬性中 -->
<input type="checkbox" ：checked="isChecked2" />*
6.4 操作樣式
1.操作樣式
<!-- 1. 靜态類名 -->
<h1 class="red">哈哈</h1>
<!-- 2. 動态類名 -->
<h1 ：class="cls">哈哈</h1>
<!-- 3. 最常用 -->
<!-- ：class 裡的值是一個對象
鍵 ： 類名 (可能會要，也可以不要)
值 ： 布爾值， true/false 确定類要不要
-->
<h1 ：class="{ red：isRed ， fz：isFZ}">哈哈</h1>
<!-- 4. style -->
<h1 ：style="{ color ： 'red'， fontSize ： fz + 'px' }">哈哈</h1>
2.其他操作
<!-- 1 -->
<!-- 重點 -->
<div ：class="{ active： true }"></div>
===>
<div class="active"></div>
<!-- 2 -->
<div ：class="['active'， 'text-danger']"></div>
===>
<div class="active text-danger"></div>
<!-- 3 -->
<div ：class="[{ active： true }， errorClass]"></div>
===>
<div class="active text-danger"></div>
--- style ---
<!-- 1 -->
<h1 ：style="{ color ： 'red'， fontSize ： fz + 'px' }">哈哈</h1>
<!-- fz ： 80 -->
<!-- 2 将多個 樣式對象 應用到一個元素上-->
<!-- baseStyles 和 overridingStyles 都是對象 -->
<!-- 如果有相同的樣式，以後面的樣式為準 -->
<div ：style="[baseStyles， overridingStyles]"></div>
12-操作樣式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.red {
color: red;
}
.fz {
font-size: 50px;
}
</style>
</head>
<body>
<div id="app">
<!-- 1. 靜态添加一個類 -->
<!-- <h1 class="red">我是h1</h1> -->
<!-- 2. 動态加 -->
<!-- <h1 :class='dataRed'>我也是h1</h1> -->
<!-- 3. vue推薦我們使用這種 最最常用 -->
<!--
鍵 : 類名
值 : 布爾值 true/false
-->
<!-- <h1 :class='{ red : isRed,fz : isFz }'>我也是h1了</h1> -->
<!-- 4. 行内樣式 -->
<!--
鍵 : 樣式屬性
值 : 屬性值
-->
<h1 :style='{ color:"blue", bfontSize: fz }'>我肯定也是h1了</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
dataRed: 'red',
isRed: true,
isFz: true,
fz: '50px'
}
})
</script>
</body>
</html>
6.5 v-on 指令
注冊事件/綁定事件
- v-on:click 綁定了一個單擊事件
:後面是事件名稱
<button v-on:click="fn">按鈕</button>
-
簡寫 ： @click='fn'
<button @click='fn'>按鈕</button>
- 函數寫在 methods 裡面
fn ： function(){ ... }
fn() { ... }
- 函數裡面的 this 指的就是 vm 執行個體
> 在函數裡面操作資料
- 擷取資料 this.msg
- 修改資料 this.msg = 'XXX'
-
傳參
5.1 正常傳參
@click='fn(123)'
5.2 事件對象 $event
<!-- 4.1 綁定事件對象的時候， 沒有添加小括号，此時，直接在方法中，通過參數 e 就可以擷取到事件對象 -->
<!-- 4.2 如果添加小括号，就拿不到事件對象了，vue留了一個$event -->
<button @click="fn1($event，123)">我是按鈕</button>
<!-- 實參順序不重要，形參會和實參對應 -->
<button @click='fn(222, $event)'>我是按鈕</button>
13-指令4-v-on(重點).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
v-on 注冊/綁定事件
1. v-on:事件='事件函數'
2. 文法糖 @事件='事件函數'
3. 事件函數寫在 methods
-->
<div id="app">
<!-- v-on:事件='事件函數' -->
<!-- <button v-on:click='click1'>我是按鈕1</button> -->
<!-- v-on 的文法糖 -->
<button @click='click1'>我是按鈕2</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {},
//綁定事件的事件函數 寫在 methods (方法)
methods: {
click1() {
console.log('點選了');
}
},
})
</script>
</body>
</html>
14-事件中的this.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{ msg }}</h1>
<button @click='fn'>我是按鈕</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: '資訊測試'
},
methods: {
fn() {
// 事件中的this 就是 vm
console.log('點選了啊', this === vm); // 點選了啊 true
this.msg = '666';
console.log(this.msg); // 666
this.fn1() // // 我是 其他函數
this.fn2() // 補充的代碼
// 擷取資料
// 1. 标簽裡擷取資料: {{ msg }}
// 2. js裡擷取 資料: this.msg, 設定資料：this.msg='XXX'
},
fn1() {
console.log('我是 其他函數');
},
// 補充的代碼
fn2: () => {
console.log('調用了fn1');
console.log(this); // Window，這裡的箭頭函數指向的是Window
}
},
})
</script>
</body>
</html>
16-事件對象.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
擷取 事件對象
1. 不傳參 , 直接 在事件函數 裡接收一個形參即可 @click='fn' fn(e){ }
2. 傳參, vue預留了一個關鍵字 $event
@click='fn($event, 123)' fn(e,num){}
-->
<div id="app">
<button @click='fn($event,123)'>我是按鈕</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
},
methods: {
fn(e,num){
console.log('點選了',e,num);
}
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 實參順序不重要，形參會和實參對應 -->
<button @click='fn(222, $event)'>我是按鈕</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
},
methods: {
fn(num, e) {
console.log('點選了', num, e); // 點選了 222 MouseEvent {...}
}
},
})
</script>
</body>
</html>
6.6 v-for
- v-for 指令： 周遊資料，為資料中的每一項生成一個指令所在的标簽
- 代碼
<!-- 需求1 ： 最常用 周遊數組 -->
<!-- 作用 ： 周遊 list1 資料， 為資料中的每一項生成一個li标簽 -->
<!-- item 數組裡的每一項元素 -->
<ul>
<li v-for="(item，index) in list1">{{ item }} - {{ index }}</li>
</ul>
<!-- 需求2 ： 周遊元素是對象的數組 -->
<ul>
<li v-for="item in list2">{{ item.name }} - id：{{ item.id }}</li>
</ul>
<!-- 需求3 ： 周遊對象 -->
<ul>
<li v-for="(item，key) in obj">{{ item }}-{{key}}</li>
</ul>
<!-- 需求4 ： 想要生成10個h1，item 從1開始 -->
<h1 v-for="item in 10">我是h1 {{ item }}</h1>
- 重點是周遊數組，其他的了解即可
17-指令5-v-for(重要).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
v-for 周遊資料(數組), 建立出來對應的(指令所在的)标簽
-->
<div id="app">
<ul>
<!-- item 就是 數組元素， index 就是數組 元素對應的索引 -->
<!-- <li v-for='(item,index) in list1' >{{ item }} {{ index }}</li> -->
<!-- 常用的 -->
<!-- <li v-for='item in list2'>{{ item.name }} {{ item.id }}</li> -->
<!-- 周遊對象 -->
<!-- <li v-for='(value,key) in obj'>{{ value }} {{ key }}</li> -->
<!-- 周遊次數 -->
<!-- <li v-for='i in 100'>{{ i }}</li> -->
<li v-for='i in 100'>{{ i - 1 }}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
list1: ['張三', '李四', '王五'],
list2: [{
id: 1,
name: '馬哥'
}, {
id: 2,
name: '傻春'
}, {
id: 3,
name: '浪濤'
}],
obj: {
// key value
name: '傻春',
sex: '不一定'
}
}
})
</script>
</body>
</html>
6.7 v-pre
18-其他指令-v-pre.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
v-pre :不解析
-->
<div id="app">
<h1>{{ msg }}</h1>
<h1 v-pre>{{ msg }}</h1>
<h1>{{ msg }}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: '測試'
}
})
</script>
</body>
</html>
6.8 v-once指令
19-其他指令-v-once.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
v-once : 一旦解析了,不管資料怎麼發生改變,都不會再解析 => 隻解析一次
-->
<div id="app">
<h1>{{ msg }}</h1>
<h1 v-once>{{ msg }}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 100
}
})
</script>
</body>
</html>
6.9 v-cloak指令
經測試，必須用屬性選擇器，否則無效。比如可以使用[v-cloak]、h1[v-cloak]，但是隻使用标簽選擇器h1 無效。
20-其他指令-v-cloak.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--
-使用{{}} 的時候,偶爾會 出現一個閃爍的過程
{{ num }} => 100
- 使用 v-cloak 指令
- 三步 : 隐藏的工作原理
- 第一步 : 給要遮蓋的元素, 添加這個指令
- 第二步 : 根據屬性選擇器, 找到要遮蓋的元素,設 置 display:none
- 第三步 : 當資料解析完畢後, vue會自動删除 v-cloak指令
-->
<div id="app">
<h1 v-cloak>{{ num }}</h1>
<h1>{{ num }}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num: 100
}
})
</script>
</body>
</html>
七、TODOMVC
一 ： 準備工作
- Vue-TodoMVC
- 示範效果 ：
-
目前任務：敲代碼、視訊、遊戲