vue @click 绑定多个方法 执行顺序_你不知道的vue——vue不常用的知识点的整理
你不知道的vue——vue不常用的知识点的整理v-cloak: 使用 v-cloak 指令可以有效解决屏幕闪动。有时候,页面没渲染之前就会出现vue代码块,例如下图。使用v-cloak可以很好解决这种问题。keep-alive官网是这么解释的:例如:可以实现页面缓存,比如从编辑页切出去再切进来,页面还是处于编辑状态.1. 需要在router.js中设置meta属性,meta下的keepAlive属
你不知道的vue——vue不常用的知识点的整理
v-cloak
: 使用 v-cloak 指令可以有效解决屏幕闪动。
有时候,页面没渲染之前就会出现vue代码块,例如下图。使用v-cloak可以很好解决这种问题。
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. 修饰符
事件修饰符:
.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更多推荐
所有评论(0)