常州溧阳建设工程管理中心网站,广州网站建设排名一览表,服务营销理论,沈阳 网站制作报价提示#xff1a;学习vue2的第二天#xff0c;笔记记录#xff1a;自定义指令#xff0c;事件修饰符#xff0c;属性计算#xff0c;属性监听#xff0c;属性过滤 目录
一、自定义指令
1.全局注册
2.局部注册
二、事件修饰符
1.常用事件修饰符
1#xff09;事件相… 提示学习vue2的第二天笔记记录自定义指令事件修饰符属性计算属性监听属性过滤 目录
一、自定义指令
1.全局注册
2.局部注册
二、事件修饰符
1.常用事件修饰符
1事件相关修饰符
2键盘事件相关修饰符
3鼠标事件相关修饰符
三、属性计算
四、属性监听
五、属性过滤 一、自定义指令
在 Vue 中你可以通过自定义指令来扩展 HTML 元素的行为。
1.全局注册
directive:全局注册通过Vue下的一个方法directive来自定义指令全局注册的指令可以在任何 Vue 实例的模板中使用
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/title
/headbodydiv idapp!-- 定义一个改变字体颜色的指令--h2 v-colorpurple你好世界/h2/divscript src./libs/vue.js/scriptscript// 当文档上指令满足不了我们的需求可以选择自定义指令// 1) 注册全局指令Vue.directive(color, {// 当被绑定的元素插入到 DOM 中时改变字体颜色//el:被绑定的元素option:接受的参数是一个对象inserted: function (el,option) {if(typeof el object){el.style.color option.value;}}})//禁止控制台输出日志信息Vue.config.productionTip false;new Vue({//挂载容器el: #app,})/script
/body/html
2.局部注册 directives:局部注册是在vue实例中通过在对象directives中进行自定义指令
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/title
/headbodydiv idapp!-- 渲染纯文本 --h2 v-texthello title/h2hr!--自定义指令渲染文本--h3 v-mytext2024/h3/divscript src./libs/vue.js/scriptscript// 当文档上指令满足不了我们的需求可以选择自定义指令//禁止控制台输出日志信息Vue.config.productionTip false;new Vue({//挂载容器el: #app,// 2)自定义指令directives: {// 名称mytext: {inserted(el, option) {// console.log(el, option);if (typeof el object) {el.innerHTML option.value;}}},}})/script
/body/html
二、事件修饰符
事件修饰符是用于修改事件监听器行为的特殊指令。它们以点号 . 结尾用于在触发事件时执行特定的行为或修改事件的默认行为。
1.常用事件修饰符
1事件相关修饰符
.stop阻止事件冒泡。相当于调用 event.stopPropagation()。.prevent阻止事件的默认行为。相当于调用 event.preventDefault()。.capture使用事件捕获模式即在捕获阶段处理事件。.self只当事件是从侦听器绑定的元素本身触发时才触发回调。如果事件是从内部元素触发的则不触发。.once事件只会触发一次触发后会自动移除事件监听器。.passive告诉浏览器该事件监听器不会调用 preventDefault()。这可以提高滚动性能。
2键盘事件相关修饰符
.enter监听 Enter 键。.tab监听 Tab 键。.delete 或 .backspace监听删除键Backspace。.esc监听 Esc 键。.space监听空格键。.up监听上箭头键。.down监听下箭头键。.left监听左箭头键。.right监听右箭头键
3鼠标事件相关修饰符
.left监听鼠标左键点击事件。.right监听鼠标右键点击事件。.middle监听鼠标中键点击事件。.up监听鼠标滚轮向上滚动事件。.down监听鼠标滚轮向下滚动事件。
三、属性计算
使用属性计算你可以在 Vue 实例中定义一些衍生属性这些属性会根据 Vue 实例的响应式数据动态计算得到。这在很多情况下可以简化模板中的逻辑使得模板更加清晰和简洁。
通过在Vue实例中在computed对象中定义方法来进行属性计算在模板语法中方法无需加小括号()
!DOCTYPE html
html langzh-cn
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlelink relstylesheet href./libs/bootstrap/css/bootstrap.css
/head
bodydiv idappdiv classcontainer mt-3div classrowdiv classcol-4input v-modelfirstName typetext classform-control placeholder请输入姓/divdiv classcol-4input v-modellastName typetext classform-control placeholder请输入名/divdiv classcol-4span style font-size: 22px;text-decoration: underline;{{fullName}}/span/div/div/divhrdiv classcontainerinput classform-control typenumber v-modelnumbutton classbtn btn-success mt-2计算 {{num}} 乘以 2 等于 {{doubleValue}} /button/div/divscript src./libs/vue.js/scriptscript//禁止控制台输出日志信息Vue.config.productionTip false;new Vue({//挂载容器el: #app,// 设置数据data: {firstName: ,// 姓lastName: ,//名num: 0},// 属性计算 (只读不写)// 例如 fullName doubleValue这些属性是不可以修改的// 错误: this.fullName xxx// 此处是对象computed: {// 在这个对象中写方法这个方法名称就可以作为属性retrun的值就是计算的结果// 全名// fullName: {// get(){// return this.firstName this.lastName// }// },fullName(){return this.firstName this.lastName;},// 获取双倍的值doubleValue(){return this.num * 2;}}})/script
/body
/html
四、属性监听 在vue实例中在watch对象中来监听 Vue 实例上的数据变化并在数据变化时执行自定义的方法。通过属性监听你可以监视一个或多个属性的变化并在这些属性发生变化时执行相应的操作。
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlelink relstylesheet href./libs/bootstrap/css/bootstrap.css
/headbodydiv idappdiv classcontainer mt-3input v-modelcity typetext placeholder请输入城市 classform-control/divdiv classcontainer mt-3ulli clickplay(1)歌曲1/lili clickplay(2)歌曲2/lili clickplay(3)歌曲3/lili clickplay(4)歌曲4/li/ul/divdiv classcontainer mt-3button clickaddAge classbtn btn-success改变用户年龄/button/div/divscript src./libs/vue.js/scriptscript// 属性侦听// 主要是观察数据的变化只要数据发生改变就执行相关的回调函数// data、路由等数据发生改变就可以执行对应的回调往往用于处理一些异步的操作// 例如 根据城市名称查询天气信息根据歌曲id获取歌曲信息//禁止控制台输出日志信息Vue.config.productionTip false;new Vue({//挂载容器el: #app,data: {city: 广州,music_id: ,user: {age: 20}},// 侦听器// 侦听器、属性侦听不是计算结果不用写return // 这些回调函数的名称就是属性名称例如data: {city: music_id,user 。。。。}watch: {// 观察city属性的变化city: {// nValue改变之后的数据,oValue改变之前的数据 可选参数handler(nValue, oValue) {console.log(观察city是否发生改变....)}},music_id: {handler(nValue, oValue) {console.log(观察music_id是否发生改变...., nValue)}},// 遇到引用数据类型的时候考虑使用深度侦听user: {deep: true,// 深度侦听immediate: true, // 立即执行handler(nValue, oValue) {console.log(观察user.age是否发生改变...., nValue.age)}}},// 设置方法methods: {play(id) {this.music_id id;},addAge() {this.user.age;}}})/script
/body/html
在本案例中监听一个对象中的一个属性值的变化中用到了两个常用的修饰符
1.deep:当你想要深度监听对象内部属性的变化时可以使用 deep 修饰符 。默认情况下watch 只会监听对象的引用变化而不会递归监听对象内部属性的变化。
2.immediate:当你想要在声明监听时立即执行一次监听函数时可以使用 immediate 修饰符
五、属性过滤
通过在vue实例的filter对象 中自定义方法来返回一个过滤正则可以在模板中使用属性过滤器来动态地对数据进行处理然后将处理后的数据显示在视图中。Vue 中的属性过滤器通过在模板中使用管道符 | 来实现语法格式为 {{ expression | filterName }}。
!DOCTYPE html
html langzh-cn
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlelink relstylesheet href./libs/bootstrap/css/bootstrap.css
/head
bodydiv idappdiv classcontainer mt-3h3{{str}}/h3h3{{str | xxx }}/h3h3{{str | yyy }}/h3h3{{str | xxx | zzz }}/h3/div/divscript src./libs/vue2.7.16/vue.js/scriptscript//禁止控制台输出日志信息Vue.config.productionTip false;new Vue({//挂载容器el: #app,data: {str: abc123efg456},// 过滤器// 就是可以作为工具函数来使用哦~~~// 通过 “|” 填写过滤器让其执行相关的回调函数在函数作用域中可以把处理结果返回filters: {// 编写xxx回调函数xxx(value){// console.log(this);// window// 去掉所有数字字符return value.replace(/\d/g,);},yyy(value){// console.log(this);// window// 去掉所有字母字符return value.replace(/[a-z]/ig,);},zzz(value){// 把字母转大写return value.toUpperCase();}}})/script
/body
/html
