<template> <div class="hello"> <span v-cloak>{{ content }}</span> </div></template><script>export default { name: "hello", data() { return { content: "測試" }; }};</script><style scoped>/* v-cloak這個屬性會在頁面渲染前作用於對應dom 在渲染完畢這個裡面的樣式將被移除 */[v-cloak] { display: none;}</style> 

2.keep-alive官網是這麼解釋的:

例如：可以實現頁面快取，比如從編輯頁切出去再切進來，頁面還是處於編輯狀態.

需要在router.js中設定meta屬性，meta下的keepAlive屬性設定為true，代表這個頁面需要進行快取。

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import is from '@/view/is'import list from '@/view/list'import detail from '@/view/detail'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, meta: { keepAlive: false, title: 'HelloWorld' } }, { path: '/is', name: 'is', component: is, meta: { keepAlive: false, title: 'is' } }, { path: '/list', name: 'list', component: list, meta: { keepAlive: true, title: 'list' } }, { path: '/detail', name: 'detail', component: detail, meta: { keepAlive: true, title: 'detail' } } ]})

2.在app.vue中修改一下程式碼<router-view />

// 子元件<template> <div class="isComponent"> <slot name='one' :childStr='childStr'></slot> <slot name='two'></slot> <slot></slot> </div></template><script>export default { name: "isComponent", data() { return { childStr: 'i am a child', }; }};</script><style scoped></style>// 父元件<is-component> <template #one="{childStr}">{{childStr}}</template> <template v-slot:two> two </template> <template> default </template></is-component>

效果：// i am a child two default強制重新整理某個divvue實現F5重新整理整個頁面無空白無間隔時間修飾符事件修飾符：

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語法驗證

官網是這麼解釋的：

// 父元件：<template> <div class="is"> <table> <tr :is='is'></tr> </table> </div></template><script>import isComponent from '../components/isComponent'export default { name: "is", components: { isComponent }, data() { return { is: 'isComponent' }; }};</script><style scoped></style>// 子元件：<template> <div class="isComponent"> <span>我是tr</span> </div></template><script>export default { name: "isComponent", data() { return {}; }};</script><style scoped></style>

[email protected]: 在封裝好的元件上使用，要加上.native才能click。

1router-link 加上@click事件，繫結的事件會無效因為：router-link的作用是單純的路由跳轉，會阻止click事件，你可以試試只用click不用native,事件是不會觸發的。此時加上.native，才會觸發事件。

2根據Vue2.0官方文件關於父子元件通訊的原則，父元件通過prop傳遞資料給子元件，子元件觸發事件給父元件。但父元件想在子元件上監聽自己的click的話，需要加上native修飾符。

// router-link <router-link :to="{name:'detail'}" @click.native="handleNative"> <Button size="small" type="primary">測試native</Button></router-link>// 自己封裝的元件<is-component @click.native="handleNative"></is-component>