1. vue中動態(tài)綁定class的方式?

一種是直接寫:class="變量"
一種是:class="判斷條件"
一種是通過json class ="{}"

watch和computed的區(qū)別

Watch只能監(jiān)聽data中的數(shù)據(jù)變化澄者，computed不需要祷杈，watch可以進行異步操作牡借，computed不可以愉舔，computed不修改原始數(shù)據(jù)吆玖，通過return返回處理的數(shù)據(jù)，可以包含大量的邏輯運算

vue中key的作用

在v-for時使用惭缰，標識組件的唯一性议纯，更好的區(qū)分組件，高效的更新虛擬DOM

vue父傳子 子傳父 非父子

 在子組件的標簽上定義一個變量浅役，：變量=‘傳的值’斩松，在子級中使用props接收變量
 在子組件中寫一個事件，事件中使用this.$emit(‘自定義事件名’觉既，’數(shù)據(jù)’)惧盹；在父級中的子標簽上使用@自定義事件 = ‘父級事件’來接收
 非父子關(guān)系組件通過單一事件管理傳值,cookie vuex 本地存儲

vue指令

v-model 多用于表單元素實現(xiàn)雙向數(shù)據(jù)綁定（同angular中的ng-model）
v-for 格式： v-for="字段名 in(of) 數(shù)組json"  循環(huán)數(shù)組或json(同angular中的ng-repeat),需要注意從vue2開始取消了$index
v-show 顯示內(nèi)容 （同angular中的ng-show）
v-hide  隱藏內(nèi)容（同angular中的ng-hide）
v-if    顯示與隱藏  （dom元素的刪除添加 同angular中的ng-if 默認值為false）
v-else-if  必須和v-if連用
v-else  必須和v-if連用  不能單獨使用  否則報錯   模板編譯錯誤
v-bind  動態(tài)綁定  作用： 及時對頁面的數(shù)據(jù)進行更改
v-on:click 給標簽綁定函數(shù)，可以縮寫為@瞪讼，例如綁定一個點擊函數(shù)  函數(shù)必須寫在methods里面
v-text  解析文本
v-html   解析html標簽
v-bind:class   三種綁定方法  1钧椰、對象型  '{red:isred}'  2、三元型   'isred?"red":"blue"'  

對mvvm模式的理解

MVVM 是 Model-View-ViewModel 的縮寫符欠。即模型控制了視圖,視圖改變了模型 雙向數(shù)據(jù)綁定

vue中的組件,及定義組件的方法?

 組件是可復用的 Vue 實例, 如果網(wǎng)頁中的某一個部分需要在多個場景中使用嫡霞，那么我們可以將其抽出為一個組件進行復用。組件大大提高了代碼的復用率希柿。
定義組件有兩種方式：
(1)全局方式
直接使用Vue.component()創(chuàng)建的組件诊沪，所有的Vue實例都可以使用。
(2)局部方式
三部曲1.創(chuàng)建這個組件曾撤；2.注冊這個組件端姚；3.使用這個組件；

vue在什么條件下可以給元素添加進入離開動畫

 條件渲染 (使用 v-if)盾戴；
條件展示 (使用 v-show)寄锐；
動態(tài)組件；
組件根節(jié)點

vue中watch和methods的區(qū)別

watch .是觀察的動作尖啡，自動執(zhí)行
methods 是方法，主動調(diào)用

vue第一次加載頁面會觸發(fā)哪幾個生命周期

會觸發(fā)下面這幾個beforeCreate, created, beforeMount, mounted

組件中的data為什么是一個函數(shù)而不是一個json

 組件中的data寫成一個函數(shù)剩膘，數(shù)據(jù)以函數(shù)返回值形式定義衅斩，這樣每復用一次組件，就會返回一份新的data怠褐，類似于給每個組件實例創(chuàng)建一個私有的數(shù)據(jù)空間畏梆，讓各個組件實例維護各自的數(shù)據(jù)。而單純的寫成對象形式奈懒，就使得所有組件實例共用了一份data奠涌，就會造成一個變了全都會變的結(jié)果。

vue實例中常見的配置項

 el   掛載的節(jié)點
