web前端框架vue基礎(chǔ)知識(shí)

vue中如何封裝一個(gè)組件?
首先定義一個(gè)后綴名為.vue的文件,文件內(nèi)部由三部分組成,template模板部分,script邏輯部分,style樣式部分。這三部分是組件的核心部分,組件需要哪些結(jié)構(gòu),在模板部分書寫,需要什么樣的外觀樣式,通過style部分書寫,有哪些行為在script部分書寫。一定要在script部分使用es6模塊化的導(dǎo)出語法(export default{}),進(jìn)行導(dǎo)出。然后在需要調(diào)用組件的地方使用es6模塊化導(dǎo)入語法導(dǎo)入即可,組件需要哪些參數(shù),直接在調(diào)用部分進(jìn)行傳遞即可。主要邏輯還是在組件中完成。

談?wù)剬?duì)vue中插槽的理解?
vue中的插槽分為三種,匿名插槽,具名插槽,作用域插槽。
通過插槽可以動(dòng)態(tài)指定某一個(gè)組件模板部分的渲染,我們?cè)谡{(diào)用組件的時(shí)候,在組件的調(diào)用標(biāo)簽中間傳遞了什么樣的標(biāo)簽結(jié)構(gòu),那么該組件就會(huì)把我們傳遞的標(biāo)簽結(jié)構(gòu)放在他的模板部分進(jìn)行渲染。

v-show和v-if在隱藏一個(gè)元素的時(shí)候有什么不同,應(yīng)該如何來選擇?
v-show是通過css的方式來隱藏元素,而v-if是根據(jù)條件是否成立決定是否要?jiǎng)?chuàng)建元素。如果某個(gè)元素需要頻繁切換顯示狀態(tài)的話,建議使用v-show,因?yàn)轭l繁創(chuàng)建銷毀DOM需要性能消耗。

什么是Vuex,在哪種場(chǎng)景下使用?
Vuex是針對(duì)vue的一個(gè)狀態(tài)管理工具,有幾個(gè)核心部分:
state 存儲(chǔ)狀態(tài)數(shù)據(jù);
mutations 更新數(shù)據(jù)的方法;
actions 調(diào)用mutations中的方法,更新state數(shù)據(jù);
getters 對(duì)state中的數(shù)據(jù)進(jìn)行預(yù)處理;
當(dāng)組件關(guān)系比較復(fù)雜的時(shí)候,可以使用vuex簡(jiǎn)化組件間的傳值。

說說vue路由的使用步驟?
第一步:下載路由模塊vue-router;
第二步:創(chuàng)建路由對(duì)象;
第三步:配置路由規(guī)則;
第四步:將路由對(duì)象注冊(cè)為vue實(shí)例對(duì)象的成員屬性

常見的vue組件庫有哪些?
PC端:element-ui(餓了么團(tuán)隊(duì)),ant-design(阿里螞蟻金服團(tuán)隊(duì)),iview
移動(dòng)端:mint-ui,vant,vux

談下對(duì)于MVVM的理解?
MVVM由三部分組成M(model數(shù)據(jù)層),V(view視圖層),VM(view-model視圖模型層)。是一種框架的設(shè)計(jì)思想,vue就是基于mvvm來設(shè)計(jì)的。其中M(model)層負(fù)責(zé)初始化數(shù)據(jù),V(view)只負(fù)責(zé)頁面展示,VM(view-model)用來連接view層和model層,將數(shù)據(jù)層的數(shù)據(jù)傳遞一個(gè)視圖層進(jìn)行展示,將視圖層的操作傳遞到數(shù)據(jù)層進(jìn)行持久化。

談下vue的聲明周期?
創(chuàng)建階段:只執(zhí)行一次
beforeCreate(開始進(jìn)行一些數(shù)據(jù)和方法的初始化操作,data中的數(shù)據(jù)和methods中的方法還不能用),
created(已經(jīng)完成數(shù)據(jù)和方法的初始化,data中的數(shù)據(jù)和methods中的方法可以使用了),
beforeMount(開始渲染虛擬DOM),
mounted(已經(jīng)完成了虛擬DOM的渲染,可以操作DOM了,只執(zhí)行一次)
運(yùn)行階段:執(zhí)行多次
beforeUpdate(data中的數(shù)據(jù)即將被更新,會(huì)執(zhí)行多次)
updated(data中的數(shù)據(jù)已經(jīng)更新完畢,會(huì)執(zhí)行多次)
銷毀階段:只執(zhí)行一次
beforeDestroy(vue實(shí)例即將銷毀,此時(shí)data中的數(shù)據(jù)和methods中的方法依然處于可用狀態(tài))
destroyed(vue實(shí)例已經(jīng)銷毀,此時(shí)data中的數(shù)據(jù)和methods中的方法已經(jīng)不可用)

