<span v-pre>{{ this will not be compiled }}</span> 显示的是{{ this will not be compiled }} <span v-pre>{{msg}}</span> 即使data里面定义了msg这里仍然是显示的{{msg}}
26.v-cloak
场景:在网速慢的情况下,在使用vue绑定数据的时候，渲染页面时会出现变量闪烁
用法:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
// template 中 <div v-cloak> <p>{{value.name}}</p> </div> // css 中 [v-cloak] { display: none; }
这样就可以解决闪烁,但是会出现白屏,这样可以结合骨架屏使用
27.v-once
场景:有些 template 中的静态 dom 没有改变,这时就只需要渲染一次,可以降低性能开销
<span v-once> 这时只需要加载一次的标签</span>
v-once 和 v-pre 的区别:
v-once只渲染一次；v-pre不编译,原样输出
28.事件修饰符
.stop:阻止冒泡
.prevent:阻止默认行为
.self:仅绑定元素自身触发
.once: 2.1.4 新增,只触发一次
.passive: 2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用
29.按键修饰符和按键码
场景:有的时候需要监听键盘的行为,如按下 enter 去查询接口等
// 对应键盘上的关键字
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
30.Vue-router
场景:Vue-router 是官方提供的路由插件
30.1 缓存和动画
路由是使用官方组件 vue-router,使用方法相信大家非常熟悉;
这里我就叙述下路由的缓存和动画;
<transition> <keep-alive v-if="aliveFlag"> //因为有些页面,如试试数据统计,要实时刷新,所以就不需要缓存 <router-view/> //路由标签 </keep-alive> <router-view v-else/> </transition>
30.2 全局路由钩子
1.router.beforeEach
router.beforeEach((to, from, next) => { console.log('全局前置守卫：beforeEach -- next需要调用') //一般登录拦截用这个,也叫导航钩子守卫 if (path === '/login') { next() return } if (token) { next(); } })
2.router.beforeResolve (v 2.5.0+)
和beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
即在 beforeEach之后调用
3.router.afterEach
全局后置钩子
在所有路由跳转结束的时候调用
这些钩子不会接受 next 函数也不会改变导航本身
30.3 组件路由钩子
1.beforeRouteEnter
在渲染该组件的对应路由被确认前调用，用法和参数与router.beforeEach类似，next需要被主动调用
此时组件实例还未被创建，不能访问this
可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
beforeRouteEnter (to, from, next) { // 这里还无法访问到组件实例，this === undefined next( vm => { // 通过 `vm` 访问组件实例 }) }
2.beforeRouteUpdate (v 2.2+)
在当前路由改变，并且该组件被复用时调用，可以通过this访问实例， next需要被主动调用，不能传回调
3.beforeRouteLeave
导航离开该组件的对应路由时调用，可以访问组件实例 this，next需要被主动调用，不能传回调
30.4 路由模式
设置 mode 属性:hash或 history
30.5 Vue.$router
this.$router.push():跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面 this.$router.replace():不会有记录 this.$router.go(n):n可为正数可为负数。正数返回上一个页面,类似 window.history.go(n)
30.6 Vue.$route
表示当前跳转的路由对象,属性有:
name:路由名称
path:路径
query:传参接收值
params:传参接收值
fullPath:完成解析后的 URL，包含查询参数和 hash 的完整路径
matched:路由记录副本
redirectedFrom:如果存在重定向，即为重定向来源的路由的名字
this.$route.params.id:获取通过 params 或/:id传参的参数 this.$route.query.id:获取通过 query 传参的参数
30.7 router-view 的 key
场景:由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子
<router-view :key="$route.fullpath"></router-view>
这样组件的 created 和 mounted 就都会执行
31.Object.freeze