Vue基礎

1.       什麼是vue？它的核心理念是什麼？

Vue是漸進式框架採用了自底向上增量開發

核心理念是：資料驅動檢視

2.       mvc和mvvm的區別

mvc是後端分層開發概念，mvvm是前端檢視層的概念，主要關注與檢視層分離，也就是把前端檢視層分成了三部分Model、view、ViewModel;

mvc中的m是model層，負責操縱資料庫。V是view層：檢視層，傳送請求，接受請求，接收響應。C是業務邏輯層，接收請求和返回響應。

mvvm中m為model層資料層儲存資料，v是view層是頁面的HTML結構。Vm是viewModel排程層連結m與v

3.      

{{}}    v-clocak

4.       常見的事件修飾符有哪些，有什麼作用，怎麼用

.stop阻止冒泡事件 .capture 設定捕獲事件 .prevent阻止預設事件 .self 只在自身事件觸發時觸發  放在@事件型別的後面 比如@click.stop

5.       什麼是雙向資料繫結和對應的vue指令

資料劫持 資料雙向繫結 不論data層和dom層的兩個元素那個被改變另一方會相應更新相同的資料

v-model

6.       vue中如何動態繫結css樣式

：style=”可以是data內的變數、也可以是font-size：33px、還可以是{‘font-size’:33px,color:’black’}

:class=”可以是陣列[變數1,變數2]、可以是{‘font-size’:33px,color:’black’}、可以是方法getColor()”

7.       v-for如何遍歷物件，遍歷陣列，遍歷數字

v-for=”(item,index,key) in object” :key=”index”

v-for=”(value,index) in array”:key=”index”

v-for=”index in number” :key=”index”

8.       v-for為什麼設定key，key值有什麼要求

就地複用，提高重排效率

9.       v-if和v-show的區別，以及應用場景

v-if 是增刪dom來改變顯示隱藏

一般有多個條件來設定 v-if v-else-if  v-else來顯示其中一條

show是display:none開改變顯示隱藏

10.    vue的生命週期函式有哪些，說明各自特點用途

beforeCreate頁面建立Vue例項前的時候執行，頁面轉接

created：建立Vue例項完成後執行，請求介面在這裡執行

beforeMount :Vue例項開始渲染前執行，

mounted: Vue例項渲染完成後執行 呼叫後臺介面進行網路請求

beforeUpdate: Vue例項修改前執行，執行0次或多次，

updated  :  Vue例項修改完成後執行，執行0次或多次

beforeDestroy:  Vue開始消亡前執行，清楚監聽和計時器

destroyed: Vue例項消亡後執行，

11.    如何使用axios傳送get請求和post請求

12.    控制vue動畫的6個類名

v-enter v-enter-to v-enter-active

v-leave v- leave -to v- leave -active

13.    元件化和模組化的區別

元件化是從ui角度進行劃分的：前端的元件化，方便ui元件的重用

模組化是從程式碼邏輯角度劃分的；方便程式碼分層開發，保證每個功能模組的職能單一

14.    元件內的data為什麼用函式返回物件（1分）

資料隔離

15.    結合程式碼說明子元件如何給父元件傳值

<div id=’app’>

<father @ myfather’=” FroApp”><father>

</div>

<template id=father>

<div>

</div>

</father>

