1.vue簡介，vue是一(yi)個構建(jian)用(yong)戶界面的框架。是一(yi)個輕量級mvv框架，和(he)angular一(yi)樣是所謂的雙(shuang)向數(shu)據(ju)綁定，數(shu)據(ju)驅(qu)動和(he)組件(jian)化的前(qian)端開發，通過簡單(dan)的api

實現(xian)響應(ying)式的數據綁定(ding)和(he)組合(he)試圖(tu)組件，容易上手，小巧。

2.安(an)裝(zhuang)vue-devtools插(cha)件(jian)，便于在chrome中調(diao)試(shi)vue，配置是否允許vue-devtools檢(jian)查代碼，方便調(diao)試(shi)，生(sheng)產環境設(she)置為false，vue.config.devtools = false;

vue.config.productionTip=false;阻止啟(qi)動生產消息(xi)。

3.常用指令。

v-model 雙向(xiang)數據綁定，一般用于(yu)表單元素。

v-for 對數組或(huo)對象進行(xing)循(xun)環操作，使(shi)用(yong)是v-for 不是v-repeat

v-on 用來綁(bang)定時間(jian)，用法：v-on :時間(jian) = ‘函數(shu)’

v-show/v-if 用來顯示或隱(yin)藏元素，v-show 是(shi)通過display實現，v-if 是(shi)每次刪除后在創建

4.事件和屬性

v-on:click = " 簡寫 @click=""

$event 事(shi)件對象，里面包括事(shi)件相關信息(xi)，如事(shi)件源，時間類型，偏移量等(deng)

事(shi)(shi)(shi)件冒泡(pao)，原(yuan)生js方式，依(yi)賴于(yu)事(shi)(shi)(shi)件對象，vue方式，不(bu)依(yi)賴于(yu)事(shi)(shi)(shi)件對象，@click.stop 來阻止事(shi)(shi)(shi)件冒泡(pao)；

鍵盤(pan)事件：@keydown.13 或keydown.enter

事件修(xiu)飾符 .stop 調用event.stopPropagation();

v-bind 用(yong)(yong)于屬性綁定(ding),用(yong)(yong)法 v-bind:屬性=“” 舉例(li) v-bind:src="" 簡寫 ：src=""

5。模板

vue.js 使用基于html的模板語法，將dom綁(bang)定(ding)到vue實(shi)例中的數(shu)據模板就是{{}} 用來進(jin)行(xing)綁(bang)定(ding)數(shu)據顯示在頁面中

雙向綁定 v-model

單(dan)項綁定 {{}} 可能會出(chu)現(xian)閃(shan)爍問題(ti)， 也可以使用v-text v-html

其他(ta)指令(ling) v-once 數據綁定(ding)一次(ci) v-pre 不變(bian)異，直接原樣顯示

6.過濾器

用(yong)來過濾模型數據，在顯(xian)示之前進行數據對(dui)的(de)處理和篩選

語法： {{data | filter（參(can)數） |filter（參(can)數）}}

內置過濾器，2.0之(zhi)后都(dou)刪掉，如果使用(yong)可以(yi)借助第三方庫 如lodash data-fns 日(ri)期格式化(hua) accounting.js 貨幣格式化(hua)以(yi)及自定義(yi)

7.發送ajax請求(qiu)

vue本(ben)身不支持發(fa)送ajax請求，需要使(shi)用vue-resourc axios等插件實現，建議使(shi)用axios

axios是一個(ge)基(ji)于promise的(de)http請(qing)求客戶(hu)端，用來(lai)發送請(qing)求

基本用法：

axios.get(url[,options]); 傳參(can)方(fang)式，url或(huo)者params傳參(can)

axios.post(url,data,[options]);

注(zhu)意：axios默認發送(song)數據時，數據格式(shi)是request payload，并非我們床用(yong)的form data格式(shi)，所以(yi)參數必(bi)須要(yao)以(yi)鍵值對像是傳遞

，不能(neng)以json形式傳(chuan)參

傳參的方式： 自己拼接鍵值對，使用transformrequst 在請求(qiu)發送前將請求(qiu)數據進行(xing)轉換，或者使用qs模塊進行(xing)轉換

axios不支持(chi)跨(kua)域(yu)請(qing)求，可以使用vue-resource 發(fa)送跨(kua)域(yu)請(qing)求。

跨域發送請求： this.$http.get(url,[options]); this.$http.post(url,[options]);

8.vue生命周期

vue實例從創建到銷(xiao)毀過程(cheng)成為(wei)生命周期

9。計算屬性

