1.7 指令修饰符
-
@keyup.enter:监听键盘回车事件,回车触发事件@keyup.enter代码
-
v-model修饰符:
- v-model.trim:去首尾空格
- v-model.number:变数字(如果是数字的话,转变为数字)
-
@事件名.stop:阻止冒泡现象,如果在大盒子中嵌套小盒子,点击小盒子之后,小盒子响应,之后大盒子也会相应,因为小盒子在大盒子所包含的区域当中,使用stop可以阻止这种冒泡行为 (可以通过在小盒子中添加
e.stopPropagation()
解决但是太长了)在小盒子的点击事件中直接写@click.stop
即可达成效果 -
@事件名.prevent:阻止默认行为:比如写了一个超链接,把@click写成@click.prevent就不会跳转了上面三个修饰符
-
v-bind对于控件样式增强:
-
v-bind控制class。[v-bind class](#v-bind class)
-
语法:
:class="对象/数组"
-
对象键就是名,值是bool,如果值为true就有这个类,反之没有这个类
数组中所有的类都会添加到盒子中,本质是一个class列表 -
对象:<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div> 数组:<div class="box" :class="[ 类名1, 类名2, 类名3]"></div>
-
对象,适用场景:一个类名来回切换
数组,适用场景:批量添加或者删除
-
-
v-bind行内样式(style)增强,操作style。[v-bind style](#v-bind style)
-
语法:
:style="样式对象"
(style中的json键值对需要将值引起来,否则报错) -
适用场景:某个属性动态设置
-
<div class="box" :style="{ css属性名1: css属性值, css属性名2: css属性值2}"></div>
-
-
@keyup.enter代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h3>@keyup.enter → 监听回车事件</h3><input @keyup.enter='fn' v-model='username' type="text"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: ''},methods: {fn (e) {if (e.key === 'Enter') {console.log('键盘回车键触发', this.username)}}}})</script>
</body>
</html>
上面三个修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 100px;height: 100px;background-color: pink;position: relative;}.inner{width: 50px;height: 50px;background-color: cornflowerblue;position: absolute;top: 0;left: 0;}</style>
</head>
<body><div id="app"><h3>v-model修饰符 .trim .number</h3>姓名:<input v-model.trim="username" type="text"><br>年龄:<input v-model.number="age" type="text"><br><h3>@事件名.stop → 阻止冒泡</h3><div @click='outerFn' class='outer'><div @click.stop='innerFn' class='inner'>子块</div></div><h3>@事件名.prevent → 阻止默认行为</h3><a @click.prevent href="https://www.baidu.com">阻止默认行为</a></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {username: '',userage: ''},methods: {outerFn(){alert("外部点击")},innerFn(e){// e.stopPropagation()alert("内部点击")}}})</script>
</body>
</html>
v-bind class
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jd导航栏</title><style>/* 移除所有元素的默认外边距和内边距,以便更好地控制布局 */ * { margin: 0; padding: 0; } /* 设置无序列表的显示方式为Flex布局,并添加底部边框和内边距 */ ul { display: flex; /* 使用Flexbox布局 */ border-bottom: 2px solid #e01222; /* 底部边框为2px宽的实线,颜色为#e01222 */ padding: 0 10px; /* 内边距设置为左右各10px,上下为0 */ } /* 设置列表项的样式,包括宽度、高度、行高、移除列表符号以及文本居中对齐 */ li { width: 100px; /* 每个列表项的宽度为100px */ height: 50px; /* 每个列表项的高度为50px */ line-height: 50px; /* 设置行高为50px,以实现垂直居中文本 */ list-style: none; /* 移除列表项前的默认项目符号 */ text-align: center; /* 文本在列表项中居中对齐 */ } /* 设置列表项内链接的样式,包括显示方式、移除下划线、字体加粗和文本颜色 */ li a { display: block; /* 将链接的显示方式设置为块级元素 */ text-decoration: none; /* 移除链接文本的下划线 */ font-weight: bold; /* 字体加粗 */ color: #333333; /* 文本颜色为深灰色#333333 */ } /* 当链接具有active类时,改变其背景色和文本颜色 */ li a.active { background-color: #e01222; /* 背景色变为#e01222(红色) */ color: #fff; /* 文本颜色变为白色 */ }</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index"><a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script>const app = new Vue({el: "#app",data: {activeIndex: 2,list: [{id: 1, name: '京东秒杀'},{id: 2, name: '每日特价'},{id: 3, name: '品类秒杀'}]}})</script>
</body>
</html>
v-bind style
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.progress-bar { width: 100%; /* 进度条的总宽度 */ height: 20px; /* 与内部元素高度一致 */ border-radius: 10px; /* 圆角与内部元素一致 */ background-color: #e0e0e0; /* 外部容器的背景色,通常为灰色或浅色 */ overflow: hidden; /* 确保内部元素超出部分不可见 */ box-sizing: border-box; /* 使得padding和border包含在总宽度内 */ } .inner { width: 50%; /* 初始宽度,实际使用时可能通过JavaScript动态设置 */ height: 100%; /* 填满外部容器的高度 */ border-radius: 10px; /* 圆角与外部容器一致 */ text-align: right; /* 如果需要文本对齐,但通常进度条内部不放置文本 */ position: relative; /* 如果需要内部元素定位 */ background-color: #409eff; /* 进度条的颜色 */ background-size: 20px 20px; /* 这行通常用于背景图片,对于纯色背景不需要 */ transition: all 1s; /* 过渡效果(1s应为时间) */ }</style>
</head>
<body><div id="app"><!-- 外层盒子 灰色 --><div class="progress-bar"><!-- 内层盒子 蓝色 --><div class="inner" :style="{ width: percent + '%'}"><span>{{ percent }}%</span></div></div><button @click="percent = 25">25%</button><button @click="percent = 50">50%</button><button @click="percent = 75">75%</button><button @click="percent = 100">100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 30}})</script>
</body>
</html>
1.8 v-model表单元素
常见的单元表格都可以使用v-model进行绑定关联→快速获取或者设置表单元素的值。他会根控件类型自动选取正确的元素类型
使用v-model绑定关联以后可以在data中快速取走上传的数据
常见表单元素:
表单元素 | 自动关联类型 |
---|---|
输入框input:text | value |
文本域textarea | value |
复选框input:checkbox | checked |
单选框input:radio | checked |
下拉菜单select | value |
radio的name和value(结合v-model使用这两个属性)(原生语法):
- name属性实现给两个选项按钮分组,实现同时只有一个属性被选中
- value实现给表单的value属性,用于提交后台的数据,配合name使用
- name用于给用户看的是不会向后端传递什么数据的,使用value实现向后端传递数据
性别:<input v-model="gender" type="radio" name="gender" value="1">♂<input v-model="gender" type="radio" name="gender" value="2">♀<br><br>
原生语法:
- option需要设置value值提交给后台
- select的value值关联了选中的option的value值
在网页元素查找中因为没有显式指定元素,所以当前选中的元素会使用$0作为变量名来展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app"><h3>简历投递</h3>姓名:<input v-model="username" type="text"><br><br>是否单身:<input v-model="isSingle" type="checkbox"><br><br>性别:<input v-model="gender" type="radio" name="gender" value="1">♂<input v-model="gender" type="radio" name="gender" value="2">♀<br><br>所在城市:<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">北京</option><option value="104">北京</option></select><br><br>自我描述:<textarea v-model="desc"></textarea><button>立即注册</button></div><script>const app = new Vue({el: "#app",data: {username: '',isSingle: false,gender: '1',cityId: '102',desc: ''}})</script>
</body>
</html>
1.9 计算属性
基于现有的数据,计算出来的新属性,依赖的数据变化,就会重新计算(vue是数据驱动的)
语法:
- 在vue实例中声明computed配置项,一个计算属性对应一个函数
- 使用起来和普通属性一样使用{{ 计算属性名 }}
computed: {计算属性名 () {基于现有数据逻辑return res}
}
计算属性就是将一段求值代码进行封装,在调用的时候,因为属性名是一个配置项调用不些括号,写括号会出现没有这个函数定义的错误,网页会直接崩溃
计算属性computed和method方法:
-
computed计算属性:封装一段数据的处理,求得一个结果。语法:
- 写在computed配置项中
- 作为属性,直接使用→this.计算属性{{ 计算属性 }}
-
method方法:给实例提供一个方法,调用以处理业务逻辑。语法:
- 写在method配置项中
- 作为方法,需要调用→this.方法名() {{ 方法() }} @事件名=“方法名”
-
计算属性是有缓存的,这种缓存特性会将计算出的结果进行缓存,依赖项变化,会重新计算并在再次缓存
-
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
计算属性的完整写法:
computed: {计算属性名: {get() {逻辑return res;}set(修改值) {逻辑return res;}}
}
参考文献
黑马程序员:https://www.bilibili.com/video/BV1HV4y1a7n4/
菜鸟教程:https://www.runoob.com/vue2/vue-tutorial.html