Vue中有幾種路由模式?
vue中的路由模式有兩種;hash和history;默認(rèn)是hash模式;可以在創(chuàng)建路由對(duì)象的時(shí)候,使用mode屬性來切換路由模式。
const router = new Router({mode:'history'})

vue路由導(dǎo)航守衛(wèi)是什么?以及它的應(yīng)用場(chǎng)景?
路由守衛(wèi)是在頁面進(jìn)行路由跳轉(zhuǎn)的時(shí)候做一些處理,比如攔截。
vue-router中提供了下面幾種路由導(dǎo)航守衛(wèi):
全局前置守衛(wèi)

const router = new VueRouter({ ... })

    router.beforeEach((to,from,next) =>{
        // from 從哪來
        // to 到哪里去
        // next是否要放行
    })

全局后置鉤子

    router.afterEach((to,from)=>{
        // ...
    })

路由獨(dú)享守衛(wèi):在聲明路由的時(shí)候,針對(duì)特定路由的構(gòu)造函數(shù)

const router = new VueRouter({
        routes: [
        {
            path: '/foo',
            component: Foo,
            beforeEach: (to,from,next)=>{
                // ...
            }
        }
    ]
    })

Vue有哪些常用的事件修飾符?
.prevent 阻止默認(rèn)事件;
.stop 阻止冒泡;
.once 事件執(zhí)行一次;
.self 只當(dāng)在event.target是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)

列舉vue中常用的指令?
v-model:實(shí)現(xiàn)雙向數(shù)據(jù)綁定;
v-bind:綁定屬性;
v-on:注冊(cè)事件;
v-html:設(shè)置標(biāo)簽內(nèi)容(允許內(nèi)容html)
v-text:設(shè)置標(biāo)簽的內(nèi)容(不允許包含html)
v-cloak:解決插值表達(dá)式閃爍問題
v-for:循環(huán)遍歷數(shù)組或?qū)ο?/p>

vue中如何解決插值表達(dá)式閃爍問題?
使用v-html或v-text替代插值表達(dá)式;
使用v-cloak解決插值表達(dá)式閃爍,
第一步:聲明屬性選擇器[v-cloak]{display:none}
第二步:在插值表達(dá)式所在標(biāo)簽添加屬性v-cloak

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 33、JS中的本地存儲(chǔ) 把一些信息存儲(chǔ)在當(dāng)前瀏覽器指定域下的某一個(gè)地方(存儲(chǔ)到物理硬盤中)1、不能跨瀏覽器傳輸:在...
    萌妹撒閱讀 2,240評(píng)論 0 2
  • 本文章是我最近在公司的一場(chǎng)內(nèi)部分享的內(nèi)容。我有個(gè)習(xí)慣就是每次分享都會(huì)先將要分享的內(nèi)容寫成文章。所以這個(gè)文集也是用來...
    Awey閱讀 9,571評(píng)論 4 67
  • 要招一個(gè)會(huì)vue的開發(fā)者: 作為面試官的你,你還會(huì)每次都只是問這些老土的問題嗎?你對(duì)MVVM的理解是什么?你知道什...
    浪子神劍閱讀 23,277評(píng)論 0 260
  • vue 編碼步驟 引入vue.js文件 定義一個(gè)vue的管理范圍 vue1.0里面vue的管理區(qū)域的id...
    freedomsky0612閱讀 2,013評(píng)論 2 1
  • 一. Vue核心小知識(shí)點(diǎn) 1、vue中 key 值的作用 key 的特殊屬性主要用在 Vue的虛擬DOM算法,在新...
    倚劍闖天涯_閱讀 1,856評(píng)論 0 12

友情鏈接更多精彩內(nèi)容