1、vue中修饰符的使用
1.1、' on'修饰符
<div @click="click('click parent')">
parent
<div @click="click('click child')">
child
<div @click="click('click son')">
son
</div>
</div>
</div>
//点击 son 触发顺序 son --- child ---- parent
//vue默认事件冒泡。
1.2、'. stop'修饰符
阻止事件向上传递。
适用场景：不想触发上级事件。
//如想在点击 son 的时候 不想触发 child parent 的事件。
<div @click="click('click parent')">
parent
<div @click="click('click child')">
child
<div @click.stop="click('click son')">
son
</div>
</div>
</div>
on: {
click: function($event) {
// 阻止事件冒泡
$event.stopPropagation()
return _vm.click("click son")
}
}
1.3、'.prevent'修饰符
阻止一些DOM自带的功能事件
如：a跳转，button 提交 等...
<div>
<a href="www.baidu.com" target="_blank" @click.prevent>百度一下就入坑</a>
</div>
on: {
click: function($event) {
$event.preventDefault()
}
}
1.4、'.stop'修饰符
事件捕获，被绑定的父级事件，如果子触发了，必定先调用父级。
.stop也无法阻止。
<div @click.capture="click('click parent')">
parent
<div @click="click('click child')">
child
<div @click.stop="click('click son')">
son
</div>
</div>
</div>
// 点击son 顺序 parent --- son
1.5、'.self'修饰符
事件触发首先判断是否自身。
<div @click.self="click('click self parent')">
parent
<div @click="click('click child')">
child
<div @click="click('click son')">
son
</div>
</div>
// 点击 parent 才会触发 事件
on: {
click: function($event) {
// 里面做了是否自身的比较
if ($event.target !== $event.currentTarget) {
return null
}
return _vm.click("click self parent")
}
}
1.6、'. native'修饰符
官网的解释：在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲：native 一定是用于自定义组件，也就是自定义的html标签
<body>
<div id="app">
<div class="box" >
<Son @click='handler1'></Son>
</div>
</div>
</body>
<script> export default {
methods: {
handler1() {
// 不触发
}
}
}
</script>
<body>
<div id="app">
<div class="box" >
<Son @click.native='handler2'></Son>
</div>
</div>
</body>
<script> export default {
methods: {
handler2() {
// 触发
}
}
}
</script>
2、keep-alive的声明周期执行
- 页面第一次进入，钩子的触发顺序
created-> mounted-> activated，
退出时触发deactivated当再次进入（前进或者后退）时，只触发activated - 事件挂载的方法等，只执行一次的放在
mounted中；组件每次进去执行的方法放在activated中；
<!--被keepalive包含的组件会被缓存-->
<keep-alive>
<component><component />
</keep-alive>
参数理解
keepalive 可以接收3个属性做为参数进行匹配对应的组件进行缓存:
-
include包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存) -
exclude排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存) -
max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
注：当使用正则表达式或者数组时，一定要使用 v-bind
<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
<keep-alive exclude="c">
<component></component>
</keep-alive>
<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
<keep-alive include="a,b" exclude="b">
<component></component>
</keep-alive>
<!-- 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件 -->
<keep-alive exclude="c" max="5">
<component></component>
</keep-alive>
使用 meta 属性
优点：不需要例举出需要被缓存组件名称 使用$route.meta的keepAlive属性：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
3、router的使用规范
不要直接写path，万一路由路径改了，代码都得改，用name，便于维护
this.$router.push({
name: 'myUser',
params: {},
query: {}
})
作者：Oliver556
链接：juejin.cn/post/684490…
4、过滤器
const filters = this.$options.filters // js中使用
