:is
// my-ul,my-tab为组件名
<button @click="flag='my-ul'"></button>
<button @click="flag='my-tab'"></button>
<component :is="flag"></component>
keep-alive
- 处理对应的缓存
- 第一次进入会进入生命周期，再次进去不会进入生命周期。
属性
- include 只有匹配的组件才会缓存。可以使用正则匹配
<button @click="flag='my-ul'"></button>
<button @click="flag='my-tab'"></button>
<keep-alive include="my-ul">
<component :is="flag"></component>
</keep-alive>
- exclude 除了匹配的组件外，其他的都缓存
路由缓存
router/index.js
...
...
export default new Router({
linkActiveClass: 'active',
routes: [
{
path: '/',
redirce: '/home'
},
{
path: 'home',
component: () => import('@/components/module/Home'),
meta: {
keepAlive: true //需要缓存
}
}，
{
path: 'news',
component: () => import('@/components/module/News'),
meta: {
keepAlive: false //不需要缓存
}
}
]
})
app.vue
...
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
...
filter过滤器
过滤器允许使用的地方： 1： {{}} 2: v-bind
文本格式化处理（管道）
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
