02. Directive
November 11, 2023About 8 min
Mustache
<div id="app">
<h2 v-once>{{message}}</h2>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>Most Used Directives
v-once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue study - v-once</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 数据绑定后，UI不会随着数据的变化而发生变化 -->
<h2 v-once>{{message}}</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello world"
}
})
</script>
</body>
</html>v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul> <li v-for="item in names">{{item}}</li> </ul>
<ul> <li v-for="(item, index) in names">{{index+1}} {{item}}</li> </ul>
<ul> <li v-for="(value, key) in info">{{key}}:{{value}}</li></ul>
<ul> <li v-for="(value, key, index) in info">{{key}}:{{value}}:{{index}}</li> </ul>
<ul> <li v-for="item in items" :key="item">{{item}}</li> </ul>
<button @click="btnClick">btn</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
names: ['item1', 'item2', 'item3', 'item4'],
info: {
name: 'why',
age: 18,
height: 2.0
},
items: ['a', 'b', 'c', 'd'],
},
methods:{
btnClick(){
//1.push Yes
//this.items.push('f')
//2.modify data by index No.
//this.items[0] = 'aaaaa'
//yes for listening
//pop() //删除最后
//shift() //删除第一
//unshift()//最前面添加多个元素
//splice() //可删，可加，可替换
//sort()
//reverse()
//this.items.reverse()
//this.items.sort()
}
}
})
</script>
</body>
</html>v-text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue study - v-text</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 设置文本，若标签中存在文本，则会被message中内容覆盖 -->
<h2 v-text="message"></h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello world"
}
})
</script>
</body>
</html>v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue study - v-html</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 将绑定值以HTML代码处理 -->
<h2 v-html="url"></h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
url: '<a href="https://www.baidu.com">Baidu</a>'
}
})
</script>
</body>
</html>v-pre
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue study - list</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--作用：不进行解析，直接显示{{message}}-->
<h2 v-pre>{{message}}</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello world"
}
})
</script>
</body>
</html>v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue study - list</title>
<script src="../js/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--
在vue解析前，div中有一个属性v-cloak，解析后删除该属性，因
此可通过css一起配合避免DOM闪动的情况（一般由于JS执行卡顿导致） -->
<div id="app" v-cloak>
<h2 v-once>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2 v-once>{{counter*2}}</h2>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
setTimeout(function(){
const app = new Vue({
el:"#app",
data:{
message:"hello world",
firstName: "xxxx",
lastName: "sssss",
counter : 1,
url: '<a href="https://www.baidu.com">Baidu</a>',
movies:["海王", "新机穿越","大话西游","盗梦空间"],
}
})},
1000)
</script>
</body>
</html>v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-if="score>=90"> 优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else>合格</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
score: 70
}
})
</script>
</body>
</html>v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-show 若不显示时，知识在DOM中增加行内样式display: none -->
<span v-show="isUser">
<label for="username">用户账户</label>
<input id="username" placeholder="用户账户" key="username"></input>
</span>
<span v-show="isEmail">
<label for="email">用户邮箱</label>
<input id="email" placeholder="用户邮箱" key="email"></input>
</span>
<button @click="isUser = !isUser">切换登录</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true,
isEmail: true
}
})
</script>
</body>
</html>v-bind
指令全写为v-bind:{被绑属性}=“被绑值” 也可简写为 :{被绑属性}=“被绑值”，主要作用对属性实现绑定。
Basic
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title></title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgURL"></img>
<img :src="imgURL"></img>
<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hello world",
imgURL : "data:image/jpeg;base64,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",
isActive: true,
isLine: false
}
})
</script>
</body>
</html>Bind Object
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title></title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hello world",
isActive: true,
isLine: false
},
methods: {
btnClick: function(){
this.isActive = !this.isActive;
},
getClasses: function(){
return {active: this.isActive, line: this.isLine};
}
}
})
</script>
</body>
</html>Bind Array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title></title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 class="title" :class="[active, line]">{{message}}</h2>
<button v-on:click="btnClick">点击</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello world"
isActive: true,
isLine: false,
active: "active",
line: "line"
},
methods: {
btnClick: function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>Bind Style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title></title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :style="{fontSize: '50px'}">{{message}}</h2>
<h2 :style="{fontSize: fsize}">{{message}}</h2>
<h2 :style="{fontSize: ifsize + 'px'}">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hello world",
fsize: "50px",
ifsize: 100
},
methods: {
btnClick: function(){
this.isActive = !this.isActive;
},
getClasses: function(){
return {active: this.isActive, line: this.isLine};
}
}
})
</script>
</body>
</html>Bind Style Array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title></title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hello world",
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '50px'}
},
methods: {
btnClick: function(){
this.isActive = !this.isActive;
},
getClasses: function(){
return {active: this.isActive, line: this.isLine};
}
}
})
</script>
</body>
</html>v-on
事件绑定指令，绑定语法为 v-on:事件=”被绑定方法”，或者简写为 @事件=”被绑定方法”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="btn1Click()"> click1</button>
<button @click="btn1Click"> click2</button>
<button @click="btn2Click()">click3</button>
<!--when the param is omitted, the param will be assigned with event object-->
<button @click="btn2Click"> click4</button>
<button @click="btn3Click(123, $event)"> click5</button>
<button @click="btn1Click()"> click6</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {},
methods: {
btn1Click(){
console.log('btn1Click')
},
btn2Click(param){
console.log(param)
},
btn3Click(abc, event){
console.log(abc)
console.log(event)
}
}
})
</script>
</body>
</html>Event Handling
Most Used List
.stop：阻止单击事件继续传播.prevent：提交事件不再重载页面.capture： 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。.self： 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的。.once：点击事件将只会触发一次
<!-- 样例代码 -->
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>model
主要用于表单数据的绑定，实现表单元素和数据的双向绑定。双向绑定的本质就是对UI进行输入监测，然后反向修改被绑定数据。
Basic
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message" >
<input type="text" :value="message" @input="valueChange">
<input type="text" :value="message" @input="message=$event.target.value">
{{message}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello world."
},
methods:{
valueChange(event){
this.message = event.target.value;
}
}
})
</script>
</body>
</html>Radio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" id="male2" value="男" name="11" v-model="sex">男</input>
<input type="radio" id="female2" value="女" name="11" v-model="sex">女</input>
</br>
<label for="male">
<input type="radio" id="male" value="男" v-model="gender">男</input>
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="gender">女</input>
</label>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
sex: "男",
gender: "男"
},
methods:{
valueChange(event){
this.message = event.target.value;
}
}
})
</script>
</body>
</html>Checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 01.单选框 -->
<label for="is">
<input type="checkbox" id="is" v-model="agree">同意</input>
</label>
</br>
<!-- 02. 多选框 -->
<label for="">
<input type="checkbox" value="足球" v-model="hobbies">足球</input>
<input type="checkbox" value="篮球" v-model="hobbies">篮球</input>
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球</input>
<input type="checkbox" value="橄榄球" v-model="hobbies">橄榄球</input>
</label>
<h2>您的爱好：{{hobbies}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
agree: false,
hobbies: []
},
methods:{
}
})
</script>
</body>
</html>Dropbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<select name="abc" id="" v-model="fruit">
<option value="1">苹果</option>
<option value="2">香蕉</option>
<option value="3">草莓</option>
<option value="4">蓝莓</option>
<option value="5">榴莲</option>
</select>
<h2>您的选择为：{{fruit}}</h2>
<select name="abc" id="" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
<option value="蓝莓">蓝莓</option>
<option value="榴莲">榴莲</option>
</select>
<h2>您的选择为：{{fruits}}</h2>
<select name="abc" id="" v-model="fruits" multiple >
<option v-for="item in originalFruits" :value="item">{{item}}</option>
</select>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
agree: false,
fruit: [],
fruits: [],
originalFruits:["苹果","香蕉","草莓","蓝莓","榴莲"] ,
},
methods:{
}
})
</script>
</body>
</html>v-model modifier
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 01. lazy -->
<input type="text" v-model.lazy="message">
{{message}}
</br>
<!-- 02. number -->
<input type="text" v-model.number="age">
{{age}}:{{typeof age}}
</br>
<!-- 03.trim -->
<input type="text" v-model.trim="name">
|{{name}}|
</br>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hello world",
age: 15,
name: "james"
},
methods:{
}
})
</script>
</body>
</html>