亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUE重點問題總結

 更新時間:2018年03月19日 08:58:09   投稿:laozhang  
本篇內(nèi)容給大家總結了VUE的重要難點,并把代碼做了詳細分享,有興趣的朋友參考學習下。

1、組件三種掛載方式

自動掛載

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

手動掛載

// 可以實現(xiàn)延遲按需掛載
<div id="app"> {{name}} </div> 
<button onclick="test()">掛載</button> 
<script> 
 var obj= {name: '張三'} 
 var vm = new Vue({ 
 data: obj
 }) 
 function test() { 
 vm.$mount("#app"); 
 }
// Vue.extend()創(chuàng)建沒有掛載的的子類,可以使用該子累創(chuàng)建多個實例
var app= Vue.extend({ 
 template: '<p>{{message}}</p>', 
 data: function () { 
 return { 
  message: 'message'
  } 
 } 
 }) 
 new app().$mount('#app') // 創(chuàng)建 app實例,并掛載到一個元素上

2、路由傳遞參數(shù)的方式

<p>
  <!-- query要用path來引入,params要用name來引入,故不能寫為 :to="{path:'/login',params: {isLogin: true}} -->
  <!-- 跳轉路由時用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); -->
  <!-- 接收參數(shù)時用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; -->
  <router-link :to="{name:'login',params: {isLogin: true}}">親,請登錄</router-link>
  <router-link :to="{name:'login',params: {isLogin: false}}">免費注冊</router-link>
 </p>
 <!-- 路由出口, 路由匹配到的組件將渲染在這里 -->
 <router-view></router-view>

3、對render:h => h(App)的理解

render:h=>h(App)是ES6中的箭頭函數(shù)寫法,等價于render:function(h){return h(App);}.

1.箭頭函數(shù)中的this是 指向 包裹this所在函數(shù)外面的對象上。

2.h是creatElement的別名,vue生態(tài)系統(tǒng)的通用管理

3.template:‘<app/>',components:{App}配合使用與單獨使用render:h=>h(App)會達到同樣的效果

前者識別<template>標簽,后者直接解析template下的id為app的div(忽略template的存在)

new Vue({
 el: '#app', // 相當于 new Vue({}).$mount('#app');
 template: '<App/>', // 1、可以通過在 #app 內(nèi)加入<app></app>替代 2、或者 通過 render: h => h(App) 渲染一個視圖,然后提供給el掛載
 components: { // vue2中可以通過 render: h => h(App) 渲染一個視圖,然后提供給el掛載
  App
 }
});

4、Vue.nextTick()的理解

與DOM相關操作寫在該函數(shù)回調中,確保DOM已渲染

nextTick的由來:

由于VUE的數(shù)據(jù)驅動視圖更新,是異步的,即修改數(shù)據(jù)的當下,視圖不會立刻更新,而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后,再統(tǒng)一進行視圖更新。

nextTick的觸發(fā)時機:

在同一事件循環(huán)中的數(shù)據(jù)變化后,DOM完成更新,立即執(zhí)行nextTick(callback)內(nèi)的回調。

應用場景:

需要在視圖更新之后,基于新的視圖進行操作。

在Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調函數(shù)中。原因是什么呢,原因是在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染,而此時進行DOM操作無異于徒勞,所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數(shù)中。與之對應的就是mounted鉤子函數(shù),因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成,此時在該鉤子函數(shù)中進行任何DOM操作都不會有問題 。

在數(shù)據(jù)變化后要執(zhí)行的某個操作,而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結構的時候,這個操作都應該放進Vue.nextTick()的回調函數(shù)中。

簡單總結事件循環(huán):

同步代碼執(zhí)行 -> 查找異步隊列,推入執(zhí)行棧,執(zhí)行callback1[事件循環(huán)1] ->查找異步隊列,推入執(zhí)行棧,執(zhí)行callback2[事件循環(huán)2]...即每個異步callback,最終都會形成自己獨立的一個事件循環(huán)。結合nextTick的由來,可以推出每個事件循環(huán)中,nextTick觸發(fā)的時機:

相關文章

  • 詳解Nuxt.js中使用Element-UI填坑

    詳解Nuxt.js中使用Element-UI填坑

    這篇文章主要介紹了詳解Nuxt.js中使用Element-UI填坑,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • Vue自定義指令上報Google Analytics事件統(tǒng)計的方法

    Vue自定義指令上報Google Analytics事件統(tǒng)計的方法

    我們經(jīng)常需要接入統(tǒng)計服務以方便運營,這篇文章主要介紹了Vue自定義指令上報Google Analytics事件統(tǒng)計的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • 老生常談vue的生命周期

    老生常談vue的生命周期

    這篇文章主要為大家詳細介紹了vue的生命周期,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • Vue實現(xiàn)頁面的局部刷新(router-view頁面刷新)

    Vue實現(xiàn)頁面的局部刷新(router-view頁面刷新)

    本文主要介紹了Vue實現(xiàn)頁面的局部刷新(router-view頁面刷新),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • 基于vue封裝一個帶眼睛的密碼子組件

    基于vue封裝一個帶眼睛的密碼子組件

    這篇文章給大家介紹了基于vue封裝一個帶眼睛的密碼子組件的方法,文章中有詳細的代碼講解,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
    2023-09-09
  • Vue中動態(tài)綁定Ref的兩種方式總結

    Vue中動態(tài)綁定Ref的兩種方式總結

    Vue3中的ref是一種創(chuàng)建響應式引用的方式,它在Vue生態(tài)系統(tǒng)中扮演著重要角色,下面這篇文章主要給大家介紹了關于Vue中動態(tài)綁定Ref的兩種方式,需要的朋友可以參考下
    2024-09-09
  • undefined是否會變?yōu)閚ull原理解析

    undefined是否會變?yōu)閚ull原理解析

    這篇文章主要為大家介紹了undefined是否會變?yōu)閚ull原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • 使用Vue?CLI配置代碼壓縮、加密和混淆功能示例代碼

    使用Vue?CLI配置代碼壓縮、加密和混淆功能示例代碼

    這篇文章主要介紹了使用Vue?CLI配置代碼壓縮、加密和混淆功能,通過配置 vue.config.js 文件,我們可以使用 Vue CLI 輕松實現(xiàn)對 Vue 應用程序代碼的壓縮、加密和混淆,需要的朋友可以參考下
    2023-06-06
  • Vue.js教程之a(chǎn)xios與網(wǎng)絡傳輸?shù)膶W習實踐

    Vue.js教程之a(chǎn)xios與網(wǎng)絡傳輸?shù)膶W習實踐

    這篇文章主要給大家介紹了Vue.js之a(chǎn)xios與網(wǎng)絡傳輸?shù)南嚓P資料,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟隨小編一起來學習學習吧。
    2017-04-04
  • element-ui中的select下拉列表設置默認值方法

    element-ui中的select下拉列表設置默認值方法

    今天小編就為大家分享一篇element-ui中的select下拉列表設置默認值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評論