1.MVVM
Model-View-ViewModel
數(shù)據(jù)-展示的綁定柒竞，ViewModel監(jiān)聽數(shù)據(jù)的改變和控制，處理數(shù)據(jù)方面的邏輯霹娄，連接Model和View層
2.雙向綁定原理
通過Object.defineProperty()劫持對象的getter能犯，setter鲫骗，數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調(diào)踩晶。
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
var obj = {};
Object.defineProperty(obj, 'txt', {
get: function(){
return obj;
},
set: function(val){
document.getElementById('txt').value = val;
document.getElementById('show').innerHTML = val;
}
})
document.addEvuentListener('keyup',function(e){
obj.txt = e.target.value;
})
2.Vue創(chuàng)建
1. Vue-Cli
1. 常用npm命令
npm install//下載依賴
npm run serve // 啟動vue-cli開發(fā)環(huán)境
npm run build // 啟動生成生產(chǎn)環(huán)境資源（打包）
serve dist//生成dist文件执泰，在本機測試是否完整
2.自動刷新頁面
自動刷新并不是vue-cli功能，是webpack的hot-module-repalement-plugin插件在做這事
3.vue-cli生成的項目可以使用es6渡蜻、es7的語法嗎术吝？
可以使用，配置了babel茸苇，可以將es6排苍，es7在webpack打包時轉(zhuǎn)換成ES5
4.vue-cli怎么解決跨域的問題？
在根目錄下新建：vue.config.js文件学密，然后里面配置
module.exports = {
devServer: {
proxy: {
//配置跨域
'/api': {
target: '跨域url',
ws: true,
changOrigin: true
// pathRewrite: {
// '^/api': ''
// }
}
}
}
}
5. 怎么創(chuàng)建一個項目
vue create xxxx 選擇模板
6. cli2和cli3有什么區(qū)別
cli3集成了webpack配置淘衙，vue.config.js中統(tǒng)一設(shè)置
3.vue-router
1.重定向頁面
const routes:[
{
path: '/a',
//重定向
redirect: '/b'
},{
path: '/a',
component: A,
//別名實現(xiàn)重定向
alias:'/b'
}]
2.404頁面
const routes:[
{
path: '/aa',
name: 'aa',
component: Aa,
children:[]
},{
// 放到最后，*全匹配 不放最后會影響前面頁面全部匹配成404
path: '*',
name: '404',
component: "404組件"
}
]
3.路由有幾種模式
兩種腻暮，默認為hash彤守，可以同伙VueRouter實例添加mode:'history'改為history模式
- hash 變更hash不會刷新頁面，會改變地址
- history 不支持老舊瀏覽器哭靖，基于HTML5具垫，路由變化不會改變地址，但是部署到服務器试幽，需要在ng上進行相應的正向代理跳轉(zhuǎn)筝蚕，否則拷貝鏈接打不開
4.vue-router有幾種鉤子
1.三種鉤子
- 全局導航鉤子
beforeEach,afterEach，beforeResolve - 組件內(nèi)鉤子
beforeEnter - 單獨路由獨享組件
beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
2.執(zhí)行順序
全局 > 路由 > 組件
除afterEach全局后置铺坞，其他鉤子必須調(diào)用next()否則無法導航起宽，注意全局前置守衛(wèi)可以用于攔截(登陸攔截)
5. router-link
類似a標簽，用于跳轉(zhuǎn)路由
// 字符串
<router-link to="apple"> to apple</router-link>
// 對象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由帶查詢參數(shù)query康震，地址欄變成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由帶查詢參數(shù)query燎含，地址欄變成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由帶路由參數(shù)params，params 不生效腿短，如果提供了 path屏箍，params 會被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由帶路由參數(shù)params，地址欄是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
6.vue-router如何響應路由參數(shù)變化
1.為何需要響應參數(shù)變化
- 切換路由橘忱，路由參數(shù)變化赴魁，頁面數(shù)據(jù)未更新，需要強制刷新
- 不同路由渲染相同組件钝诚，復用組件颖御，切換路由后，當前組件下的生命周期函數(shù)不會再調(diào)用
2. 解決方案
1. 使用watch監(jiān)聽
watch: {
$route(to, from) {
if(to !== from){
console.log('檢測到變化，做出處理')
}
}
}
2. 向router-view組件中添加key
<router-view :key="$router.fullPath"></router-view>
//$route.fullPath是完成后解析的URL潘拱，包含其查詢參數(shù)和hash完整路徑
7.切換到新路由時疹鳄，頁面要滾動到頂部或保持原先的滾動位置怎么做呢？
const router = new Router({
mode: 'history',
scrollBehavior(to ,from ,saveOptions) {
return {x:0, y: 0}
},
})
8.在什么場景下會用到嵌套路由芦岂？
管理系統(tǒng)多級導航菜單
routes[{path:'/'},children[{paht:'chilld'}]]
9.如何獲取路由傳過來的參數(shù)
如果使用query方式傳入的參數(shù)使用this.router.params接收
10.active-class是哪個組件屬性
active-class是vue-router模塊的router-link組件中的屬性瘪弓，用來做選中樣式的切換；
11.vue組件怎么獲得當前路由信息
template中直接route
12.動態(tài)加載路由
router.addRoutes(routes: Array(RouteConfig))
13.懶加載路由
var myComponent = () => import('../views/xxxx.vue');
const routes = [
{
path: '/xxxx',
name: 'xxxx',
component: myComponent
}
]
const routes = [
{
path: '/xxxx',
name: 'xxxx',
component: ()=> import('../views/xxxx.vue');
}
]
var myComponent = r => require.ensure([], ()=> r(requier('../views/xxxx.vue')),'');
const routes = [
{
path: '/xxxx',
name: 'xxxx',
component: myComponent
}
]
const routes = [
{
path: '/xxxx',
name: 'xxxx',
component: resolve => require(['../views/xxxx.vue'],resolve);
}
]
14.從零開始寫一個路由
單獨創(chuàng)建一個router.js禽最，npm安裝vue-router,npm install vue-router
//引入vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 可引入組件
import xxxx from '../views/xxxx.vue'
//使用vue-router
Vue.use(VueRouter)
//定義路由變量
const xxx = ()=> import('../views/xxx.vue');
//定義路由表
const routes = [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
name: 'index',
component: xxxx,
children: []
}
],
//需要向外面暴露一個實例
const router = new VueRouter({
// 模式
mode: 'history',
// 環(huán)境
base: process.env.BASE_URL,
// 傳入路由表
routes
})
// 此處還可以寫登陸攔截之類的
router.beforeEach((to,from,next) => {
const isLogin = localStorage.eleToken ? true : false;
if(to.path === '/login' || to.path === '/register'){
next();
}else{
isLogin ? next() : next('/login');
}
})
export default router;
main.js中引用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h=>h(App)
}).$.mount('#app')
在app.vue中就可以使用
<router-view/>
15.導航完整解析流程
- 導航被觸發(fā)
- 在失活的組件里調(diào)用beforeRouteLeave守衛(wèi)
- 調(diào)用全局beforeEach守衛(wèi)
- 在復用的組件里調(diào)用beforeRouteUpdate守衛(wèi)
- 調(diào)用路由配置里的beforeEnter守衛(wèi)
- 解析異步路由組件
- 在被激活的組件里滴啊用beforeRouteEnter守衛(wèi)
- 調(diào)用全局beforeResolve守衛(wèi)
- 導航被確認
- 調(diào)用全局afterEach鉤子
- DOM更新
- 將創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)中傳給next回調(diào)函數(shù)
16.路由之間是怎么跳轉(zhuǎn)的腺怯？有哪些方式？
router-link
<!--不帶參-->
<router-link :to="{name: 'home'}"></router-link>
<!--帶參數(shù)-->
<router-link :to="{name: 'home', params: {id: 1}}"></router-link>
<!--params傳參數(shù) (類似post)-->
<!--路由配置 path: "/home/:id" 或者 path: "/home:id" -->
<!--不配置path ,第一次可請求,刷新頁面id會消失-->
<!--配置path,刷新頁面id會保留-->
<router-link :to="{name: 'home}, query: {id: 1}"></router-link>
<!--query傳參數(shù) (類似get,url后面會顯示參數(shù))-->
<!--路由可不配置-->
<!--html 取參 $route.query.id-->
<!--script 取參 this.$route.query.id-->
-
this.$router.push()(函數(shù)里面調(diào)用)
//不帶參
this.$router.push('/home');
this.$router.push({name: 'home'});
this.$router.push({path: '/home'})
//帶參數(shù)
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取參 $route.query.id
// script 取參 this.$route.query.id
params傳參
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
this.$router.replace()同上this.$router.go(n)
his.$router.go(n) 向前或者向后跳轉(zhuǎn)n個頁面川无，n可為正整數(shù)或負整數(shù)
區(qū)別：
this.$router.push 跳轉(zhuǎn)到指定url路徑呛占，并想history棧中添加一個記錄，點擊后退會返回到上一個頁面
this.$router.replace 跳轉(zhuǎn)到指定url路徑懦趋，但是history棧中不會有記錄晾虑，點擊返回會跳轉(zhuǎn)到上上個頁面 (就是直接替換了當前頁面)
this.$router.go(n) 向前或者向后跳轉(zhuǎn)n個頁面，n可為正整數(shù)或負整數(shù)
17.vue-router使用history模式部署時需注意什么
服務器的404頁面需要重定向到index.html
nginx
try_files uri/ /index.html;
18.route和router有什么區(qū)別
route是當前路由對象
router是vue實例的路由實例
