![a034ea61da2eb5427089e0306715cc96.png](https://i-blog.csdnimg.cn/blog_migrate/317aa59d7df022fa31baf827289bb8b9.jpeg)
你不知道的vue——vue不常用的知识点的整理
v-cloak
: 使用 v-cloak 指令可以有效解决屏幕闪动。
有时候,页面没渲染之前就会出现vue代码块,例如下图。使用v-cloak可以很好解决这种问题。
![56b21752f927643b9b1b9cf69517e777.png](https://i-blog.csdnimg.cn/blog_migrate/1a1bc59a695952aebae63c1b0643fa9a.jpeg)
![8bf18c463eaf42485be39d5bec7247cd.png](https://i-blog.csdnimg.cn/blog_migrate/86b35fdbf04498b428b3cc7db6dec546.jpeg)
keep-alive
官网是这么解释的:
![74d7c2467849764212ecb3fff1f359d8.png](https://i-blog.csdnimg.cn/blog_migrate/7a8c5ee5af71f86ebeccdd3f3aa8b2b1.jpeg)
例如:可以实现页面缓存,比如从编辑页切出去再切进来,页面还是处于编辑状态.
1. 需要在router.js
中设置meta
属性,meta
下的keepAlive
属性设置为true,代表这个页面需要进行缓存。
![5a6727e045042ba6dd428f0b9183a956.png](https://i-blog.csdnimg.cn/blog_migrate/69af871b9adbb632809e6d4cc9aca8ed.jpeg)
2. 在app.vue
中修改一下代码<router-view />
![2397f67f1884f1e3c982efb12f6cb621.png](https://i-blog.csdnimg.cn/blog_migrate/081797ded46fb7a4e305a3d7674a8eaf.jpeg)
3.在详情页detail.vue
中,注意beforeRouteEnter
和beforeRouteLeave
两个方法。
![8c09f57919951b6348d37b39f3ffe99f.png](https://i-blog.csdnimg.cn/blog_migrate/21fff5dda4d530ab89088f75404beb01.jpeg)
3. 插槽slot
解构插槽 Prop:可以传递子组件的变量
![0851c2a27e8c8471645ed734abde757d.png](https://i-blog.csdnimg.cn/blog_migrate/4f5c2bfb272db1e1b9107e2edb9f8776.jpeg)
效果:// i am a child two default
4. 强制刷新某个div
vue实现F5刷新整个页面无空白无间隔时间
5. 修饰符
事件修饰符:
.stop
:相当于原生JS中event.stopPropagation()
,阻止事件冒泡。
2. .prevent
:相当于原生JS中event.preventDefault()
,阻止默认事件的发生。
3. .capture
:事件冒泡的方向相反,事件捕获由外到内。即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行。
4. .self
:只会触发自己范围内的事件,不包含子元素。
![b4aad6001848e94bb7edc3de454d1d41.gif](https://i-blog.csdnimg.cn/blog_migrate/aef8e825892c55a0f9fda3be5b8c7427.gif)
5. .once
:事件只能触发一次。
6. .passive
:事件会执行默认方法。
注:
每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作。
passive和prevent冲突,不能同时绑定在一个监听器上
按键修饰符: 去官网查看即可,这里不过多解释。Vue.js-修饰符
6. :is
: 动态组件
优点:使代码更符合HTML语法验证
官网是这么解释的:
![43d1b73192f09b770c3cda1081ea3079.png](https://i-blog.csdnimg.cn/blog_migrate/783d79cf14c419ec57ff1eff4386b447.jpeg)
![d09035e34a2a37d5d813267d007eaab2.png](https://i-blog.csdnimg.cn/blog_migrate/2bc1ade74eaa4068a14509a721df2d49.jpeg)
7. @click.native
: 在封装好的组件上使用,要加上.native才能click。
router-link 加上@click事件,绑定的事件会无效因为:router-link的作用是单纯的路由跳转,会阻止click事件,你可以试试只用click不用native,事件是不会触发的。此时加上.native,才会触发事件。
根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。
![35dfc61b401d42ec83299940e15ac547.png](https://i-blog.csdnimg.cn/blog_migrate/7cf835d14661ffc113cb12ec8049fece.jpeg)
————————————————
版权声明:本文为CSDN博主「小城听风雨」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
你不知道的vue--vue不常用的知识点的整理_a5252145的博客-CSDN博客blog.csdn.net![65db8262a7df2c124ef1f823f11d6e86.png](https://i-blog.csdnimg.cn/blog_migrate/7b76bb39431bfd2b0efe61c41d6fbb47.png)