vue @click 绑定多个方法 执行顺序_你不知道的vue——vue不常用的知识点的整理

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

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

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

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

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

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

3.在详情页detail.vue中，注意beforeRouteEnter和beforeRouteLeave两个方法。

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

效果：// 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：只会触发自己范围内的事件，不包含子元素。

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

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

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

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

6. :is: 动态组件

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

官网是这么解释的：

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

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

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

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

原文链接：

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