1、v-if（虛擬dom元素）和v-show有什么區別？
1.手段：
- v-if是動態的向DOM樹內添加或者刪除DOM元素；
- v-show是通過設置DOM元素的display樣式屬性控制顯隱；
2.編譯過程：
- v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件；
- v-show只是簡單的基於css切換
3.編譯條件
- v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時候進行局部卸載）；
- v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
4.性能消耗
- v-if有更高的切換消耗；
- v-show有更高的初始渲染消耗；
5.使用場景
- v-if適合運營條件不大可能改變；
- v-show適合頻繁切換；
2、vue-router使用步驟
<div class="container">
<router-link to="/user?name=張三&age=22">用戶中心</router-link>
<router-view></router-view>
</div>
步驟
1.定義不同的路由切換時需要顯示的內容
var User=Vue.component("User",{
template:"<div>{{$route.query.name}}</div>"
})
2.配置路由規則
var routes=[{
path:"/user",
component:User
}]
3.創建vue-router實例
var router=new VueRouter({
routes:routes
})
4.將vue-router的實例掛載到vue的實例
new Vue({
el:".container",
router:router
})
2(1)、vue-router是什么？它有哪些組件？
- vue用來寫路由一個插件。router-link,router-view
3、vue-resource使用
$http.get(url,[options])
-
url String ajax請求的接口地址
-
options Object 需要發送的參數
new Vue({ el:".container", data:{ content:"", } }) $http.get("addcomment",{params,{content:this.content}})
$http.post(url,[options])
-
url String ajax請求的接口地址
-
options Object 需要發送的參數
new Vue({ el:".container", data:{ content:"", } }) $http.post("/addcomment",{content:this.content})
4、vue的生命周期（vue的鈎子函數）
-
beforeCreate 組件還未被創建
-
created 組件已被創建
-
beforeMount 組件已被創建但還未掛載到DOM節點上
-
mounted 組件已掛載到DOM節點上
-
beforeDestory 組件即將被銷毀
-
destoryed 組件已經被銷毀
vm = new Vue({ el:".box", data:{}, beforeCreate(){}, created(){}, boforeMount(){}, mounted(){}, boforeDestroy(){}, destroyed(){} })
4、什么是vue
- 是一個mvvm模型的js框架（m--->model v--->view）
- model本質上來說就是數據
- view就是試圖（及最終展現給客戶的頁面）
- mv model--->view (由數據驅動視圖)
- vm view --->model(由視圖通過事件更新數據)
- 特點是
- 01.簡單上手容易
- 02.比較的輕量級（相對於AngularJs,RectJs...）
- 03.組件齊全，文檔便於閱讀
5、mvvm框架是什么？它和其他框架（jQuery）的區別是哪些？哪些場景適合？
- 一個model+view+viewModel框架，數據模型model，viewModel連接兩個
- 區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
- 場景：數據操作比較多的場景，更加便捷
6、自定義指令（v-check,v-focus）的方法有哪些？它有哪些鈎子函數？還有哪些鈎子函數參數？
- 全局定義指令：在vue對象的directive方法里面有兩個參數，一個是指令名稱，另一個是函數。
- 組件內定義指令：directives
- 鈎子函數：bind(綁定事件觸發),inserted(節點插入的時候觸發),update(組件內相關更新)
- 鈎子函數參數：el,binding
7、說出至少4種vue當中的指令和它的用法？
- v-if：判斷是否隱藏；
- v-for:數據循環出來；
- v-bind:class（簡寫 @class）：綁定一個屬性；
- v-model：實現雙向綁定;
8、v-model是什么？怎么使用？vue中標簽怎么綁定事件？
- 可以實現雙向綁定，指向（v-class,v-for,v-if,v-show,v-on）。vue的model層的data屬性。
- 綁定事件：
<input @click=doLog() />
8（1）、Vue的雙向數據綁定原理是什么？
- vue.js是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter,在數據變動時發布消息給訂閱者，觸發相應的監聽回調
具體步驟
第一步：需要observe的數據對象進行遍遞歸歷，包括子屬性對象的屬性，都加上setter和getter這樣的話，給這個對象的某個值賦值，就會觸發setter
第二步：compile解析模板指令，將模板中的變量替換成數據，然后初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加數據的訂閱者，一旦數據有變動，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是：
- 1.在自身實例化時往屬性訂閱器（dep）里面添加自己
- 2.自身必須有一個update()方法
- 3.待屬性變動dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
第四步：MVVM作為數據綁定的入口，整合Observer,Compile和Watcher三者，
- 通過Observer來監聽自己的model數據變化，通過Compile來解釋編譯模板指令，最終利用Watcher搭起Observer和Compile之間通信橋梁，達到數據變化->視圖更新；視圖交互變化（input）->數據model變更的雙向綁定效果
9、導航鈎子函數有哪些？它們有哪些參數？
- 導航鈎子有：a/全局鈎子和組件內獨享的鈎子。b/beforeRouteEnter.afterEnter.beforeRouterUpdate,beforeRouteLeave
- 參數：有to(去的那個路由),form(離開的路由),next(一定要用這個函數才能去到下一個路由，如果不用就攔截)最常用就這幾種
10、請說下封裝vue組件的過程？
- 首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低，難維護，復用性等問題
- 然后，使用Vue.extend方法創建一個組件，然后使用Vue.component方法注冊組件。子組件需要數據，可以在props中接受定義，而子組件修改好數據后想把數據傳遞給父組件。可以采用emit方法。
11、vue.cli項目中目錄中src目錄每個文件夾和文件的用法？
- assets文件夾是放靜態資源；
- components是放組件；
- router是定義路由相關的配置；
- view視圖；
- app.vue是一個應用組件；
- main.js是入口文件；