vue遵循的模型是m v vm
（1）v-cloak:可以解決在vue文件沒加載完全之前的閃爍問題(出現{{}})
（2）v-test=“msg” 作用跟插值表達式 {{}}一樣
好處是沒有閃爍問題 因爲沒有申明{{}}
壞處是會覆蓋元素中原本的內容 插值表達式只會覆蓋{{}} 其他的位置可以保留
v-cloak, v-test都無法渲染data中的html
(3) v-html 可以渲染data中的html
（4）v-bind 用來綁定原生的屬性和自己定義的data -----------簡寫 ：
會把賦入的值當作一個表達式來做 也就可以定義傳入data後的操作(你傳入的data當作片一個變量)
也可以用來綁定自定義屬性—用來父子組件傳值使用
（5）v-on 綁定事件 配合vm層的methods方法 ------縮寫：@ 也可以用來在父子組件之間傳遞methods 在template實例的組件中methods中定義方法時調用this.$emit(‘父組件中傳給子組件綁定的方法名’，參數)
------------emit可以達到父子組件雙向傳遞data的作用
在函數的調用中 如果使用了setinterval這種函數
使用() => {} 箭頭函數裏頭的this 指向的是setinterval外的this 就可以拿到vm層的數據了～ 箭頭函數解決了內部this實例和外部this實例的指向問題
v-on:click.stop 阻止冒泡
.prevent 阻止默認行爲
.capture 改冒泡爲捕獲機制
.self 只有觸發當前元素纔會觸發 冒泡捕獲不會觸發
.once 只觸發一次 .once.prevent只觸發一個阻止默認行爲
@keyup .enter 在按鍵的時候觸發 並且是回車鍵的時候觸發
Vue.config.Keycodes.變量名= 你要定義的按鍵在js中特定的值 定義全局按鍵修飾符
（6）雙向數據綁定：v-model 不需要寫成v-model:value之類的 只能用在表單元素中
v-bind只能綁定m 到 v
（7）:class綁定css
:class=“[‘a’,‘b’]” 直接傳遞一個數組，可以在數組中使用三元表達式 也可以用對象 {'class類名 '：true}
:class="{a:true,b:false}" 這是使用對象的形式 所以可以在data中定義這個對象進行引用
（8） ：style="{color:red,}"
:style="[對象1,對象2]“綁定data中定義的多個對象
（9）v-for=”(item,index) in data中定義的數組" 遍歷數組輸出
v-for="(value,key,index) in data中定義的對象" 遍歷對象輸出其中的健值對
可以放普通數組 對象數組 對象 數字(遍歷數字)
在for中利用 :key="item.id"來保證數據的唯一性 綁定id的checkbox跟內容
key利用的是diff算法：
根據dom生成虛擬dom 虛擬dom某個節點數據改變後生成一個新的node 這個node和舊的node進行對比 發現不一樣的就在真是的dom上面修改 然後舊 的dom改成新的dom ，diff就是比較新舊節點的patch函數的調用過程
（10）v-if 每次重新刪除或者創建元素 缺點是頻繁切換會有效率問題
v-show 切換display屬性 缺點是從不顯示元素也會渲染和加載
（11）過濾器 使用：{{msg| 你定義的過濾器(可傳參)}} 可以在最終輸出前用來過濾或者更改你的數據， 可以加多個 | 過濾器 一個一個執行
定義過濾器 ： Vue.filter(過濾器的名字,function(){})
全局過濾器 所有的vm實例都可以共享
在vm實例中寫filters定義私有過濾器 私有過濾器優先級更高，就近
（12）Vue.directive 定義全局指令 通過v-調用 默認提供了幾個鉤子函數 在這些鉤子函數中進行你所要的方法的調用，例如定義了聚焦函數 在inserted裏調用focus 用v-focus進行調用（利用Vue.directive在鉤子函數上調用原生js的方法來自定義v-標籤 ）
和行爲有關的定義在insetred中 和樣式有關的定義在bind中
兩個參數 ： 1是js的原生對象 2是binding 可以獲取參數
如果直接 函數名：function 等同於把代碼寫到了bind和update中去
在vm中設置directives屬性定義私有指令
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
vue的生命週期
1創建一個vue實例對象
2init lifecycle
3beforecreate： data和methods的函數都沒有初始化
4init reactivity此時data methods初始化好
5created
6在內存中渲染好dom模版 但是還沒有渲染到頁面上去
7beforemount 頁面中元素還沒有被替換成真實數據 只是模版
8將內存中編譯好的模版替換到瀏覽器中去
9mounted 可以看到渲染好的頁面了 即可以獲取到頁面上的數據 mounted過後表示實例完全創建好了
想通過dom操作頁面節點最早要在mounted
-----創建階段結束 進入運行階段-----
10只有數據改變纔會觸發：
beforeupdate 數據被更新了 但頁面還沒有被更新
update 頁面已經重新渲染了
11beforedestroy vue實例從運行階段進入銷燬階段 vue實例身上的所有data methods 過濾器 指令都處於可用狀態 還沒有真正銷燬
destroy 組建完全銷燬 所有data methods 過濾器 指令不可用
**
使用axios發送ajax請求
**
發送get
axios.get(url,{ // 還可以直接把參數拼接在url後邊
params:{
a：‘b’
}
}).then(function(res){
}).catch(function (error) {
});
發送post
axios.post(URL, {
a：‘b，
c：‘d’
}).then(function (response) {
}).catch(function (error) {
});
axios.all 執行多個併發請求
axios.interceptor.request 請求攔截器
axios.interceptor.response 響應攔截器
**
Vue-resource實現 get post jsonp
可以用node寫個服務器 然後用jsonp動態調用 jsonp通過script調用將返回值當作js執行 所以可以讓服務器調用本地的js方法(可以從服務器傳遞參數)
**
這個插件 掛載在vue實例上：
需要說一下 .then 就是promis
Vue.http.options.root= 配置全局相對路徑
.emulateJSON = true 全局啓用emulate
**
vue組件
**
用不同的組件劃分不同的功能模塊 需要什麼功能調用響應組件即可 方便ui的重用
區別模塊化：代碼邏輯角度進行劃分的 方便代碼分層開發 保證每個功能模塊職能單一
創建全局組件：
var tm = Vue.extend({
template: 指定組件要展示的html
})
使用組件 組件模版只能有一個根元素
Vue.component(你定義的名字,tm) 並且在html頁面中用標籤引用即可 駝峯變成小寫 -
Vue.component(你定義的名字,{template:html})
推薦使用 Vue.component(你定義的名字,{template:‘#id’}) 在vm實例引用的html元素外定義template 並定義id 就可以在vm實例引用的html元素中使用了
也可以在vm實例中利用 components定義私有組件
組件可以定義data 如上圖 必須是一個返回對象的函數 這個data就可以在template的html中{{}}使用
組件中也可以有methonds 但是只能有一個data對象
通過函數返回的目的： 組件可以多次引用 會有共享內存問題 更改一次就全部被引用的數據都更改了 通過函數返回就可以獨立變量 所以return的時候不要用在data外定義的全局變量對象 而是在data function中定義一個對象{}返回
也可以用 component標籤 :is = ""來引用 :is=可以放字符串 也可以放變量 就可以選擇任意一個component
組件傳值
子組件中默認訪問不到父組件中data上的數據和methods方法(即vm實例中的component無法訪問vm實例的 只能訪問自己的額)
要想使用： 在組件標籤中利用v-bind自定義一個屬性傳遞值給子組件
在子組件中的props屬性中定義:['自定義的值']來申明一下纔可以使用
-----props中的數據是建議只讀的 data的是可讀可寫的
vm實例的$ref
在html元素上綁定ref 組件也可以通過ref進行引用
使用this.$.ref.綁定的值 可以獲取相對應的dom節點 (可調用.innerHTML之類的方法)
可以用來父子之間傳遞值和方法使用！～
**
單頁面應用程序路由hash(#)
實現不同頁面之間的切換
並且http請求中不會包含有hash的內容
路由 vue-router 用script引入自動安裝 window全局對象中就會有一個路由的構造函數
導入包後頁面自動出現#/
**
（1）new VueRouter({})創建路由對象
routes 路由匹配規則
（2）在vm實例中 通過 router屬性關聯 可以直接寫router對象自動解析成健值對
（3）在頁面上放置router-view標籤 一個router-view就配置一個路由組件 多個就配置同樣的多個路由組件 不需要放模版的標籤-------在使用模版裏面也使用路由的時候 模版裏面也需要router-view 但是注意不可以把模版裏面的路由寫成平級的 在父路由的path裏面寫children屬性配置子路由(路由寫成平級的 切換一個路由 會清除子組件全部內容重新加載新的路由)
用a標籤跳轉的時候記得相對地址加上#，也可以使用router-link to屬性來跳轉 不用加# 渲染出來的結果也是a標籤 利用tag屬性更改渲染出來的標籤 例如改成span
****可以直接加？攜帶參數***
可以用redirect修改hash值的指向 和後端的重定向不一樣
------------------------------------------
點擊的標籤默認會有.router-link-active
可以在構造器中和routes並行的屬性 linkActiveCLass來重新自定義
---------------------------------------------
可以在template的html中{{$route.query.你要的屬性}}來拿到傳遞的參數 重點在於$route對象
可以更改path爲 /login/:屬性 通過this.$route.params.屬性 獲取 這種傳遞方式類似restful風格
------------------------------------------
路由path裏面的component改成components可以配置多個
然後需要在router-view中配置name屬性配置成你多個的component鍵 就可以一次性展現多個
**
watch
監視data中的數據 改變的時候觸發函數
缺點：每一個data需要定義一個方法
優點：可以監視路由(或者其他非dom元素)的事件
**
data中的屬性：function(第一個參數是新的值，第二個參數是舊的值){}
監聽非dom元素 例如路由：
對象鍵寫成 '$route.path'即可
**
computed
計算屬性 跟在data中定義的屬性一樣 只不過通過函數function進行返回
具有緩存
**
不需要加()調用 當作普通屬性使用即可
只要計算屬性內部的任何data數據發生變化 就會重新計算這個屬性
只計算一次 多次引用的部分使用的緩存
跟watch的區別：一定要return一個值
**
nrm
提供npm命令的淘寶鏡像 cnpm鏡像、
注意安裝nrm后里頭的只是提供了一個地址 而不是對應的工具
**
npm i nrm -g安裝 安裝好後 默認就是cnpm鏡像 通過nrm ls查看
nrm use 切換 切換後使用npm的時候地址就會是相對應的地址而不是npm的地址(比較慢)
**
webpack
用來解決css和js在頁面中因爲script link引入而多次請求導致的效率問題-----默認只能打包js
基於node.js的前端項目構建工具
安裝jquery ：npm init -y
npm i jquery -s 會產生一個node_modules
**
(1)全局安裝：
npm i webpack -g
（2）只需要一個main.js
import $ from 'jquery' 類似node的const $ = require('jquery') -------------jquery向外暴露了$模塊 所有纔可以 跟css不一樣
（3）瀏覽器解析不了es6 要用webpack打包(並沒有熱部署 改了代碼要重新打包)
webpack 源main.js的地址 目的地址 經過webpack進行打包處理
瀏覽器纔可以識別(可以處理兼容問題) 並且可以處理js文件間的互相依賴關係
---------------------------------------
在項目根目錄下配置webpack.config.js
利用node裏面路徑操作path模塊 對外暴露webpack打包路徑 就可以直接使用webpack命令不用加地址進行打包
熱部署自動打包：webpack-dev-server
安裝： npm i webpack-dev-server -D
npm run dev
就像nndemon可以無縫執行node一樣
webpack-dev-server可以無縫執行 新生成的bundle.js 是在內存中的而不是磁盤上 默認在項目根目錄上
**
html-webpack-plugin插件
在內存中生成一個指定路徑頁面的內存頁面—效率
自動寫一個script引入經過webpack打包後生成的內存中的bundle.js
**
cnpm i html-webpack-plugin -D
用require("html-webpack-plugin") 導入插件
在plugins屬性中註冊 構造參數中使用templtae:path.join（） 指定模版頁面
----生成內存中的頁面
生成的內存中的頁面會自動在底部script標籤引入內存中的bundle.js(htmlwebpackplugin幫我們追加的)
**
webpack處理css
因爲css沒有對外暴露模塊 所以直接import css路徑即可
webpack默認只能打包js 如果要處理非js文件 要安裝第三方loader加載器
**
css：
(1) cnpm i style-loader css-loader -D
(2)在webpack.config.js文件中的module屬性中配置rules數組屬性{test:/\.css$/,use::['style-loader','css-loader']} 將指定路徑的css交給指定的loader來處理 按從右往左的順序loader執行 然後交給webpack打包處理最終也是輸出到bundle.js中
**
webpack處理less
**
cnpm i less -D
cnpm i less-loader -D
{test:/\.less$/,use::['style-loader','css-loader','less-loader']} 從右往左 先解析成普通樣式文件 再進行處理 最後交給webpack
**
webpack處理scss
**
cnpm i node-sass -D
cnpm i sass-loader -D
{test:/\.scss$/,use::['style-loader','css-loader','scss-loader']}