a034ea61da2eb5427089e0306715cc96.png

你不知道的vue——vue不常用的知识点的整理

  1. v-cloak: 使用 v-cloak 指令可以有效解决屏幕闪动。
    有时候,页面没渲染之前就会出现vue代码块,例如下图。使用v-cloak可以很好解决这种问题。

56b21752f927643b9b1b9cf69517e777.png

8bf18c463eaf42485be39d5bec7247cd.png
  1. keep-alive
    官网是这么解释的:

74d7c2467849764212ecb3fff1f359d8.png

例如:可以实现页面缓存,比如从编辑页切出去再切进来,页面还是处于编辑状态.

1. 需要在router.js中设置meta属性,meta下的keepAlive属性设置为true,代表这个页面需要进行缓存。

5a6727e045042ba6dd428f0b9183a956.png

2. 在app.vue中修改一下代码<router-view />

2397f67f1884f1e3c982efb12f6cb621.png

3.在详情页detail.vue中,注意beforeRouteEnterbeforeRouteLeave两个方法。

8c09f57919951b6348d37b39f3ffe99f.png

3. 插槽slot解构插槽 Prop:可以传递子组件的变量

0851c2a27e8c8471645ed734abde757d.png

效果:// i am a child two default

4. 强制刷新某个div

vue实现F5刷新整个页面无空白无间隔时间

5. 修饰符

事件修饰符:

  1. .stop:相当于原生JS中event.stopPropagation(),阻止事件冒泡。

2. .prevent:相当于原生JS中event.preventDefault(),阻止默认事件的发生。

3. .capture:事件冒泡的方向相反,事件捕获由外到内。即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行。

4. .self:只会触发自己范围内的事件,不包含子元素。

b4aad6001848e94bb7edc3de454d1d41.gif

5. .once:事件只能触发一次。

6. .passive:事件会执行默认方法。
注:

每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作。
passive和prevent冲突,不能同时绑定在一个监听器上

按键修饰符: 去官网查看即可,这里不过多解释。Vue.js-修饰符

6. :is: 动态组件

优点:使代码更符合HTML语法验证

官网是这么解释的

43d1b73192f09b770c3cda1081ea3079.png

d09035e34a2a37d5d813267d007eaab2.png

7. @click.native: 在封装好的组件上使用,要加上.native才能click。

router-link 加上@click事件,绑定的事件会无效因为:router-link的作用是单纯的路由跳转,会阻止click事件,你可以试试只用click不用native,事件是不会触发的。此时加上.native,才会触发事件。
根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。

35dfc61b401d42ec83299940e15ac547.png

————————————————

版权声明:本文为CSDN博主「小城听风雨」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:

你不知道的vue--vue不常用的知识点的整理_a5252145的博客-CSDN博客​blog.csdn.net
65db8262a7df2c124ef1f823f11d6e86.png
Logo

前往低代码交流专区

更多推荐