你不知道的vue——vue不常用的知識點(diǎn)的整理

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

   有時候，頁面沒渲染之前就會出現(xiàn)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這個屬性會在頁面渲染前作用于對應(yīng)dom 在渲染完畢這個里面的樣式將被移除 */ [v-cloak] { display: none; } </style>  
           
   
   
               
   
   
               
   
           
   

2. keep-alive

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

   

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

   1. 需要在router.js中設(shè)置meta屬性，meta下的keepAlive屬性設(shè)置為true，代表這個頁面需要進(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' } } ] })  
                      
      
      
                          
      
      
                          
      
                      
      

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

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

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

      <template> <div class="detail"> <!-- form表單，用于測試是否緩存 --> <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 York</Option> <Option value="shanghai">London</Option> <Option value="shenzhen">Sydney</Option> </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">Male</Radio> <Radio label="female">Female</Radio> </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">On</span> <span slot="close">Off</span> </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">Submit</Button> <Button style="margin-left: 8px">Cancel</Button> </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)來之前，判斷是從哪個頁面過來的，設(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í)例（剛開始錯誤寫法） // next(vm => { //     if (from.name === "list") { //         // 在這里修改keepAlive值，是不能緩存數(shù)據(jù)的，因?yàn)樵趎ext()里面的代碼，是在vue掛載之后執(zhí)行，處于activated之后，此時activated中keepAlive還是false //         vm.$route.meta.keepAlive = true; //     } else { //         vm.$route.meta.keepAlive = false; //     } // }); }, // 路由離開之前，判斷去往哪個頁面，設(shè)置不同的keepAlive屬性 beforeRouteLeave(to, from, next) { if (to.name === "list") { this.$route.meta.keepAlive = true; } else { this.$route.meta.keepAlive = false; } next(); }, activated() { // 此方法在頁面緩存時會被調(diào)用(this.$route.meta.keepAlive為true時)，根據(jù)路由元信息決定是否重新加載數(shù)據(jù)。不加載則是上次填寫完的數(shù)據(jù) // console.log(this.$route.meta.keepAlive); } }; </script> <style scoped lang="less"> .detail { position: relative; height: 100%; width: 100%; } </style>  
                      
      
      
                          
      
      
                          
      
                      
      

3. 插槽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

4. 強(qiáng)制刷新某個div

   vue實(shí)現(xiàn)F5刷新整個頁面無空白無間隔時間

5. 修飾符
   事件修飾符：

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

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

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

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

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

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

      注：

      1. 每次事件產(chǎn)生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認(rèn)動作。我們加上passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認(rèn)動作。
      2. passive和prevent沖突，不能同時綁定在一個監(jiān)聽器上

   按鍵修飾符： 去官網(wǎng)查看即可，這里不過多解釋。Vue.js-修飾符

6. :is: 動態(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>我是tr</span> </div> </template> <script> export default { name: "isComponent", data() { return {}; } }; </script> <style scoped> </style>  
           
   
   
               
   
   
               
   
           
   

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

   1. router-link 加上@click事件，綁定的事件會無效因?yàn)椋簉outer-link的作用是單純的路由跳轉(zhuǎn)，會阻止click事件，你可以試試只用click不用native,事件是不會觸發(fā)的。此時加上.native，才會觸發(fā)事件。
   2. 根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件。但父組件想在子組件上監(jiān)聽自己的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>

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

轉(zhuǎn)自：https://blog.csdn.net/a5252145/article/details/107316953?utm_medium=distribute.pc_category.427508.nonecase&depth_1-utm_source=distribute.pc_category.427508.nonecase