計算屬性也是用來存(cun)儲數(shu)據(ju)，具有這倆(lia)個特點：數(shu)據(ju)可以(yi)進行(xing)邏(luo)輯處理操(cao)作(zuo)，對計算屬性中的數(shu)據(ju)進行(xing)監視(shi)。

10.vue實例(li)屬性(xing)和方法

屬性(xing) vm.$el vm.$data vm.$options vm.$refs

方法 vm.$mount() vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm.$watch(data,callback)

11,自定義指令

自定義全局(ju)指令 vue.directive （指令id，定義對象）

12.過度（動畫）

vue在插(cha)入更(geng)新(xin)或一(yi)處dom時(shi)，提供多種(zhong)不同方式(shi)應(ying)用過程，本質(zhi)還是使用css動畫，

基本用法： 使用transition組件(jian)(jian)，將(jiang)要執行(xing)動畫的元素保函在改組件(jian)(jian)內

結合第三方(fang)動(dong)畫庫 animater.css 一起使用

<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">

<p v-show="flag">顯(xian)示內容(rong)</p>

</transition>

13.組件

組(zu)件(jian)是vue最強(qiang)大的功(gong)能之一(yi)，組(zu)件(jian)可(ke)狂戰(zhan)html元(yuan)素，封裝重用代(dai)碼，組(zu)件(jian)是自(zi)定義(yi)元(yuan)素對象。

定(ding)義(yi)組件(jian)(jian)方式，a>先創(chuang)建組件(jian)(jian)構造器，然后由組件(jian)(jian)構造器創(chuang)建組件(jian)(jian)。b>直(zhi)接創(chuang)建

引用(yong)模板講組件(jian)內容放在模板<template&gt;中(zhong)引用(yong)，組件(jian)中(zhong)數據data;function 和(he)vue實(shi)例存儲數據不同

componect :is="" 組(zu)件，多個組(zu)件使用同一個掛的點，動態切換(huan),

keep-alive 緩存組件，避免從(cong)新創(chuang)建，效率比較高

使用方法 <keep-alive><componect :is="">

數(shu)據傳遞：父子組件，在一個組件內(nei)部(bu)又定義(yi)了另一個組件，稱為父子組件。

子組件只能在付(fu)組件中使用，默認情況下(xia)，子組件不能訪(fang)問付(fu)組件數據。每個組件的作(zuo)用域(yu)是獨立的。

組件間數(shu)據的通信(xin)：在調用組件時，綁定想要獲取(qu)的付組件的數(shu)據，在子組件內部，使用props選項(xiang)來生命獲取(qu)

的數(shu)據(ju)，接收來自付(fu)組件的數(shu)據(ju)。例(li)子：props:['msg'] props可以(yi)是(shi)數(shu)組，也可以(yi)是(shi)對象props:{} 允許配置高級設計比如類型判斷

數據的(de)校驗，設置(zhi)默認值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},對(dui)象做(zuo)數組的(de)默認值，

對(dui)象必須使用函數返回(hui)。

組件中的數據有三種形式：data props computed

付組件訪問子組件數據(ju)方(fang)式：

a.在(zai)子(zi)組件(jian)中(zhong)使用vm.$emit（事(shi)件(jian)名，數據(ju)） 出發(fa)一個(ge)自定(ding)義事(shi)件(jian)，事(shi)件(jian)名自定(ding)義

b.付組(zu)件在使用子組(zu)件的(de)地方監聽子組(zu)件出發事件，并在付組(zu)件中定義(yi)方法(fa)，用來獲取數(shu)據

單項數據流：

props是單項綁定的(de)，當付組件的(de)屬性變化時(shi)，將傳導給子(zi)組件，但是不(bu)(bu)會反過來，而且不(bu)(bu)允許子(zi)組件直接

修改付組件中的數據

解決方案： a.如果(guo)子組(zu)件享把他作(zuo)為局(ju)部數據來使用，可(ke)以將數據存(cun)入另(ling)一個(ge)變量在操(cao)作(zuo)

b.如果子(zi)組(zu)件想修改(gai)數(shu)據(ju)并同(tong)步付(fu)組(zu)件，使(shi)用.sync 2.3開(kai)始支持(chi)，或(huo)者將付(fu)組(zu)件數(shu)據(ju)包裝成udixiang，

然后在子組件中修改對象的屬性。

非父子組件間通信：

可以通過一個空(kong)的vue實例(li)來作(zuo)為中央(yang)事(shi)件總線，用他來出(chu)發(fa)事(shi)件或監控事(shi)件

var Event = new Vue(); 空對象

Event.$emit(事件名，數(shu)(shu)據)； 發送數(shu)(shu)據

