“name”: “modifiersCapture”,
“component”: {
“name”: “capture”,
“methods”: {},
“staticRenderFns”: [],
“_compiled”: true,
“_scopeId”: “data-v-63b4eeee”,
“beforeCreate”: [
null
],
“beforeDestroy”: [
null
],
“__file”: “src/views/modifiers/capture.vue”
}
},
… // 其他路由配置
]
3. require.context实现动态注册路由
借助webpack require.context 的能力,可以非常方便地实现上面目录到路由配置的映射工作,源码如下
const registerRoutes = () => {
const contextInfo = require.context(‘./views’, true, /.vue$/)
const routes = contextInfo.keys().map((filePath) => {
// filePath 形如 ./Home.vue、./modifiers/capture.vue
// path我们希望是/home、/modifiers/capture
// 所以需要把开头的./和.vue都替换为空
const path = filePath.toLowerCase().replace(/^.|.vue/g, ‘’)
// name的话将/home、/modifiers/capture转成小驼峰即可
// 把开头的/先替换掉,再把第一个/后的单词变成大写就可以了
const name = path.replace(/^//, ‘’).replace(//(\w)/, ($0, $1) => $1.toUpperCase())
// 通过require去读取.vue文件内容
const component = require(./views${filePath.replace(/^\./, '')}
).default
return {
path,
name,
component
}
})
return routes
}
效果
经过上面的简单处理,动态注册路由就完成啦!您也可以点击vue-demos查看效果
事件修饰符
=====
1. 阻止冒泡的两种方式
我是爸爸
我是儿子
export default {
name: ‘stop’,
methods: {
onClickParent () {
console.log(‘我是爸爸’)
},
onClickChild () {
console.log(‘我是儿子’)
}
}
}
点击子节点的时候因为事件冒泡的缘故不仅会打印出我是儿子
还会打印我是爸爸
。有什么办法可以阻止子节点的事件冒泡呢?
stop2.gif
1 .stop
只要加.stop修饰符即可,阻止事件冒泡的及简方式,很方便是不是。
当添加上.stop
修饰符时,只会出现我是儿子
我是爸爸
我是儿子
stop.gif
2. event.stopPropagation
当然了,我们也可以通过调用
event.stopPropagation
来阻止冒泡。不过更加推荐修饰符的做法,这样你的函数会更加专注在逻辑处理上,而不用关心DOM事件细节
export default {
name: ‘stop’,
methods: {
onClickChild (event) {
console.log(‘我是儿子’)
event.stopPropagation()
}
}
}
stop.gif
2. 阻止默认事件的两种方式
vue中阻止冒泡有两种方式,那阻止默认事件呢?
1 .prevent
<a href=“https://juejin.cn/” @click=“onNoPrevent”>点击跳转掘金
<a href=“https://juejin.cn/” @click.prevent=“onPrevent”>阻止默认事件,无法跳转掘金
export default {
name: ‘prevent’,
methods: {
onNoPrevent () {
console.log(‘未阻止默认事件’)
},
onPrevent () {
console.log(‘阻止默认事件’)
}
}
}
只要添加.prevent
轻松实现阻止默认事件
prevent.gif
2.event.preventDefault()
和阻止冒泡一样,我们也可以通过调用事件对象的
preventDefault
方法来阻止默认事件
export default {
name: ‘prevent’,
methods: {
onPrevent (event) {
console.log(‘阻止默认事件’)
event.preventDefault()
}
}
}
3 .capture
默认情况下,事件流是以
冒泡
(由里向外)的形式传递的,如果想以捕获(由外向里)
的形式应该怎么办呢?
父节点
export default {
name: ‘capture’,
methods: {
onClickParent () {
console.log(‘我是父节点’)
},
onClickChild () {
console.log(‘我是子节点’)
}
}
}
不加catpture
修饰符,点击子节点会陆续打印我是父节点以及我是子节点,加了之后,则是反过来了
capture.gif
4 .self
只有当
event.target
是当前元素自身时才会触发事件回调函数
export default {
name: ‘self’,
methods: {
onClickSelf () {
console.log(‘我是self节点’)
},
onClickInner () {
console.log(‘我是inner节点’)
}
}
}
不加self
修饰符的话,点击inner
节点也会触发self
的事件,加了之后只有触发事件的元素本身是self
,才会打印出我是self节点
self.gif
暂停一下:修饰符的顺序如何理解?
已经回顾了4个修饰符,单独使用的时候很容易理解,但是注意官网有这么一句话
image.png
怎么理解呢?我们来看两个栗子
<a href=“https://juejin.cn/” class=“order-parent” @click.self.prevent=“onClickParent”>
我是父节点,会跳转掘金
<span class=“order-child” @click=“onClickChild”>
我是子节点
<a href=“https://juejin.cn/” class=“order-parent” @click.prevent.self=“onClickParent”>
我是父节点,无法跳转掘金
<span class=“order-child” @click=“onClickChild”>
我是子节点
export default {
name: ‘order’,
methods: {
onClickParent () {
console.log(‘我是父节点’)
},
onClickChild () {
console.log(‘我是子节点’)
}
}
}
您可以猜一下,上面的代码会发生什么,以下三点是可以明确的?
-
首先可以明确的是点击上面和下面的子节点都不会触发父节点的点击事件
-
点击下面的父节点会打印出我是父节点,但是不会跳转掘金
-
点击上面的父节点会打印出我是父节点,也不会跳转掘金
但是点击上面的子节点,父节点会不会跳转至掘金呢?答案是会
为什么?
a@click.self.prevent="onClickParent"
的意思是当点击的元素是a元素本身时,会阻止默认事件(可以解释3,不会发生跳转),并且执行onClickParent
回调。
而点击span元素时,由于冒泡的缘故,点击事件会传递给a,但是此时a会判断出该事件不是由自身触发的也就不会阻止默认事件
(此时也就发生跳转了),当然也不会触发onClickParent
回调
同理来我们分析一下a@click.prevent.self="onClickParent"
不管是子节点还是自身点击,都是先阻止默认事件,只有当触发点击事件是a元素本身时才会执行onClickParent
回调函数。
order.gif
回过头看,你理解事件的顺序含义了吗?
image.png
5. once
顾名思义,事件只会触发一次
只触发一次
export default {
name: ‘once’,
methods: {
onClickOnce () {
console.log(‘once,我只会触发一次点击事件回调’)
}
}
}
触发一次点击之后,任我再怎么点,回调怎也不会触发了。
once.gif
6 .native
我们知道在自定义组件上,只能监听自定义事件,一些原生事件(比如click)是没有办法直接触发的,但是使用
.native
修饰符可以帮我们办到这点
native.vue
<input type=“text” @keydown=“onKeydown”>
export default {
name: ‘nativeCustom’,
methods: {
onKeydown () {
this.$emit(‘onKeydown’)
}
}
}
custom.vue
<NativeCustom @onKeydown=“onKeydown” @click.native=“onClick” />
import NativeCustom from ‘…/…/components/native.vue’
export default {
name: ‘native’,
components: {
NativeCustom
},
methods: {
onKeydown () {
console.log(‘onKeydown’)
},
onClick () {
console.log(‘onClick’)
}
}
}
native.gif
7 .passive
vue对应
addEventListener
中的passive
选项提供了.passive
修饰符
这个修饰符对于滚动性能的提升,一直没找到合适的例子,跪求广大掘友有例子啊
这个修饰符对于滚动性能的提升,一直没找到合适的例子,跪求广大掘友有例子啊
这个修饰符对于滚动性能的提升,一直没找到合适的例子,跪求广大掘友有例子啊
v-bind修饰符
=========
8 .sync
当我们想要在
父组件
和子组件
之间对某个属性值进行双向绑定时,有什么便捷的方式?是的只要.sync
修饰符即可办到
父组件
我是父组件: {{ text }}
import Child from ‘./child.vue’
export default {
name: ‘SyncParent’,
data () {
return {
text: ‘parent’
}
},
components: {
Child,
}
}
子组件
我是子组件:
<input type=“text” v-model=“value” @input=“onInput”>
export default {
name: ‘child’,
props: {
text: {
type: String
}
},
data () {
return {
value: this.text
}
},
methods: {
onInput () {
// 注意这里,必须是update:xxx的形式xxx即属性prop
this.$emit(‘update:text’, this.value)
}
}
}
sync.gif
9 .camel
.camel
修饰符允许在使用 DOM 模板时将v-bind
property 名称驼峰化,例如 SVG 的viewBox
property:
10 .prop
关于.prop修饰符官网只有这句话
.prop
作为一个 DOM property 绑定而不是作为 attribute 绑定。`。
有啥作用?
-
通过自定义属性存储变量,避免暴露数据
-
防止污染 HTML 结构
比如有以下代码
// 最终变成了
// 最终变成了
<button @click=“onGetResult”>获取结果
export default {
name: ‘prop’,
data () {
return {
prop: ‘hello prop’,
prop2: ‘hello prop2’
}
},
methods: {
onGetResult () {
const r e f P r o p = t h i s . refProp = this. refProp = this.refs.prop
const r e f P r o p 2 = t h i s . refProp2 = this. refProp2 = this.refs.prop2
console.log($refProp.getAttribute(‘my-name’)) // hello prop
console.log($refProp2.getAttribute(‘my-name’)) // null
}
}
}
从示例上可以看出未使用.prop
修饰符的my-name
属性会绑定到dom节点的attribute,从而出现暴露的情况。
prop.gif
鼠标修饰符
=====
当咱们想监听用户点击了
左键
、右键
或者中键
时也有修饰符可以快捷使用,分别是.left
、.right
、middle
,来看个例子试试
根据MDN MouseEvent.button,介绍。
image.png
在最外层div.mouse
监听mousedown
事件,看下用户点击的是鼠标哪个键,三个button
分别用三个修饰符快捷方式监听左键
、中键
、右键
并打印出left
、middle
、right
<button @click.left=“onClickBtn(‘left’)”>left
<button @click.middle=“onClickBtn(‘middle’)”>middle
<button @click.right=“onClickBtn(‘right’)”>right
export default {
name: ‘mouse’,
mounted () {
},
methods: {
onClickBtn (msg) {
console.log(msg)
},
onMousedown (event) {
const mosueMsgMap = {
0: ‘鼠标左键’,
1: ‘鼠标中键’,
2: ‘鼠标右键’
}
console.log(‘点击了’, mosueMsgMap[event.button])
}
}
}
没有带鼠标回来,中键点击暂时不能演示,后续会补上
mouse.gif
11 .left
同上例子,监听鼠标左键点击
12 .right
同上例子,监听鼠标右键点击
13 .middle
同上例子,监听鼠标中键点击
表单相关修饰符
=======
14 .trim
对于输入的内容,希望可以
过滤首尾空格
应该怎么做呢?
用户名:{{ name }}
用户名2:{{ name2 }}
export default {
name: ‘trim’,
data () {
return {
name: ‘’,
name2: ‘’,
}
},
watch: {
name (newVal) {
console.log('----${newVal}----'
)
},
name2 (newVal) {
console.log('----${newVal}----'
)
},
}
}
.trim修饰符可以很方便做到
trim.gif
15 .lazy
v-model
大家都很熟悉,默认情况下,每次input事件
触发的时候都会将输入框的值与其绑定的数据进行实时同步。但是如果想要实现光标离开的时候再更新数据如何实现呢?
思路1: 绑定change事件,在事件回调中手动获取target的值
思路2: 直接使用.lazy
修饰符即可达到效果
无.lazy: {{ text }}
.lazy: {{ text2 }}
export default {
name: ‘lazy’,
data () {
return {
text: ‘’,
text2: ‘’
}
}
}
可以看到添加了.lazy修饰符之后,第二个输入框输入的值不会实时反应在下面,而是光标离开实,text2
的数据才更新了
lazy.gif
16 .number
我们知道
input
输入框的type
哪怕是number
得到的值的类型也是string
,如果我们想直接拿到number
类型的数据,有不想麻烦的手动转换应该怎么办呢?
无.number
type:text .number
type:number .number
export default {
name: ‘lazy’,
data () {
return {
number: 0,
number1: ‘’,
number2: ‘’,
}
},
watch: {
number (newVal) {
console.log(typeof newVal, newVal)
},
number1 (newVal) {
console.log(typeof newVal, newVal)
},
number2 (newVal) {
console.log(typeof newVal, newVal)
},
}
}
-
第一个输入框的类型是number,但是得到的值是string
-
第二个输入框的类型是text,但是添加了number修饰符,得到的值可以是number(如果这个值无法被
parseFloat()
解析,则会返回原始的值。) -
第三个输入框的类型是number,最后得到的值也是number
number.gif
系统修饰符
=====
当点击事件或者键盘事件需要系统键同时按下才触发时
.ctrl
、.alt
、.shift
、.meta
可以帮大忙噢!
如下代码
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
type:number .number
export default {
name: ‘lazy’,
data () {
return {
number: 0,
number1: ‘’,
number2: ‘’,
}
},
watch: {
number (newVal) {
console.log(typeof newVal, newVal)
},
number1 (newVal) {
console.log(typeof newVal, newVal)
},
number2 (newVal) {
console.log(typeof newVal, newVal)
},
}
}
-
第一个输入框的类型是number,但是得到的值是string
-
第二个输入框的类型是text,但是添加了number修饰符,得到的值可以是number(如果这个值无法被
parseFloat()
解析,则会返回原始的值。) -
第三个输入框的类型是number,最后得到的值也是number
number.gif
系统修饰符
=====
当点击事件或者键盘事件需要系统键同时按下才触发时
.ctrl
、.alt
、.shift
、.meta
可以帮大忙噢!
如下代码
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-CNDXY3S8-1715652397093)]
[外链图片转存中…(img-0hgncl67-1715652397093)]
[外链图片转存中…(img-1b0FfJF4-1715652397094)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!