data 數(shù)據(jù)
methods  事件方法
computed 計算屬性
watch  監(jiān)聽器
components  局部組件
filters   過濾器
directives  自定義指令
生命周期鉤子函數(shù)

vue中的過濾器是什么,有什么作用,怎么定義過濾器

作用: 對數(shù)據(jù)進行一些加工處理磷杏，比如 數(shù)字保留幾位小數(shù) 
全局過濾器通過vue.filter定義
局部過濾器通過filters定義
使用： {{ 變量 | 過濾器名 }}

vue中常見的修飾符

Stop：阻止冒泡溜畅；
prevent：阻止默認事件；
once：只執(zhí)行一次极祸；
capture：將事件流設為捕獲方式慈格；
self：直對自身觸發(fā)事件怠晴；  enter：回車鍵；Up:上浴捆； down：下蒜田；left:左；right：右选泻；

組件中的is的作用

1.解決標簽固定搭配問題冲粤；2.實現(xiàn)動態(tài)組件

vue中的數(shù)組發(fā)生改變了但是頁面沒有重新渲染怎么解決

arr.splice()
Vue.set()
vm.$set()

怎么定義vue-router的動態(tài)路由

path:"/foodId/:id" 
獲取：this.$route.params.id

hash和history的區(qū)別

區(qū)別：
hash模式：
  1.采用的是window.onhashchange事件實現(xiàn)页眯。
  2.可以實現(xiàn)前進 后退 刷新色解。
  3.比如這個URL：http://www.abc.com/#/hello, hash 的值為#/hello。
  它的特點在于：hash 雖然出現(xiàn)URL中餐茵，但不會被包含在HTTP請求中科阎，
  對后端完全沒有影響，因此改變hash不會重新加載頁面
history模式：
  1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法忿族。
  2.可以前進锣笨、后退，但是刷新有可能會出現(xiàn)404的報錯
  3.前端的url必須和實際向后端發(fā)起請求的url 一致道批，如http://www.abc.com/book/id 错英。
  如果后端缺少對/book/id 的路由處理，將返回404錯誤隆豹。

vue中有哪些守衛(wèi)

1.全局守衛(wèi)
router.beforeEach((to,from,next)=>{})
router.afterEach((to,from)=>{})

2.路由獨享守衛(wèi)
 beforeEnter(to,from,next){ }

3.組件內(nèi)部守衛(wèi) movie.vue
beforeRouteEnter(to,from,next){
        //不能使用this
    },
    beforeRouteUpdate(to,from,next){},
    beforeRouteLeave(to,from,next){}

vuex中有哪些模塊

getters  導出數(shù)據(jù)
state 基礎數(shù)據(jù)
mutations  修改的方法
actions  動作執(zhí)行的動作
modules模塊化

vuex和本地存儲的區(qū)別

1.vuex數(shù)據(jù)刷新就沒有了椭岩，本地存儲還在
2.vuex中的數(shù)據(jù)可以實時渲染，本地存儲不行

vue中組件通信

父傳子璃赡，父組件通過自定義屬性傳值判哥，子組件通過props接收；
子傳父碉考，通過觸發(fā)自定義事件
非父子塌计，可以通過EventBus vuex 本地存儲

mutations和actions區(qū)別

mutations是同步的，直接修改state,倉庫通過commit調(diào)用侯谁；

actions可以處理異步锌仅，不能修改state,倉庫通過dispatch調(diào)用

vue中的傳參方式

 1、search傳參
    <router-link to="/地址?屬性名=屬性值"></router-link>
     this.$route.query.屬性名
2墙贱、動態(tài)路由
   path:"/地址/變量名"
    <router-link to="/地址/數(shù)據(jù)值"></router-link>
     this.$route.params.變量名
3热芹、本地存儲
    setItem()  getItem()

vue中的 ref是什么？如何使用ref惨撇？

ref被用來給元素或者子組件注冊引用信息伊脓。引用信息將會注冊在父組件的$refs上。如果是普通的DOM元素上使用串纺，引用指向的就是DOM元素丽旅；如果用在子組件上椰棘，引用就指向子組件的實例。