Event.$on(事件名，data=>{}) 監(jian)聽接收數(shu)據(ju)

slot內容分發：

用來獲取組(zu)件中的元內(nei)容，就是(shi)組(zu)件標(biao)簽中的內(nei)容；

獲得指定標簽內容可以給標簽定義 slot="s1"; 獲取(qu) <slot name="s1"/>

14.vue-router 路由(you)

使用(yong)vue.js 開(kai)發spa 單頁(ye)面(mian)應用(yong)，根絕(jue)不同url地址(zhi)，顯示不同內容，但實現(xian)在統一頁(ye)面(mian)紅，稱單頁(ye)面(mian)應用(yong)。

bower info vue-router cnpm install vue-router -S

<p id="itany">

<p>

<!-- 使(shi)用router-link組件來定義導航(hang)，to屬性(xing)指定鏈接(jie)url -->

<router-link to="/home">主頁</router-link>

<router-link to="/news">新聞(wen)</router-link>

</p>

<p>

<!-- router-view用(yong)來顯示(shi)路(lu)由內容 -->

<router-view></router-view>

</p>

</p>

<script>

//1.定義組件

var Home={

template:'<h3>我是主(zhu)頁</h3>'

}

var News={

template:'<h3>我是新聞</h3>'

}

//2.配置路由

