指令是vue为开发者提供的模板语法,用于辅助开发渲染页面的基本结构
vue中的指令展昭不同的用途分为如下6大类
1.内容渲染指令
内容渲染指令用来辅助开发渲染DOM元素的文本内容,常用的渲染指令有如下3个:
v-text
用法示例:
<div id="app">
<p v-text="username"></p>
</div>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
username: 'zhangsan'
}
})
</script>注意: v-text 的指令会覆盖原本元素内部原有的内容
实际开发中使用的较少
{{}}
vue提供的{{}}语法,专门用来解决v-text会覆盖默认文本内容的问题,这种{{}}语法的专业名称是插值表达式
用法示例:
<p>性别: {{ gender }}</p>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
username: 'zhangsan',
gender: '女'
}
})
</script>插值表达式在实际开发中使用的最多,只作为内容的占位符,不覆盖原有内容
v-html
v-text指令和插值表达式只能渲染纯文本内容,如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要使用到v-html这个指令
用法示例:
<p v-html="info"></p>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
username: 'zhangsan',
gender: '女',
info: '<h4 style="color: red; font-weight: bold;">h4标签的内容</h4>'
}
})
</script>v-html指令可以把带有标签的字符串,渲染成真正的HTML内容
代码合集:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- vue能够控制下方div 把数据填充到div内部 -->
<div id="app">
<p v-text="username"></p>
<p v-text="gender">性别: </p>
<hr>
<p>姓名: {{ username }}</p>
<p>性别: {{ gender}}</p>
<hr>
<p v-text="info"></p>
<p>{{ info }}</p>
<p v-html="info"></p>
</div>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
username: 'zhangsan',
gender: '女',
info: '<h4 style="color: red; font-weight: bold;">h4标签的内容</h4>'
}
})
</script>
</body>
</html>
2.属性绑定指令
如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令,用法示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- vue能够控制下方div 把数据填充到div内部 -->
<div id="app">
<input type="text" :placeholder="tips">
<hr>
<!-- vue规定 v-bind指令可以简写为 ':' -->
<img :src="photos" alt="">
</div>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
tips: '请输入用户名',
photos: 'https://v3.cn.vuejs.org/logo.png'
}
})
</script>
</body>
</html>
使用JavaScript表达式
在vue提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持JavaScript表达式的运算,例如:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>在使用v-bind期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如:
<div :title="'box' + index">div元素内容</div>代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- vue能够控制下方div 把数据填充到div内部 -->
<div id="app">
<input type="text" :placeholder="tips">
<hr>
<!-- vue规定 v-bind指令可以简写为 ':' -->
<img :src="photos" alt="">
<hr>
<div>1 + 2 的结果是: {{ 1 + 2 }}</div>
<div>{{ tips }} 反转的结果是: {{ tips.split('').reverse().join('') }}</div>
<div :title="'box' + index">div元素内容</div>
</div>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
tips: '请输入用户名',
photos: 'https://v3.cn.vuejs.org/logo.png',
index: 3
}
})
</script>
</body>
</html>
3.事件绑定指令
vue提供了v-on时间绑定指令,用来辅助程序员为DOM元素绑定事件监听,语法格式如下:
<h3>count的值为: {{ count }}</h3>
<!-- 语法格式为v-on:事件名称="事件处理函数的名称" -->
<button v-on:click="addCount">+1</button>注意: 原生DOM对象有onclick, oninput,onkeyup 等原生事件,替换为vue的时间绑定形式后,分别为: v-on:click, v-on:input, v-on:keyup, v-on:可以简写为 @
绑定事件代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- vue能够控制下方div 把数据填充到div内部 -->
<div id="app">
<p>count的值是: {{ count }}</p>
<!-- 在绑定事件处理函数的时候 可以用()传递参数 -->
<!-- v-on: 这个指令可以被简写为 @ 符号 -->
<button @click="add(1)">+1</button>
<button @click="sub">-1</button>
</div>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
count: 0
},
//methods的作用就是定义事件的处理函数
methods: {
add: function(n) {
// vm.count += n
this.count += n
console.log(vm === this);
},
//简写方式
sub() {
this.count -= 1
console.log('sub处理函数');
}
}
})
</script>
</body>
</html>注意:
1.vm为vue对象,也可以用来取值(如上vm.count),但是建议使用this代替,vue与this是完全相同的
2.添加处理函数的语法示例为:(上为一般写法,下为简写)
add: function(n) {
console.log(1)
}
add() {
console.log(1)
}事件绑定$event对象
vue提供了内置变量,$event 他就是原生DOM的事件对象,可供操作DOM
代码示例:
<button @click="add(1, $event)">+N</button>
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
count: 0
},
methods: {
add(n, e) {
this.count += n
console.log(e)
//判断this.count的值是否为偶数
if(this.count % 2 === 0) {
//偶数
e.target.style.backgroundColor = 'red'
}else {
//奇数
e.target.style.backgroundColor = ''
}
}
}
})
</script>事件修饰符
vue提供了事件修饰符,在事件绑定指令后面加上事件修饰符,即可对事件的触发进行控制,常用的5个事件修饰符如下:
| 事件修饰符 | 说明 |
|---|---|
| .prevent | 阻止默认行为(例如: 阻止a链接的跳转,阻止表单的提交等) |
| .stop | 阻止事件冒泡 |
| .capture | 已捕获模式触发当前事件处理函数 |
| .once | 绑定的事件只触发1次 |
| .self | 只有在event.target是当前元素自身时触发事件处理函数 |
用法示例:
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a><button @click.stop="btnHandler">按钮</button>按键修饰符
在监听键盘事件时,我们经常需要判断详细的按键,此时,可以为键盘相关的事件添加键盘修饰符,例如:
<!-- 只有在 'key' 为 'Enter' 时调用 'vm.submit()' -->
<input @keyup.enter="submit" type="text">
<!-- 只有在 'key' 为 'Esc' 时调用 'vm.ClearInput()' -->
<input @keyup.esc="ClearInput" type="text">
4.双向绑定指令
vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下,快速获取表单的数据
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- vue能够控制下方div 把数据填充到div内部 -->
<div id="app">
<p>用户名为: {{ username }}</p>
<input type="text" v-model="username">
<hr>
<input type="text" :value="username">
<hr>
<select name="" id="" v-model="city">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</div>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
username: 'zhangsan',
city: '2'
}
})
</script>
</body>
</html>v-model的使用场景:
- input输入框
- type="radio"
- type="checkbox"
- type="xxxx"
- textarea
- select
v-model指令的修饰符
为了方便对用户输入的内容进行处理,vue为了v-model指令提供了3个修饰符:
| 修饰符 | 作用 | 示例 |
|---|---|---|
| .number | 自动将用户的输入值转为数值类型 | <input v-model.number="age" /> |
| .trim | 自动过滤用户输入的首尾空白字符 | <input v-model.trim="msg" /> |
| .lazy | 在"change"时而非"input"时更新 | <input v-model.lazy="msg" /> |
用法示例如下:
<input type="text" v-model.number="n1" /> +
<input type="text" v-model.number="n2" /> =
<span>{{ n1 + n2 }}</span>代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- vue能够控制下方div 把数据填充到div内部 -->
<div id="app">
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}</span>
<hr>
<input type="text" v-model.trim="username">
<button @click="showName">获取用户名</button>
<hr>
<input type="text" v-model.lazy="username">
</div>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
username: 'zhangsan',
n1: 1,
n2: 2
},
methods: {
showName() {
console.log(`用户名是: "${this.username}"`);
}
}
})
</script>
</body>
</html>
5.条件渲染指令
条件渲染指令用来辅助开发者按控制DOM的显示与隐藏,条件渲染指令有如下两个,分别是:
- v-if
- v-show
示例用法如下:
<div id="app">
<p v-if="networkState === 200">请求成功 --- 被 v-if 控制</p>
<p v-if="networkState === 200">请求成功 --- 被 v-show 控制</p>
</div>v-show
原理是动态为元素添加或移除 display: none 样式,来实现元素的显示和隐藏
如果要频繁的切换元素的显示状态,v-show性能会更好
v-if (用的较多)
原理是每次动态创建或移除元素,实现元素的显示和隐藏
如果刚打开页面的时候,某些元素不需要被展示,而且后期很这个元素也很可能不需要被展示出来,此时v-if性能更好
v-else
v-if可以单独使用,或配合v-else指令一起使用:
<div v-if="Math.random() > 0.5">
随机数大于0.5
</div>
<div v-else>
随机数小于0.5
</div>注意: v-else 指令必须配合 v-if 指令一起使用,否则它将不会被识别
v-else-if
v-else-if指令,充当v-if的"else-if块",可以连续使用
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
注意: v-else-if 指令必须配合 v-if 指令一起使用,否则它将不会被识别
6.列表渲染指令
vue提供了 v-for 列表渲染指令,用来辅助开发者给予一个数组来循环渲染一个列表结构,v-for 指令需要用 item in items 形式的特殊语法,其中:
- items 是待循环的数组
- item 是被循环的每一项
data: {
list: [//列表数据
{id: 1, name: 'zs'},
{id: 2, name: 'ls'}
]
}
//------------- 分割线 -------------
<ul>
<li v-for="item in list">姓名是: {{ item.name }}</li>
</ul>
v-for中的索引
v-for 指令还支持一个可选的第二个参数,即当前项的索引,语法格式为 (item, index) in items, 示例代码如下:
data: {
list: [//列表数据
{id: 1, name: 'zs'},
{id: 2, name: 'ls'}
]
}
//------------- 分割线 -------------
<ul>
<li v-for="(item, index) in list">姓名是: {{ item.name }}</li>
</ul>
注意: v-for 指令中的 item项 和 index索引 都是形参,可以根据需要进行重命名
例如(user, i) in userlist
key值的注意事项
- key的值只能是字符串或数字类型
- key的值必须具有唯一性(即: key的值不能重复)
- 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
- 使用 index 的值当作 key 的值没有任何意义,在添加新项的时候,索引号会被上个元素覆盖(因为 index 的值不具有唯一性)
- 建议使用 v-for 指令时一定要指定 key 的值(即提升性能,又防止列表状态紊乱)
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- vue能够控制下方div 把数据填充到div内部 -->
<div id="app">
<!-- 添加用户的区域 -->
<div>
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<!-- 添加列表区域 -->
<ul>
<li v-for="(user,index) in userlist" :key="user.id">
<input type="checkbox">
姓名: {{ user.name }}
</li>
</ul>
</div>
<!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
<script src="./vue.js"></script>
<!-- 创建vue实例对象 -->
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定写法 表示当前vm示例要控制页面上的哪个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
userlist: [
{id: 1, name: 'zs'},
{id: 2, name: 'ls'}
],
//输入的用户名
name: '',
//下一个可用的 Id 值
nextId: 3
},
methods: {
addNewUser() {
this.userlist.unshift({id: this.nextId, name: this.name})
this.name = ''
this.nextId += 1
}
}
})
</script>
</body>
</html>
7437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
