网站程序组成,photoshop手机版免费破解版,化妆品网站静态模板,濮阳新闻1.7 指令修饰符 keyup.enter#xff1a;监听键盘回车事件#xff0c;回车触发事件keyup.enter代码 v-model修饰符#xff1a; v-model.trim#xff1a;去首尾空格v-model.number#xff1a;变数字#xff08;如果是数字的话#xff0c;转变为数字#xff09; 事件名.…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 classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/div
数组div classbox :class[ 类名1 类名2 类名3]/div对象适用场景一个类名来回切换 数组适用场景批量添加或者删除 v-bind行内样式(style)增强操作style。[v-bind style](#v-bind style) 语法:style样式对象style中的json键值对需要将值引起来否则报错 适用场景某个属性动态设置 div classbox :style{ css属性名1: css属性值, css属性名2: css属性值2}/divkeyup.enter代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3keyup.enter → 监听回车事件/h3input keyup.enterfn v-modelusername typetext/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: },methods: {fn (e) {if (e.key Enter) {console.log(键盘回车键触发, this.username)}}}})/script
/body
/html上面三个修饰符
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
bodydiv idapph3v-model修饰符 .trim .number/h3姓名input v-model.trimusername typetextbr年龄input v-model.numberage typetextbrh3事件名.stop → 阻止冒泡/h3div clickouterFn classouterdiv click.stopinnerFn classinner子块/div/divh3事件名.prevent → 阻止默认行为/h3a click.prevent hrefhttps://www.baidu.com阻止默认行为/a/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,userage: },methods: {outerFn(){alert(外部点击)},innerFn(e){// e.stopPropagation()alert(内部点击)}}})/script
/body
/htmlv-bind class
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlejd导航栏/titlestyle/* 移除所有元素的默认外边距和内边距以便更好地控制布局 */ * { 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
bodydiv idappulli v-for(item, index) in list :keyitem.id clickactiveIndex indexa :class{ active: index activeIndex } href#{{ item.name }}/a/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script scriptconst app new Vue({el: #app,data: {activeIndex: 2,list: [{id: 1, name: 京东秒杀},{id: 2, name: 每日特价},{id: 3, name: 品类秒杀}]}})/script
/body
/htmlv-bind style
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
bodydiv idapp!-- 外层盒子 灰色 --div classprogress-bar!-- 内层盒子 蓝色 --div classinner :style{ width: percent %}span{{ percent }}%/span/div/divbutton clickpercent 2525%/buttonbutton clickpercent 5050%/buttonbutton clickpercent 7575%/buttonbutton clickpercent 100100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {percent: 30}})/script
/body
/html1.8 v-model表单元素
常见的单元表格都可以使用v-model进行绑定关联→快速获取或者设置表单元素的值。他会根控件类型自动选取正确的元素类型
使用v-model绑定关联以后可以在data中快速取走上传的数据
常见表单元素
表单元素自动关联类型输入框input:textvalue文本域textareavalue复选框input:checkboxchecked单选框input:radiochecked下拉菜单selectvalue
radio的name和value结合v-model使用这两个属性原生语法
name属性实现给两个选项按钮分组实现同时只有一个属性被选中value实现给表单的value属性用于提交后台的数据配合name使用name用于给用户看的是不会向后端传递什么数据的使用value实现向后端传递数据
性别input v-modelgender typeradio namegender value1♂input v-modelgender typeradio namegender value2♀brbr原生语法
option需要设置value值提交给后台select的value值关联了选中的option的value值 在网页元素查找中因为没有显式指定元素所以当前选中的元素会使用$0作为变量名来展示 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptdiv idapph3简历投递/h3姓名input v-modelusername typetextbrbr是否单身input v-modelisSingle typecheckboxbrbr性别input v-modelgender typeradio namegender value1♂input v-modelgender typeradio namegender value2♀brbr所在城市select v-modelcityIdoption value101北京/optionoption value102上海/optionoption value103北京/optionoption value104北京/option/selectbrbr自我描述textarea v-modeldesc/textareabutton立即注册/button/divscriptconst app new Vue({el: #app,data: {username: ,isSingle: false,gender: 1,cityId: 102,desc: }})/script
/body
/html1.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
