vue:漸進式javascript框架；框架是提供基礎性服務；庫主要提供一些api，現在兩者區別越來越小。
文檔地址：https://cn.vuejs.org/v2/guide/
el:元素的掛載位置，可以是css選擇器、dom元素。
data：模型數據，值時一個對象。
插值表達式：{{ }};支持基本的運算。
前端渲染的方法：原生js字符串拼接，然後用dom插入。前端模版引擎。vue模版。
***插值表達式
***指令
指令的本質就是自定義屬性；格式以v-開始；
插值表達式存在山東的問題，v-cloak:先隱藏，替換好值之後再顯示最終的值。
v-text:插入文本
v-html:插入標籤，有風險，一般不要跨域使用。
v-pre:填充原始信息
***雙向數據綁定：
v-model：用戶修改數據會影響到模型中的數據。
v-model的本質就是綁定事件結合綁定屬性。
Model：模型數據， view：視圖，dom元素；view-model：控制邏輯。
***事件綁定
v-on:click=""
簡寫@click="add(1,2，$event)"帶參數,最後一個是事件對象，
methods:{
add:function(a,a1，event){
三個參數是傳遞的值。
};
add1:function(event){如果事件直接綁定函數名，傳遞的事件對象默認作爲函數的第一個參數。
}
}
事件修飾符：
v-on:click.stop=""阻止冒泡
v-on:click.prevent=""阻止默認行爲
按鍵事件修飾符：v-on:keyup.enter=""用鍵盤的enter鍵出發事件
v-on:keyup.delete=""用鍵盤的delete鍵出發事件
可以自定義按鈕修飾符：Vue.config.keyCodes.名字（隨便起）=112（這個數字是鍵盤上的鍵盤碼keyCode）
***屬性綁定
v-bind:href="這裏放data中的數據，動態的設置屬性值"
:href=""和上面的是同一個意思。
***樣式綁定
v-bind:class="{樣式：控制數據，樣式：控制數據}"
v-bind:class="[,]"
v-bind:style=""
***分支循環結構
分支：v-if（是否渲染到頁面）
v-else
v-else-if 多個判斷
v-show:單獨控制是否顯示。（已經渲染到了頁面，如果一個元素頻繁顯示和隱藏，就用這個）
循環：v-for="item in list" 元素item、list數組
v-for="(item,index) in list" index是元素索引。
:key='item.index' v-for='(item,index) in list' 加上 :key可以提高性能。
遍歷對象：v-for='(value,key,index) in obj' 值、鍵、索引（value、key、index名字可以自己起）
***Vue常用特性
表單修飾符：v-model.number="age"吧默認值轉換爲數值；
v-model.trim=" fd "去掉開始和結尾的空格
v-model.lazy="msg" 將input事件切換成change事件（change事件是失去焦點的時候才觸發）。
自定義指令：Vue.directive('指令名稱focus'，{
inserted：function(參數el，參數bindding){
el表示指令綁定的元素，el.focus（）;
bidding中可以獲取到參數的值
}
});
使用的時候要寫成這樣：v-focus;
計算屬性：吧模版中複雜的表達式操作抽離出來，使用的時候在差值表達式中直接使用reverseString
computed:{
reverseString:function(){
reuturn this.msg.split("")
}}
計算屬性是基於依賴（data中的數據）緩存的，methods中的方法每次都重新執行。
偵聽器：watch:{
msg:function(val){
val就是msg的最新值，只要有變動，這裏就能監聽到
}
}
過濾器：作用是格式化數據；
Vue.filter("過濾器名稱"，function（value）{
return val.charAt(0).toUpperCase()+val.slice(1);具體要處理的過程
})
局部顧慮器：filters:{
"過濾器名稱":function（value）{
return val.charAt(0).toUpperCase()+val.slice(1);具體要處理的過程
}
}
帶參數的過濾器：value就是過濾器傳遞過來原來的值，從第二個參數開始就是過濾器攜帶的參數，可以有很多個，
{{msg | 過濾器名稱（參數1，參數2） }}下面的arg1對應的就是參數1，arg2對應的就是參數2；
Vue.filter("過濾器名稱"，function（value，arg1，arg2）{
return val.charAt(0).toUpperCase()+val.slice(1);具體要處理的過程
})
過濾器使用：{{msg | 過濾器名稱 }}可以跟多個過濾器，級聯操作。
綁定屬性的時候也可以使用過濾器，:abc="msg |過濾器"
生命週期：掛載：初始化相關屬性；更新：；銷燬：；
變異數組（原來的數組會改變）、替換數組（會形成一個新的數組，原來的數組內容不變）。
數組響應式變化：Vue.set(要處理的數組，索引，值)；
vm.$set(要處理的數組，索引，值)；
mounted:{ }該生命週期函數被觸發的時候，模板已經可以使用過，此時一般用於獲取後臺數據，填充到模板。
***組件化
規範：Web Components
全局組件註冊：Vue.component(“組件名稱”，{
data:function(){
return {
msg:0}
}，
template:組件模板內容'<button @click="">點擊{{msg}}</button>',
methods:{
handle:function(){
}
}
})
data必須是一個函數，組件模板內容必須是單個根元素，最外層不能有兄弟元素。
組件模板內容可以是模板字符串(需要es6提供支持);
如果使用駝峯式命名組件，只能在字符串模板中使用駝峯式，但是在普通標籤模板中可以使用短橫線的方式（首字母都是小寫，中間用短橫線隔開）。
局部組件註冊：var componentA={ }
在new Vue{ components:{
hello-world:componentA,
}}中註冊組件；
局部組件只能在父組件中使用。
Vue調試工具用法：Devtools；要安裝到chrome的擴展中。
組件間數據交互：
父組件向子組件傳遞：父組件中:<自定義組件 :父組件屬性=“data中的數據”>子組件中的props:["父組件的屬性"]中獲取；如果在props中使用駝峯形式，模板中需要使用短橫線。
props支持的數據類型：Strings、number、boolen、數組、對象
子組件向父組件：props傳遞數據是單向的，只允許父組件向子組件傳遞，不允許子組件中操作父組件的數據。
通過自定義事件向父組件傳值：在子組件中@click='$emit("事件名稱"，參數)',也可以在方法中觸發，this.$emit("事件名稱"，參數);在父組件中監聽：@事件名稱=“方法名($event)”，$event接收子組件傳遞的參數；
兄弟組件傳值：事件中心管理組件間的通信；
事件中心var eventH=new Vue();
事件監聽evenH.$on('事件名稱'，方法)，evenH.$on('one-even'，(val)=>{ })，這個事件放在生命週期函數中mounted；
evenH.$off('事件名稱')；
事件觸發evenH.$emit('事件名稱'，參數)；
組件插槽：父組件向子組件傳遞模板的內容；<slot></slot> 寫在子組件的template中，插槽的內容是在組件標籤之間的值傳遞過來的。
具名插槽：<slot name="插槽名稱"></slot> 沒有匹配名稱的全部放到<slot>中,有多條內容時可以用<tempate slot="">包裹一下。
作用域插槽：父組件可以對子組件的內容加工處理；
***前後端交互模式
接口調用的方式：原生ajax、基於jQuery的ajax、fetch、axios；
JS異步編程有三種：定時任務、ajax、事件函數。
Promise：用來處理異步編程，是一個對象，可以獲取異步操作的消息。promise對象中調用resoleve（）和reject（），在then中處理返回的數據，多次發送請求，通過鏈式調用then的形式。
then參數重的函數返回值，如果返回的是Promise實例對像，就會調用下一個then；如果返回的是普通值，就會傳遞給下一個then，通過then參數中函數的參數接收。
p.then（）得到異步任務的結果
p.catch（）捕獲異常
p.finally（）不管成功與否，都會執行
Promise.all([p1,p2,p3]).then(function(result){})併發處理多個任務，所有任務都執行完成才能得到結果；
Promise.race()併發處理多個異步任務，只要有一個任務完成就能得到結果；
fetch: fetch(url).then(data=>{}).then(data=>{return data.text();}).catch()
fetch參數：fetch(url,{method:'post',body:"uname=lis&mima=123",headers:{'Content=Type':"application/x-www-form-urlencoded"}}).then()
fetch響應結果：data.text()將返回值處理成字符串；data.json()將返回值處理成json格式；
axios:第三方的js庫，axios.get(url,{params:{ id:"dd"}}).then(ret=>{ ret.data});data屬性是固定的；可以第二個參數寫到外面，用new URLSearchParams().append('aaa','bbb')的形式傳遞；
axios返回的信息：data、header、status
axios的全局設置：axios.default.timeout=3000;超時時間；
axios.default.baseURL='http://sssss';配置基準的Url，後面url可以簡寫。
axios.defaults.headers['mytoken']='hello';驗證作用（跨域的接口，需要後臺配置）
axios請求攔截器：在請求之前設置一些信息；
axios.interceptors.request.use(function(config){config.headers.mytoken='dd';return config;},function(err){ })
axios響應攔截器：在數據返回之前做一些處理；
axios.interceptors.response.use(function(res){return res;},function(err){ })
async：是es7的新語法；用在函數上；await：用在async函數內部；
async function que(id){
var ret=await axios.get(url);
await後面也可以跟一個Promise；ret=await new Promise(function(resolve,reject){})
return ret.data;
}
que.then(function(data){ })
async/await處理多個異步請求：
***Vue前端路由
路由本質就是對應關係；後端路由是更具不同用戶URl返回不同的內容。前端路由根據不同的用戶事件顯示不同的內容，是用戶事件和事件處理函數之間的對應關係。
前端路由基於URL中的hash值改變，來控制路由。
window.οnhashchange=function(){
location.hash;
}
Vue Router是官方路由管理器；
路由的基本使用步驟：引入庫文件（先引入vue，再引入VueRouter）；添加路由router-link to="/user" 和to="/register"鏈接；添加路由填充位置router-view，將來都會被渲染到router-view中；定義路由組件（定義User和Register組件）；配置路由規則並創建路由實例router；把路由掛載到Vue根實例中，在Vued對象中添加router：router。
var router =new VuewRouter({
routers:[{path:'/user',compontent:組件對象名User},{path:'/register',compontent:組件對象名Register}]path的值必須是上面router-link 中的user；
})
路由重定向：{path:'/',redirect:'/user'}],如果訪問的是/，就重定向到/user路徑。
嵌套路由：
動態路由匹配：也就是路由傳遞參數；path="/user/:id"；:id是動態參數；通過$router.params.id來匹配路由。
也可以使用props傳參數；1.動態參數props：true;開啓路由傳參數，需要在組件中用props：['id']接收；2.靜態參數props:[uname:'lisi',age:'12']，組件中需要用props:[‘uname’,‘age’]接收；3.動態參數和靜態參數結合props：route=>({uname:'',id:route.params.id})；
命名路由：給路由規則起別名；name：‘user’；
編程式導航：通過點擊鏈接實現導航叫做聲明式導航；通過jsa中api實現的導航叫做編程式導航；
this.$router.push('hash地址')；跳轉到
this.$router.go(-1);表示返回到上一個頁面；
***前端工程模塊化
模塊化的相關規範：解決命名衝突，文件依賴的問題。
瀏覽器段的模塊化規範：AMD、CMD。過時了。
服務器端的模塊化規範：CommonJS（但文件模塊和包）；
ES6模塊化規範：是瀏覽器端和服務端通用的模塊化規範。每一個js文件都是一個獨立模塊；導入模塊成員使用import關鍵字；暴露模塊成員使用export關鍵字。
注意：每一個文件中只能使用一個export default;
默認導出、導入；export default{ }; import m from './m.js'
按需導出、導入；export let a=""; import {a} from './m.js' ;如果起了別名，使用的時候只能使用別名纔有效。
直接導入：import './m.js' 不需要暴露，直接執行其中的代碼；
***webpack前端項目打包工具，
基本使用：
配置webpack打包的入口和出口：默認的是在src下的index.html 出口爲dist下的main.js；
如果要修改打包的入口和出口，在webpackage.config.js中修改entry:path.join('','') 、output:{ path:,filename:輸出文件名稱}
配置自動打包功能：
自動打包的相關參數：
配置生成預覽頁面：
webpack中的加載器：webpack默認只能打包以.js結尾的模塊，loader可以打包非js模塊；less-loader可以打包.less
相關的文件。
配置postCSS自動添加css的兼容性前綴：
打包樣式表中的圖片和字體文件：
打包js中的高級語法：
***Vue單文件組件
後綴.vue;每一個單文件都由template模板呢、script業務邏輯、style樣式三部分組成。
<template> </template>
<script> export default{
data(){
return {};
},
methods:{}
}</script>
<style scoped> </style>加入scoped可以防止組件間的樣式衝突
webpack配置vue組件加載器：
在webpack中使用Vue：
webpack整體打包：
***Vue的腳手架：官網：cli.vuejs.org/zh/
腳手架就是一個命令行工具；
安裝腳手架：npm install -g @vue/cli
腳手架的基本使用：命令行vue create my-project、命令行vue ui;
腳手架生成的項目結構分析：
Vue腳手架的自定義配置：可以通過package.json配置（主要用來包管理配置）；還可以在vue.config.js中配置（推薦）；
Element-UI的使用：http://element-cn.eleme.io/#zh-CN網站快速生成；桌面端組件庫；
***VueX:是組件全局狀態管理的一種機制，可以實現組件間數據的共享；存儲在VueX中的數據都是響應式的，能夠保持數據與頁面的實時同步。
一般組件之間需要共享的數據才需要存儲到vue，對於私有數據存儲在組件自身的data中。
VueX的基本使用：安裝依賴包：npm install vuex --save；導入Vuex包：import Vuex from 'vuex' Vue.use(Vue);創建store對象var store=new VueX.store({state:{裏面存儲全局共享的數據},mutations:{},actions:{}})；將store實例對象掛載到vue中（在new Vue({ store})）；
創建.prettierrc文件可以配置使用雙引號還是單引號、結尾是否要分號。
組件中訪問state中數據：方式一：this.$store.state.count;方式二：import {mapState} from ‘vuex’ ， computed:{...mapState(['count'])}使用的時候在插值表達式中直接寫count就可以了。
Mutation:變更Store中的數據；mutations:{add(state){}定義個add函數，可以拿到state的值，然後變更相應的值。}
在組件中觸發mutation：方式一：this.$store.commit('add');方式二：import {mapMutations} from ‘vuex ，methods:{...mapState(['add函數名']),this.add調用執行}
mutation傳遞參數：mutations:{add(state，參數){}，參數是觸發的時候傳遞過來的；this.$store.commit('add'，傳遞的參數);
注意：在mutaions函數中不要執行異步的操作。
Action：處理異步操作。在action中要通過觸發mutation間接變更數據。addAsync（context）{setTimeout(()=>{context.commit('add是mutation中的方法'')})};在action 中不能直接修改state中的數據，如果要修改只有觸發mutaions中的函數去修改。
觸發action中的函數：方式一：this.$Store.dispatch('addAsync');方式二：import {mapActions} from ‘vuex' ，methods:{...mapActions(['addAsync函數名'])};this.addAsync調用執行.
actions異步任務攜帶參數：addAsync（context，參數）{setTimeout(()=>{context.commit('add是mutation中的方法')})}；this.$Store.dispatch('addAsync'，參數);
Getter:只是起包裝作用，用於對Store中的數據進行加工處理形成新的數據。
getters：{showNum(state){return ''dddd'}};使用getter的方式一：this.$store.showNum;方式二：import {mapGetters} from ‘vuex' ，methods:{...mapGetters(['showNum函數名'])};this.showNum調用執行.