const routes=[

{path:'/home',component:Home},

{path:'/news/:username/:password'',component:News},

{path:'*',redirect:'/home'} //重(zhong)定(ding)向

]

//3.創建路由實例

const router=new VueRouter({

routes, //簡寫，相當于routes:routes

// mode:'history', //更改模式

linkActiveClass:'active' //更新活動鏈接的class類名

});

//4.創建(jian)根實例并將路由掛載到(dao)Vue實例上

new Vue({

el:'#itany',

router //注入路由(you)

});

</script>

知識(shi)點：<style scoped> /* scoped表示(shi)該樣式只在當前組件中有效 */

路由嵌套和(he)參(can)數傳遞：

a.查詢(xun)字符串 login?name=tome&pwd=123 顯示 {{$route.query}}

b。rest風(feng)格url regist/alice/324 顯示獲(huo)取 {{$router.params}}

路由實例的方法：

router.push(); 添加路由，功能和<route-link> 相同，都(dou)是跳(tiao)轉頁面

router.replace() 替換路(lu)由(you)，和上功(gong)能(neng)一樣，不(bu)產生(sheng)歷史記錄

單文件組件：

.vue 文(wen)(wen)件(jian)稱單(dan)文(wen)(wen)件(jian)組件(jian)，是vue.js 自定義(yi)的(de)文(wen)(wen)件(jian)格式，一(yi)個.vue文(wen)(wen)件(jian)就是一(yi)個單(dan)獨的(de)毒箭，在文(wen)(wen)件(jian)內封裝了

單獨的js css html

.vue文件由三部分組成 template style script

vue-loader 瀏(liu)覽(lan)器(qi)本身(shen)不認(ren)識你.vue文(wen)件(jian)，所以必須對(dui).vue文(wen)件(jian)加載解析，此時需(xu)要(yao)vue-loaderleisi 的(de)loaderhaiyou

很多，html-loader css-loader style-loader babel-loader 需要(yao)注意vue-loader 是計劃于(yu)webpack的

webpack 是一個前(qian)端(duan)資源模塊(kuai)化加載器和(he)打包工具，

安裝相關模板：

cnpm install vue-template-compiler -D //預編(bian)譯模(mo)板

合(he)并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

運(yun)行測(ce)試： npm run dev

15.腳手(shou)架 vue-cli

vue-cli是一個(ge)vue腳(jiao)手架，可以快速構(gou)(gou)建項目結構(gou)(gou)，

常用項目模板： webpack 保函EsLint代碼么規范(fan)檢查(cha)和unit單元測試(shi)，

webpack-simple 沒有代碼(ma)檢查和單元測(ce)試

browserify 使用的也(ye)比較多(duo)

browserigy-simple

安裝vue-cli，配置vue命令(ling)環境

cnpm install vue-cli -g

vue --version

vue list

初始化(hua)項(xiang)(xiang)目，生成項(xiang)(xiang)目模板

語(yu)法：vue init 模板名 項目名

進入生成的項目目錄，安裝(zhuang)模塊包

cd vue-cli-demo

cnpm install

運行

npm run dev //啟動測試服(fu)務

npm run build //將(jiang)項(xiang)(xiang)目(mu)打包輸出dist目(mu)錄，項(xiang)(xiang)目(mu)上線的(de)話要將(jiang)dist目(mu)錄拷貝到服務器上

使用webpack模板

vue init webpack vue-cli-demo2

ESLint是用來統(tong)一(yi)代(dai)碼(ma)規(gui)范和風(feng)格的工具，如(ru)縮進、空格、符號等，要(yao)求比較嚴格

16.模塊化開發

首先在(zai)一個(ge)目錄下 vue init webpack-simple vue-cli-demo 創建項目

進入目錄 cd vue-cli-demo cmpn install 然(ran)后 npm run dev 運行測試(shi)

cmpn install vue-router -S -S是生產依賴的(de)意思；

編輯main.js import VueRouter form ''vue-router' vue.use(Vue/router); 使用之后全(quan)局都可以用

編輯(ji)(ji)app.vue 編輯(ji)(ji) router.config,js

cnpm install axios -S

使用(yong)axios倆種方式：

a.在使用axios的(de)組件中(zhong)，都要引入axios import axios from 'axios' axios.get('url').then(resp ->{resp.data});.catch(eorr->){}

b.在(zai)main.js 中全局引(yin)入(ru) import axios from 'axios' 并添加到vue原(yuan)型中 vue.prototype.$http=axios; 然(ran)后(hou)其他(ta)組件可(ke)以

vue.$http.get(); 或 this.$http.get();

為自定義組件(jian)添(tian)加事件(jian)：

比(bi)如自定一個button vue注冊 默認不能綁定@click=send 這樣寫 @click.ntaive=send 就可以

17ui庫 element ui

是(shi)一個(ge)ui的(de)組件(jian)(jian)庫，是(shi)餓了么提供的(de)一套(tao)基于vue 2.0的(de)組件(jian)(jian)庫 可以快速開發網址，提高效率

element ui pc端 mintui 移動端 官網 element.eleme.io

cnpm install element-ui -S

npm run dev

在main.js 引入并使用這個組件 import ElementUI from 'elemtn-ui' import element-ui/lib/eheme=default/index.css

vue.use(ElementUI); 這種引入方式是(shi)引入全部的(de)組件內容(rong)

在webpack.confgi.js 中添加loader test:/\.css$/,loader:'style-loader!css-loader'

cnpm instal style-loader -D 字體字庫loader配置

webpack配置更(geng)改要重啟

動態樣式 是(shi)使用less

使用less 安裝loader less less-loader 配置 test:/\.less$/,loader:less-loader 指(zhi)定style l ang=less 必須指(zhi)定樣式

自定義全局組件：

全局(ju)組(zu)件：可(ke)以在main.js 中(zhong)使用(yong)(yong)vue.use 進入(ru)全局(ju)引(yin)入(ru)，然后在其他組(zu)件中(zhong)都可(ke)以使用(yong)(yong)

創建 。vue組(zu)件，創建index.js文件 import Login from './Login.vue'

export default {

install:function(Vue){

Vue.component('Login',Login);

}

}

普通(tong)組件：每次使用都要引入(ru)，如axios

18.vuex 狀(zhuang)(zhuang)態管理模式，采用集中(zhong)式存儲，管理應用所有組件的狀(zhuang)(zhuang)態，簡單說(shuo)集中(zhong)管理數據，類似于(yu)react中(zhong)的redux，基(ji)于(yu)flux

前段狀態管理框架。

基本使用：nmp install vuex -S

創(chuang)建store.js 文件，vuex相(xiang)關(guan)配(pei)置。在(zai)main.js 中導入，import store fomr './store.js main.js 配(pei)置store選項，子組this.$store

import vue fomr vue import vuex from vuex vue.use(vuex);

vuex核心store 相當(dang)于一(yi)個容器，一(yi)個store實例中包含一(yi)下(xia)屬性和(he)方法：

getters 獲取(qu)屬性(xing)

actions 定義方(fang)法(fa) 動作，如流程判斷 異步(bu)請求 const action={ 方(fang)法(fa)名（context){}）} context 對象有(you)comit dispatch state

commit 提(ti)交的意思，修改數(shu)據唯一方式， conmit('add) 提(ti)交一個叫add的變化

mutations 定義變(bian)化

var state= { count:6} //創建store對象 const store=new Vuex.Strore{{state}}; vargetters ={count)(){return state.count}} export default store;

編(bian)輯(ji) app。js 編(bian)輯(ji)store, 作(zuo)為(wei)計算(suan)屬性：computed:(){return this.$store.state.count};

方(fang)式一 this.#store訪問 方(fang)式二 mapGetters mapActios訪問

mapGetter 獲(huo)取屬性

mapActions 獲取方法

導入輔助函數(shu) import {mapGetter} from vuex

computed:mapGetters{('count')}