Vue.component(‘father’,{

Template:’#father’,

Created(){

This.$emit(‘myfather’,’傳的引數’)’

}

Const vm =new Vue({

El:’#app’,

Data:{

Fromfather:””

},

Methods:{

FroApp(data){

This.fromfather=data

}

16.    結合程式碼說明父元件如何給子元件傳值

<div id=’app’>

<father  formapp =” 來自app的傳參”><father>

</div>

<template id=father>

<div>

</div>

</father>

Vue.component(‘father’,{

Template:’#father’,

props(){

formapp(){

type[String,Number]

default:fromApp

}

}

Const vm =new Vue({

El:’#app’,

Data:{},

17.    結合程式碼說明普通插槽和預設插槽的使用方式

普通插槽寫上slot佔位符再在父元素內使用時在裡面寫內容就可

<Son>

1

<slot></slot>

3

</son>

<father>

<son>2</son>

</father>

具名插槽其實就是給插槽取個名字可以根據這個名字把內容填充到對應插槽中

<Son>

1

<slot name=slotOne></slot>

<slot name=slotTwo></slot>

4

</son>

<father>

<son v-slot:nameOne>2</son>

<son v-slot:nameTwo >3</son>

</father>

18.    如何通過ref獲取dom元素

ref=name

this.$refs.name

19.    前端路由和後端路由的區別

前端路由是頁面跳轉使用的時hash（#號）來進行跳轉

後端路由是URL地址進行跳轉對應伺服器上的資源

20.    結合程式碼說明如何使用路由

1.VueRouter放在Vue引入之下,

2. 建立VueRouter例項,並且建立對映關係。

template id="sonIdName"><div>元件元素</div></template>。Vue.component("sonComponentName",{template:"#sonIdName"})

<template id="sonIdName2"><div>元件元素</div></template>。Vue.component("sonComponentName2",{template:"#sonIdName2"})

let router = new VueRouter({

routes:[

{

path:'/',

component:sonComponentName,

redirect:'/son1'

},

{

path:'/son2',

component:sonComponentName2

},

{

path:'/son1',

component:sonComponentName1

},

]

})

3.掛載ruter在vue上

21.    結合程式碼說明如何設定路由巢狀

Routes：[

{path:”/ndex”,

Component:index,

Children:[{

Path:/son,

Component:son,

}]

}]

22.    結合程式碼說明宣告式路由跳轉和傳參

<router-link to='/login'>登入</router-link>

Methods:{

Tologin(){

this.$router.push({path: "/detail})

<button @click="tologin轉</button>

23.    結合程式碼說明函式式路由跳轉和傳參

<router-link :to="{path:'/index',query:{courseid:103}}">首頁</router-link>

<router-link :to="{name:'/index',params:{ urseid:103 }}">首頁</router-link>

24.    如何進行路由重定向，如何設定選中路由高亮

Routes :[{path:”/ndex”,

Component:index,

},

{path:’/’

redirect: "/index"

}

25.    什麼是跨域，如何解決跨域

指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制

1與後端人員協商開放許可權

2使用Jsonp

3使用代理 

 26.    建立專案的指令是什麼？執行專案的指令是什麼

Vue create name

Npm run serve

27.    初始化專案的目錄結構和作用

Node_module下載所有專案的依賴

Src專案原始碼

Assets普通靜態資源

Component可複用小元件

Router路由

Store vuex

View 頁面級別的大元件

App.vue最外層檢視

Man.js入口函式

Gitignore git檔案

Pakeage.json專案配置目錄

28.    元件內如何獲取Vuex內狀態值？如何修改？

獲取 this.$store.state.屬性

修改this.$store.commit('自定義的方法”，引數)

29.    Get請求和post請求的區別，常見的http狀態碼有哪些

GET把引數包含在URL中get會將資料快取起來發送資料的引數較小

POST post更安全post傳送的資料更大post能傳送更多的資料型別

30.    什麼是路由守衛，如何配置

通過跳轉或取消的方式守衛導航

BeforEath(to from next

31.    代理如何配置，各個配置項什麼意思

devServer:{

• open:true //自動開啟

hot:true //熱更新

proxy：{ //代理

‘/api’:{

Target:’地址’

pathRewrite:{ //路徑重寫

‘^/api’:’’

}

32.    分別用繫結方法methods、屬性計算computed和屬性監聽 watch實現名字全稱案例（如：慕容+雲海=慕容-雲海，輸入全稱自動分為名字和姓氏）

methods:{

       calculateName(){

return{value1+value2}}

watch:{

‘value1’:function(new,old){

This.value3=this.value1+this.value2

}

}

computed:{

this.value3:function(){

return this.value1+this.value2

}

}

33.    定義全域性過濾器實現日期格式化，實現傳YYYY-MM-DD hh-mm:ss顯示年-月-日 時：分：秒（補零）（4分）

Vue.filter('formatTime', function (date, format) {

// 這裡的data就是未處理的原始資料，format為傳遞

var year = date.getFullYear();

var month = (date.getMonth() +1).toString().padStart(2,0);

var day = (date.getDate()).toString().padStart(2,0);

var hour = (date.getHours()).toString().padStart(2,0);

var minute = (date.getMinutes()).toString().padStart(2,0);

var second = (date.getSeconds()).toString().padStart(2,0);

return {format.replace("YYYY",year).replace("MM",month).replace("DD",day).replace("hh",hour).replace("mm",minute).replace("ss",second)}

})

使用{{date | formatTime("YYYY-MM-DD hh:mm:ss") }}