【Vue2】指令
阿新 • • 發佈：2022-05-07
1、內容渲染指令
1、插值表示式
2、V - TEXT
3、V - HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
{{username}}
<!-- V-text指令會對元素文字內容整體控制 -->
<p v-text="aaa"></p>
<!-- 要操作區域性文字展示應該使用模版符號實現(插值表示式) -->
<p>這是固定文字：{{aaa}}</p>
<!-- 如果是html格式，需要v-html渲染標籤 -->
<div v-html="info"></div>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
username: '張三李四',
aaa: 100,
info: '<h4 style="color: red; font-weight: bold;">歡迎大家來學習vue. js</h4> ',
}
})
</script>
</body>
</html>
備註
1、插值表示式和V-TEXT 不能渲染HTML
2、同樣在V-HTML指令中也不能渲染插值表示式
插值表示式支援簡單的運算和方法呼叫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 在vue提供的模板渲染語法中，除了支援繫結簡單的資料值之外，還支援Javascript表示式的運算，例如: -->
{{ aaa + 100 }} <br>
{{ username + 1233 }} <br>
{{ username.split('').reverse().join('') }}
<!-- 繫結數值異常 -->
<!-- <div :class="box"></div> -->
<!--
vue.js:525 [Vue warn]:
Property or method "box" is not defined on the instance but referenced during render.
Make sure to declare reactive data properties in the data option.
(found in root instance)
-->
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
username: '張三李四',
aaa: 100,
info: '<h4 style="color: red; font-weight: bold;">歡迎大家來學習vue. js</h4> ',
}
})
</script>
</body>
</html>
2、屬性繫結指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
<input type="text" placeholder="{{tips}}">
{{xxx}} 插值表示式只能使用在元素的內容節點中，不能用在屬性節點中
若要給屬性繫結值，使用v-bind實現
-->
<input type="text" v-bind:placeholder="tips">
<!-- 可以簡寫為:屬性繫結 -->
<input type="text" :value="txt">
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
tips: '這是輸入提示資訊',
txt: 'sajasdoqidwq'
}
})
</script>
</body>
</html>
3、事件繫結指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>計數器：{{counter}}</p>
<button v-on:click="increase">點選加一</button>
<button v-on:click="decrease">點選減一</button>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
counter: 0
},
methods: {
increase: function(event) {
console.log(VIEW_MODEL)
console.log(event)
// this._data.counter ++
// 因為寫在這個作用域中，可以直接操作Vue例項
VIEW_MODEL._data.counter ++
},
decrease(event) {
console.log(VIEW_MODEL)
console.log(event)
// this.counter --
VIEW_MODEL.counter --
}
}
})
</script>
</body>
</html>
如果方法需要傳遞引數：
但是這樣寫會覆蓋掉event事件引數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>計數器：{{counter}}</p>
<!-- 傳參會覆蓋 -->
<button v-on:click="increase(11)">點選加一</button>
<button v-on:click="decrease(5)">點選減一</button>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
counter: 0
},
methods: {
increase: function(number) {
console.log(VIEW_MODEL)
console.log(number)
// this._data.counter ++
// 因為寫在這個作用域中，可以直接操作Vue例項
VIEW_MODEL._data.counter += number
},
decrease(number) {
console.log(VIEW_MODEL)
console.log(number)
// this.counter --
VIEW_MODEL.counter -= number
}
}
})
</script>
</body>
</html>
如果需要獲取事件物件，通過注入$event變數引數獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>計數器：{{counter}}</p>
<!-- 傳參會覆蓋 -->
<button v-on:click="increase(11, $event)">點選加一</button>
<!--
注意:原生DOM物件有onclick、oninput、 onkeyup 等原生事件，替換為vue的事件繫結形式後,
分別為: v-on:click、 v-on:input、 v-on:keyup
-->
<button @click="decrease(5)">點選減一</button>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
counter: 0
},
methods: {
increase: function(number, event) {
console.log(VIEW_MODEL)
console.log(number)
// this._data.counter ++
// 因為寫在這個作用域中，可以直接操作Vue例項
VIEW_MODEL._data.counter += number
// 通過$event得到原生事件物件, 如果方法無引數，可以寫event入參獲取事件物件
console.log(event)
},
decrease(number) {
console.log(VIEW_MODEL)
console.log(number)
// this.counter --
VIEW_MODEL.counter -= number
}
}
})
</script>
</body>
</html>
阻止預設事件，Vue提供了事件附加修飾：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com/" @click="printStr">阻止預設事件</a>
<a href="https://www.baidu.com/" @click.prevent="printStr2">阻止預設事件2</a>
<!--
冒泡事件阻止
@click.capture
@click.stop ===> event.stopPropagation()
.capture
以捕獲模式觸發當前的事件處理函式
.once
繫結的事件只觸發1次
.self
只有在event.target是當前元素自身時觸發事件處理函式
-->
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: { },
methods: {
// 使用原生辦法阻止預設事件
printStr(event) {
event.preventDefault()
console.log('預設事件被阻止了')
},
// 使用vue修飾符處理
printStr2() {
console.log('預設事件2被阻止了')
}
}
})
</script>
</body>
</html>
鍵盤事件監聽
提供了一些直接可獲取的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 監聽按鍵ESC按下的s -->
<input type="text" @keyup.esc="clearValue">
<input type="text" @keyup.enter="submitEvent">
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: { },
methods: {
clearValue(event) {
console.log(event)
event.target.value = ''
// event.value = ''
},
submitEvent(event) {
console.log('回車按鍵觸發')
}
}
})
</script>
</body>
</html>
一些補充：
https://blog.csdn.net/yy168888/article/details/106312431
4、雙向繫結指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
1.4雙向繫結指令
vue提供了v-model雙向資料繫結指令,
用來輔助開發者在不操作DOM的前提下，
快速獲取表單的資料。
雙向繫結是元素的value值，和自定義的資料key
-->
<p>
<input type="text" v-model="txt" @keyup.enter="clearValue">
雙向繫結：{{txt}}
</p>
<p>
<!--
value輸入項的輸入不能把dom元素的value值傳遞給data屬性的aaa
-->
<input type="text" :value="aaa">
單向渲染：{{aaa}}
</p>
<!--
v-model支援的元素型別是帶有value屬性的元素
input標籤：
radio
checkbox
text
textarea標籤
select標籤
-->
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
txt: '',
aaa: 'asdasd'
},
methods: {
clearValue(event) {
console.log(event)
// 清除dom元素的value不會更新data屬性的值
// event.target.value = ''
this.txt = ''
// event.value = ''
},
}
})
</script>
</body>
</html>
雙向繫結的修飾符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<!--
為了方便對使用者輸入的內容進行處理，vue為v-model指令提供了3個修飾符，分別是:
修飾符 作用 示例
.number 自動將使用者的輸入值轉為數值型別 <input v-model.number-"age" />
.trim 自動過濾使用者輸入的首尾空白字元 <input v-model.trim="msg" />
.lazy 在"change"時而非"input" 時更新 <input v-modeL.lazy="msg" />
作用是對使用者輸入的內容處理，資料控制和清洗
-->
<div id="app">
<input type="text" v-model.number="val1"> +
<input type="text" v-model.number="val2"> =
{{ val1 + val2}}
<br>
清除空格
<input type="text" v-model.trim="val3">
<br>
懶載入？ <!-- 在失去焦點時觸發lazy，model值更新 -->
<input type="text" v-model.lazy="val4">
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
val1: 100,
val2: 100,
val3: '',
val4: '',
},
methods: {
clearValue(event) {
console.log(event)
// 清除dom元素的value不會更新data屬性的值
// event.target.value = ''
this.txt = ''
// event.value = ''
},
}
})
</script>
</body>
</html>
5、條件渲染指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
條件渲染指令用來輔助開發者按需控制DOM的顯示與隱藏。條件渲染指令有如下兩個，分別是:
●v-if
直接建立元素或者刪除元素處理，
●v-show
使用style="display: none;" CSS的樣式控制，dom物件持續存在
頻繁切換，使用v-show的效能更高，因為dom元素只建立一次
-->
<p v-if="flag">這是v-if 控制的元素</p>
<p v-show="flag">這是v-show 控制的元素</p>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
flag: false
},
})
</script>
</body>
</html>
如果需要判斷多個條件處理：
<div v-if="flage">111</div>
<div v-else-if="flage">111</div>
<div v-else-if="flage">111</div>
<div v-else="flage">111</div>
6、遍歷渲染指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
vue提供了v-for列表渲染指令,用來輔助開發者基於一個數組來迴圈渲染-
一個列表結構。v-for 指令需要使
用item in items形式的特殊語法，其中:
●items是待迴圈的陣列
●item是被迴圈的每- 項
-->
<ul>
<li v-for="item in list">
ID:{{item.id}} Name:{{item.name}} Gender:{{item.gender}}
</li>
</ul>
<!--
推薦寫法：
(row, index) in list，可以附帶一個序號變數
官方建議:
1、只要用到了v-for 指令，那麼一定要繫結一個:key 屬性
2、儘量把id作為key的值, key的資料型別要求數字和字串
3、key值不允許重複值 否則會終端報錯: Duplicate keys detected
4、使用資料的ID屬性 既提升效能、又防止列表狀態紊亂
-->
<ul>
<li v-for="(item, idx) in list" :key="item.id">
ID:{{item.id}} Name:{{item.name}} Gender:{{item.gender}}
</li>
</ul>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素例項，
data: {
list: [
{id: 1, name: '25', gender: true},
{id: 2, name: '22', gender: false},
{id: 3, name: '23', gender: true},
{id: 4, name: '24', gender: false},
{id: 5, name: '26', gender: true},
]
}
})
</script>
</body>
</html>