作者：小城聽風(fēng)雨

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

v-cloak

使用 v-cloak 指令可以有效解決屏幕閃動(dòng)。

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

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

keep-alive

官網(wǎng)是這么解釋的:

例如：可以實(shí)現(xiàn)頁面緩存，比如從編輯頁切出去再切進(jìn)來，頁面還是處于編輯狀態(tài)。

需要在router.js中設(shè)置meta屬性，meta下的keepAlive屬性設(shè)置為true，代表這個(gè)頁面需要進(jìn)行緩存。

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兩個(gè)方法。

<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">跳轉(zhuǎn)到列表頁Button>???????????????????????????????router-link>???????????????????????????????<router-link?:to="{name:'is'}">??????????????????????????????????? <Button?size="small"?type="primary">跳轉(zhuǎn)到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();????????????????}????????},????????//?路由進(jìn)來之前，判斷是從哪個(gè)頁面過來的，設(shè)置不同的keepAlive屬性????????beforeRouteEnter(to,?from,?next)?{???????????? if?(from.name?===?"list")?{???????????????? to.meta.keepAlive?=?true;????????????????}?else?{???????????????????? to.meta.keepAlive?=?false;????????????????}????????????????next();????????????????//?beforeRouteEnter不能通過this訪問組件實(shí)例，但是可以通過?vm?訪問組件實(shí)例(剛開始錯(cuò)誤寫法)????????????????//?next(vm?=>?{????????????????//?????if?(from.name?===?"list")?{????????????????//?????????//?在這里修改keepAlive值，是不能緩存數(shù)據(jù)的，因?yàn)樵趎ext()里面的代碼，是在vue掛載之后執(zhí)行，處于activated之后，此時(shí)activated中keepAlive還是false????????????????//?????????vm.$route.meta.keepAlive?=?true;????????????????//?????}?else?{????????????????//?????????vm.$route.meta.keepAlive?=?false;????????????????//?????}????????????????//?});????????},????????//?路由離開之前，判斷去往哪個(gè)頁面，設(shè)置不同的keepAlive屬性????????beforeRouteLeave(to,?from,?next)?{???????????? if?(to.name?===?"list")?{???????????????? this.$route.meta.keepAlive?=?true;????????????????}?else?{???????????????????? this.$route.meta.keepAlive?=?false;????????????????}????????????????next();????????},????????activated()?{???????????? //?此方法在頁面緩存時(shí)會(huì)被調(diào)用(this.$route.meta.keepAlive為true時(shí))，根據(jù)路由元信息決定是否重新加載數(shù)據(jù)。不加載則是上次填寫完的數(shù)據(jù)???????????? //?console.log(this.$route.meta.keepAlive);????????}};script><style scoped>.detail { position: relative; height: 100%; width: 100%;}style>

插槽slot

解構(gòu)插槽 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

強(qiáng)制刷新某個(gè)div

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

修飾符

事件修飾符：

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

• .prevent：相當(dāng)于原生JS中event.preventDefault()，阻止默認(rèn)事件的發(fā)生。

• .capture：事件冒泡的方向相反，事件捕獲由外到內(nèi)。即有冒泡發(fā)生時(shí)，有該修飾符的dom元素會(huì)先執(zhí)行，如果有多個(gè)，從外到內(nèi)依次執(zhí)行。

• .self：只會(huì)觸發(fā)自己范圍內(nèi)的事件，不包含子元素。

• .once：事件只能觸發(fā)一次。

• .passive：事件會(huì)執(zhí)行默認(rèn)方法。

注：

每次事件產(chǎn)生，瀏覽器都會(huì)去查詢一下是否有preventDefault阻止該次事件的默認(rèn)動(dòng)作。

我們加上passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認(rèn)動(dòng)作。

passive和prevent沖突，不能同時(shí)綁定在一個(gè)監(jiān)聽器上

:is: 動(dòng)態(tài)組件

優(yōu)點(diǎn)：使代碼更符合HTML語法驗(yàn)證

官網(wǎng)是這么解釋的：

// 父組件：<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事件，綁定的事件會(huì)無效因?yàn)?#xff1a;

router-link的作用是單純的路由跳轉(zhuǎn)，會(huì)阻止click事件，你可以試試只用click不用native,事件是不會(huì)觸發(fā)的。

此時(shí)加上.native，才會(huì)觸發(fā)事件.

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

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

更多前端分享，請(qǐng)關(guān)注：

前端路人甲

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。