作者：小城聽風雨

https://blog.csdn.net/a5252145/article/details/107316953

v-cloak

使用 v-cloak 指令可以有效解決屏幕閃動。

有時候，頁面沒渲染之前就會出現vue代碼塊，例如下圖。使用v-cloak可以很好解決這種問題。

<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>

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' } } ]})

在app.vue中修改一下代碼

<template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> keep-alive> <router-view v-if="!$route.meta.keepAlive" /> div>template><script>export default { name: "App"};script><style>#app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;????-moz-osx-font-smoothing:?grayscale;}style>

在詳情頁detail.vue中，注意beforeRouteEnter和beforeRouteLeave兩個方法。

<template> <div> <Form ref="formCustom" :model="formItem" :label-width="80"> <FormItem label="Input"> <Input v-model="formItem.input" placeholder="Enter something...">Input> ????????????FormItem>????????????????????????<FormItem?label="Select">???????????????????????????? <Select?v-model="formItem.select">???????????????????????????????? <Option?value="beijing">New?YorkOption>???????????????????????????????? <Option?value="shanghai">LondonOption>???????????????????????????????? <Option?value="shenzhen">SydneyOption>????????????????????????????????Select>????????????????????????FormItem>????????????????????????<FormItem?label="DatePicker">???????????????????????????? <Row>???????????????????????????????? <Col?span="11">???????????????????????????????????? <DatePicker?type="date"?placeholder="Select?date"?v-model="formItem.date">DatePicker>????????????????????????????????????????Col>????????????????????????????????????????<Col?span="2"?style="text-align:?center">-Col>????????????????????????????????????????<Col?span="11">???????????????????????????????????????????? <TimePicker?type="time"?placeholder="Select?time"?v-model="formItem.time">TimePicker>????????????????????????????????????????Col>????????????????????????????????Row>????????????????????????FormItem>????????????????????????<FormItem?label="Radio">???????????????????????????? <RadioGroup?v-model="formItem.radio">???????????????????????????????? <Radio?label="male">MaleRadio>???????????????????????????????????????<Radio?label="female">FemaleRadio>????????????????????????????????RadioGroup>????????????????????????FormItem>????????????????????????<FormItem?label="Checkbox">????????????????????????????<CheckboxGroup?v-model="formItem.checkbox">??????????????????????????????????? <Checkbox?label="Eat">Checkbox>?????????????????????????????????????? <Checkbox?label="Sleep">Checkbox>?????????????????????????????????????? <Checkbox?label="Run">Checkbox>?????????????????????????????????????? <Checkbox?label="Movie">Checkbox>???????????????????????????????CheckboxGroup>???????????????????????FormItem>???????????????????????<FormItem?label="Switch">???????????????????????????<i-switch?v-model="formItem.switch"?size="large">??????????????????????????????????? <span?slot="open">Onspan>??????????????????????????????????? <span?slot="close">Offspan>???????????????????????????????i-switch>???????????????????????FormItem>???????????????????????<FormItem?label="Slider">??????????????????????????? <Slider?v-model="formItem.slider"?range>Slider>???????????????????????FormItem>???????????????????????<FormItem?label="Text">???????????????????????????????<Input?v-model="formItem.textarea"?type="textarea"?:autosize="{minRows:?2,maxRows:?5}"?placeholder="Enter?something...">Input>???????????????????????FormItem>???????????????????????<FormItem>??????????????????????????? <Button?type="primary">SubmitButton>??????????????????????????? <Button?style="margin-left:?8px">CancelButton>???????????????????????FormItem>???????????????????????<FormItem>??????????????????????????? <router-link?:to="{name:'list'}">??????????????????????????????? <Button?size="small"?type="primary">跳轉到列表頁Button>???????????????????????????????router-link>???????????????????????????????<router-link?:to="{name:'is'}">??????????????????????????????????? <Button?size="small"?type="primary">跳轉到is頁Button>???????????????????????????????router-link>???????????????????????FormItem>???????????????Form>???????div>template><script>export default { name: "detail",????mixins:?[],????????components:?{},????????filters:?{},????????props:?[],????????computed:?{},????????data()?{???????????? return?{???????????????? formItem:?{???????????????????? input:?"",???????????????????? select:?"",???????????????????? radio:?"male",???????????????????? checkbox:?[],???????????????????? switch:?true,???????????????????? date:?"",???????????????????? time:?"",??????????????????????????????? slider:?[20,?50],???????????????????? textarea:?""???????????????????? }???????????? };???? },???? watch:?{},???? created()?{????},???? mounted()?{????},???? methods:?{???????? //?重置表單???????? init()?{???????????? this.$refs[formCustom].resetFields();????????????????}????????},????????//?路由進來之前，判斷是從哪個頁面過來的，設置不同的keepAlive屬性????????beforeRouteEnter(to,?from,?next)?{???????????? if?(from.name?===?"list")?{???????????????? to.meta.keepAlive?=?true;????????????????}?else?{???????????????????? to.meta.keepAlive?=?false;????????????????}????????????????next();????????????????//?beforeRouteEnter不能通過this訪問組件實例，但是可以通過?vm?訪問組件實例(剛開始錯誤寫法)????????????????//?next(vm?=>?{????????????????//?????if?(from.name?===?"list")?{????????????????//?????????//?在這里修改keepAlive值，是不能緩存數據的，因為在next()里面的代碼，是在vue掛載之后執行，處于activated之后，此時activated中keepAlive還是false????????????????//?????????vm.$route.meta.keepAlive?=?true;????????????????//?????}?else?{????????????????//?????????vm.$route.meta.keepAlive?=?false;????????????????//?????}????????????????//?});????????},????????//?路由離開之前，判斷去往哪個頁面，設置不同的keepAlive屬性????????beforeRouteLeave(to,?from,?next)?{???????????? if?(to.name?===?"list")?{???????????????? this.$route.meta.keepAlive?=?true;????????????????}?else?{???????????????????? this.$route.meta.keepAlive?=?false;????????????????}????????????????next();????????},????????activated()?{???????????? //?此方法在頁面緩存時會被調用(this.$route.meta.keepAlive為true時)，根據路由元信息決定是否重新加載數據。不加載則是上次填寫完的數據???????????? //?console.log(this.$route.meta.keepAlive);????????}};script><style scoped>.detail { position: relative; height: 100%; width: 100%;}style>

插槽slot

解構插槽 Prop：可以傳遞子組件的變量

// 子組件<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

強制刷新某個div

通過this.$router.go(0)刷新頁面，和F5一樣，會有空白頁時間，體驗不好。通過provide/inject即可改變這種效果。

修飾符

事件修飾符：

• .stop：相當于原生JS中event.stopPropagation()，阻止事件冒泡。

• .prevent：相當于原生JS中event.preventDefault()，阻止默認事件的發生。

• .capture：事件冒泡的方向相反，事件捕獲由外到內。即有冒泡發生時，有該修飾符的dom元素會先執行，如果有多個，從外到內依次執行。

• .self：只會觸發自己范圍內的事件，不包含子元素。

• .once：事件只能觸發一次。

• .passive：事件會執行默認方法。

注：

每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動作。

我們加上passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認動作。

passive和prevent沖突，不能同時綁定在一個監聽器上

: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>我是trspan> div>template><script>export default { name: "isComponent", data() { return {}; }};script><style scoped>style>

@click.native

在封裝好的組件上使用，要加上.native才能click。

router-link 加上@click事件，綁定的事件會無效因為：

router-link的作用是單純的路由跳轉，會阻止click事件，你可以試試只用click不用native,事件是不會觸發的。

此時加上.native，才會觸發事件.

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

// router-link "{name:'detail'}" "small" type=// 自己封裝的組件<is-component @click.native="handleNative">is-component>

更多前端分享，請關注：

前端路人甲

總結

以上是生活随笔為你收集整理的vue sleep_vue不常用的知识点的整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。