Vue.js技術
前言
學習方向：
NodeJs、VueJs、前端安全、Webpack、ES6、Vue-CLI、Vue-Router、ESLint
三大框架
- vue.js
- React.js
- ANgular
Vue.js簡介
- Vue是一套用於構建用戶界面的漸進式框架
- Vue的目標是 實現響應的數據綁定和組合的視圖組件
- 核心是一個響應的 數據綁定系統
- 是一個JavaScript MVVM 的庫
Vue.js模板
雙大括號表達式
插值：數據綁定最常見的形式
- 語法: {{exp}}
- 功能: 向頁面輸出數據
- 可以調用對象的方法
- el表明當前實例化需要操作的元素區域
- data表示當前Vue實例的數據對象
- data -> Object || data -> Function
指令
v-clock：能夠解決插值表達式帶閃爍問題
v-test：
- 渲染文本
msg: 'Hello Vue! '- 與差值有所不同
v-html：
- 渲染Html
msg2:'<h1>Hello</h1>'
v-if：
- 一般與v-else一起使用
- 屬性值如果爲false不顯示，爲true則顯示
v-show
v-blind：
- 功能: 指定變化的屬性值
- 完整寫法: v-bind:xxx=‘yyy’ //yyy 會作爲表達式解析執行
- 簡潔寫法: :xxx=‘yyy’
v-on：
- 功能: 綁定指定事件名的回調函數
- 完整寫法: v-on:keyup=‘xxx’ v-on:keyup=‘xxx(參數)’ v-on:keyup.enter=‘xxx’
- 簡潔寫法:
@keyup=‘xxx’
@keyup.enter=‘xxx’ - 事件修飾符
使用.stop阻止冒泡
使用.prevent阻止默認行爲
.capture添加事件偵聽器是使用事件捕獲模式
.self只當事件在該元素本身觸發時觸發回調
.once事件只觸發一次
v-model：
- 實現表單元素和Model中數據的雙向數據綁定
- 只能運用在表單元素中（input\select\chechbox）
ES6
const常量（不會更改） let變量（會改變）
//對象Java Map=>Object
const obj = {
a1:1,
a2:2
}
//模板字符串
const str=“1321364”
This is ${str} hello
//展開符
…=>Object
- mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？
答：一個model+view+viewModel框架，數據模型model，viewModel連接兩個。
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷。
- 說出至少4種vue當中的指令和它的用法？
答： v-if：判斷是否隱藏；
v-for：數據循環出來；
v-bind:class：綁定一個屬性；
v-model：實現雙向綁定。
- vue的優點是什麼？
答：低耦合、可重用、性獨立開發、可測試。
- vue的生命週期
答：vue 實例從創建到銷燬的過程，就是生命週期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命週期。
總共分爲8個階段：
beforeCreate----創建前
組件實例更被創建，組件屬性計算之前，數據對象data都爲undefined，未初始化。
created----創建後
組件實例創建完成，屬性已經綁定，數據對象data已存在，但dom未生成，$el未存在
beforeMount—掛載前
vue實例的$el和data都已初始化，掛載之前爲虛擬的dom節點，data.message未替換
mounted-----掛載後
vue實例掛載完成，data.message成功渲染。
beforeUpdate----更新前
當data變化時，會觸發beforeUpdate方法
updated----更新後
當data變化時，會觸發updated方法
beforeDestory—銷燬前
組件銷燬之前調用
destoryed—銷燬後
組件銷燬之後調用，對data的改變不會再觸發週期函數，vue實例已解除事件監聽和dom綁定，但dom結構依然存在
5.組件之間的傳值通信？
答：父組件向子組件傳值：
1）子組件在props中創建一個屬性，用來接收父組件傳過來的值；
2）在父組件中註冊子組件；
3）在子組件標籤中添加子組件props中創建的屬性；
4）把需要傳給子組件的值賦給該屬性
子組件向父組件傳值：
1）子組件中需要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；
2）將需要傳的值作爲$emit的第二個參數，該值將作爲實參傳給響應事件的方法；
3）在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。
6.mvvm和mvc區別？
答：mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。和當 Model 頻繁發生變化，開發者需要主動更新到View 。
7.什麼是MVVM
答：即：Model View VM
Model 是數據, data;
View 是模板;
VM 是 vm = new Vue(); VM 用了連接數據和視圖, 視圖的輸入框綁定了v-model, 用戶輸入後會改變data; Model改變也會同步視圖更新相關的依賴, 雙向綁定就是vm起了作用。
8.組件之間跳轉的方法
答：① 直接修改地址欄中的路由地址
② 通過router-link實現跳轉：
<router-link to="/myRegister">註冊</router-link>
③ 通過js的編程的方式：
jumpToLogin: function () {
this.$router.push('/myLogin');
}
9.vue中解決跨域問題
答： ① 後臺更改header：
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
② 使用JQuery提供的jsonp ：
methods: {
getData () {
var self = this
$.ajax({
url: ‘http://f.apiplus.cn/bj11x5.json’,
type: ‘GET’,
dataType: ‘JSONP’,
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(’,’)
}
})
}
}
③ 使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）
10.es6常用語法（五條即可）
答：1. 變量聲明const和let；
2. 模板字符串；
3. 箭頭函數；
4. import導入模塊、export導出模塊；
5. promise