常用Vue指令總結
v
| 指令 | 說明 |
|---|---|
| v-model | 雙向資料繫結，一般用於表單元素 |
| v-for | 對陣列或物件進行迴圈操作 |
| v-on | 繫結事件，用法v-on:事件=“函式” |
| v-show/v-if | 用來顯示或隱藏元素，v-show是通過display實現，v-if是每次刪除後再重新建立 |
| v-on: | 簡寫：@ |
| $event | 包含target，type，offset… |
事件物件$event
阻止事件冒泡：
1,原生js，依賴於事件物件，需要呼叫stopPropagation()方法
2,vue方式：@click.stop,不依賴於事件物件
阻止事件預設：
1，原生js：依賴於事件物件，呼叫preventDefault()方法
鍵盤事件：
回車：@keydown.13或@keydown.enter
事件修飾符：
| 名稱 | 描述 |
|---|---|
| .stop | 呼叫event.stopPropagation() |
| .prevent | 呼叫event.preventDafault() |
| .{keyCode|keyAlias} | 只當事件是從特定鍵觸發時才觸發回撥 |
| native | 監聽元件根元素的原生事件 |
| .once | 只觸發一次回撥 |
屬性繫結和簡寫
v-bind用於屬性繫結 語法v-bind：屬性=" "，簡寫為 :src|
class和style屬性：
繫結class
模板：
Vue.js使用基於HTML的模板語法，可以將DOM繫結到Vue例項中的資料
資料繫結的方式：
1，雙向繫結：v-model
2，單項繫結：a):{{}} 可能會出現閃爍的問題，使用v-cloak 需要結合css [cloak]{display:none}使用
b):使用 v-text，v-html
其他指令
v-once：資料值繫結一次
v-pre：不編譯，直接顯示
過濾器：
簡介：用來過濾模型資料，在顯示之前進行資料處理和篩選
語法：{{data | filter1 | filter2(引數)}}
vue1.0中許多內建過濾器，如：currency、uppercase、lowercase、limitby、orderby、filterBy
如何解決：
a,使用第三方工具庫，如loadash，data-fn（日期格式化），accounting.js（對貨幣進行格式化）
b,自定義過濾器，
自定義過濾器：：
分類：全域性過濾器，區域性過濾器
自定義全域性過濾器：
使用全域性方法：Vue.filter(過濾器ID，過濾器函式)
自定義區域性過濾器：
傳送AJAX請求
簡介：
vue本身不支援傳送AJAX請求，需要使用vue-resource、axios【官方推薦，vue2.0】
axios是一個基於promise的HTTP請求客戶端，用來發送請求。
基本用法：
axios([options])
axios.get(url,[options])
傳參：1，通過url傳參
2，通過params傳參
axios.post(url,data,[options])；
axios預設傳送資料時，資料格式時Request Payload，並非我們常用的form data格式
所以引數必須要以鍵值對形式傳遞，不能以json形式傳參
傳參方式：
1，自己拼接鍵值對
2，使用transformRequest，在請求傳送前將請求資料進行轉換
3，如果使用模組化開發，可以使用qs 模組進行轉換
axios本身不支援跨域請求，
使用vue-resource傳送跨域請求
vue生命週期
vue例項從建立到銷燬的過程，稱之為生命週期，共有八個階段
| 階段 | 說明 |
|---|---|
| beforeCreate | 元件剛被建立，還沒盡興資料觀測和事件配置 |
| created | 例項已經建立完成，並且已經進行資料觀測和事件配置 |
| beforeMount | 模板編譯之前，還沒掛載 |
| mounted | 模板編譯之後，已經掛載，此時才會渲染頁面，才能看到頁面上資料的展示 |
| beforeUpdate | 元件更新之前 |
| updated | 元件更新之後 |
| beforeDestroy | 元件銷燬之前 |
| destroyed | 元件銷燬之後 |
計算屬性：
1，基本用法
計算屬性也是用來儲存資料，但是有以下幾個特點
1，資料可以用來進行邏輯處理操作
2，對計算屬性中的資料進行監視。
2，計算屬性vs方法
將計算屬性的get函式定義為一個方法也可以實現類似的功能
區別：
a.計算屬性是基於他的以來進行更新的，只有在相關依賴發生時才能更新變化
b.計算屬性是快取的，只要相關依賴沒有改變，多次訪問計算屬性的到的值是之前快取存的計算記過，不會多次執行。
3，get和set
計算屬性由兩部分組成：get和set，分別用來獲取計算屬性和設定計算屬性
預設只有get，如果需要set，要自己新增
vue例項的屬性和方法
屬性：vm.
e
l
v
m
.
el vm.
elvm.data vm.
o
p
t
i
o
n
s
v
m
.
options vm.
optionsvm.refs
方法：
vm.KaTeX parse error: Expected 'EOF', got '#' at position 8: mount("#̲id") vm.destroy()
vm.
n
e
x
t
T
i
c
k
(
c
a
l
l
b
a
c
k
)
v
m
.
nextTick(callback) vm.
nextTick(callback)vm.set(object,key,value)
vm.
d
e
l
e
t
e
(
o
b
j
e
c
t
,
k
e
y
)
v
m
.
delete(object,key) vm.
delete(object,key)vm.watch(data,callback[options])
自定義指令：
分類：全域性指令、區域性指令
自定義全域性指令：Vue.directive(指令id,[definition定義物件])
自定義區域性指令：directives：{}
過度：
Vue提供了transition的封裝元件，在插入，更新或移除dom時提供不同效果的應用過度效果
基本用法：transition將要執行動畫的元素包含在該元件內。
運動的元素
過濾的css類名 6個
鉤子函式：8個
結合第三方動畫庫animate.css一起使用
<transition
enter-active-class="animate__animated animate__fadeInLeft"
leave-active-class="animate__animated animate__fadeOutRight">
<p v-show="flag">青羊區</p>
</transition>
多元素動畫
元件component
簡介：可以擴充套件HTML元素，封裝可重用的程式碼，元件是自定義元素（物件）
定義元件的方式：
方式1：先建立元件構造器，然後由元件元件構造器來建立元件
方式2：直接建立元件
元件的分類：
全域性元件
區域性元件
引用模板
將元件內容放到模板中並引用
動態元件
元件
多個元件使用同一個掛載點，然後動態的在他們之間切換
元件間資料傳遞
1，父子元件
在一個元件內部定義另一個元件，稱之為父子元件，子元件只能在父元件裡面用，
預設情況下子元件不能訪問父元件中的資料，每個元件例項的作用域都是獨立的
2，元件間資料傳遞（通訊）
子元件訪問父元件的資料：
a)：在呼叫子元件時，繫結想要獲取的父元件中的資料
b)：在子元件內部，使用props選項來宣告獲取的資料，即接收 來自父元件的資料。
注：元件中的資料總共有三種形式：data，props，computed
總結：父元件通過props向下傳遞資料給子元件
父元件訪問子元件的資料：
a)：在子元件中使用vm.$emit(事件名，資料)觸發一個自定義事 件，事件名自定義
b)：父元件在使用子元件的地方監聽子元件觸發的事件，並在父 元件中定義方法，用來獲取資料
總結：子元件通過events給父元件傳送訊息，實際上就子元件把 自己的資料傳送到父元件
單向資料流
props時單向繫結的，當父元件的屬性變化時，將傳導給子元件，但是不會反過來。而且不允許子元件直接修改父元件中的資料。會報錯。
解決方式：
方式1：如果子元件想把他作為區域性資料來使用，可以把資料存入另外一個變數再進行操作，不會影響父元件
方式2：如果子元件想修改資料並且同步更新到父元件有兩種方法
1，使用.sync() this.$emit(‘update:value’,‘newValue’) 需要顯式的觸發一個更新事件
2，可以把父元件中的資料包裝成物件，然後在子元件中修改物件的屬性（因為物件是引用型別，指向同一個記憶體空間），更推薦這個方式
非父子元件間的通訊
非父子元件間的通訊，可以通過一個空的vue例項作為中央事件匯流排（事件中心）。用它來觸發事件和監聽事件
slot內容分發：
slot本意：位置，槽
作用：用來獲取元件中的原內容。類似於angular中的translude指令
vue-router路由：
簡介：使用Vue.js開發SPa（single Page Application）單頁面應用
單頁面應用：根據不同url地址，顯示不同的內容，但顯示在同一個頁面中。
基本用法
1，進行頁面佈局 見demo
路由的巢狀和引數的傳遞
巢狀：就是在子路由下再寫一個路由，需要children[ ]
傳參的兩種形式：a:查詢字串：login?name=tom&pwd=123
{{KaTeX parse error: Expected 'EOF', got '}' at position 12: route.query}̲} b…route.params}}
路由例項的方法：
router.push()：新增路由，功能上與router-link功能相同
router.replace()：替換路由，不產生歷史記錄
單檔案元件
1，.vue檔案
.vue檔案稱之為單檔案元件，是vue.js自定義的一種檔案格式，一個.vue檔案就是一個單獨的檔案，在檔案內封裝了相關的程式碼：html、css、js、
.vue檔案由三部分組成：、
<template>
html
</template>
<style>
css
</style>
<script>
js
</script>
2，vue-loader 載入器
瀏覽器本身不認識.vue檔案，所以必須對.vue檔案進行載入解析，此時需要vue-loader
類似的loader還有很多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基於webpack的
3，webpack
webpack是一個前端資源模組化載入器和打包工具，他能夠把各種資源都作為模組來使用和處理，實際上webpack是通過不同的loader將這些資源載入後打包，然後輸出打包後的檔案。簡單來說webpack就是一個模組載入器。所有資源都可以作為模組來載入，最後打包輸出。
webpack有一個核心配置檔案：webpack.config.js，必須放在專案根目錄下
示例、步驟：
1，建立專案，目錄結構如下：
|-index.html
|-main.js 入口檔案
|-App.vue vue檔案
|-package.json 工程檔案{描述檔案，依賴呀描述資訊等等}
|-.babelrc Babel配置檔案
|-webpack.config.js webpack配置檔案
2，編寫App.vue
3，安裝相關模組
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根據配置的執行環境自動啟用需要babel外掛
cnpm install vue-template-compiler -D//預編譯模板
可以合併起來一起安裝：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
4，編寫main.js
5，編寫webpack.config.js
6，編寫.babelrc
7，編寫package.json
8，執行測試
npm run dev
vue-cli腳手架：
vue-cli快速構造專案結構
vue-cli本身集成了多種專案模板：
simple：用的很少 簡單
webpack：包含esLint程式碼規範檢查，unit單元測試等
webpack-simple：沒有程式碼規範和單元測試
browserify：更webpack差不多
browserify-simple：browserify的簡化版
示例：
1，npm install -g vue-cli，配置vue的命令環境，驗證版本命令 (不帶尖括號)<vue --version> (檢視可用模板)
2，初始化專案 vue init
3，進入生成的專案目錄，安裝模組包 cnpm install
4，執行 npm run dev 啟動測試服務，這是測試，如果在生產環境下要使用npm run bulid命令將專案進行打包dist目錄，專案上線的話要將dist目錄拷貝到伺服器上。
示例：使用webpack模板 vue init webpack demo3
Eslint使用來統一程式碼規範和風格的工具，如縮排，空格，符號等
模組化開發：
1，vue-router模組化
cnpm install vue-router -S
2，編輯main.js
3，編輯App.vue
4，編輯router.config.js
axios模組化
安裝命令：cnpm install axios -S
使用axios的兩種方式：
1，在每一個元件中引入axios
2，在main.js中全域性引用axios並新增到vue的原型中。
為自定義元件新增事件需要新增修飾符
Element UI
簡介：Element UI是餓了嗎提供的一套基於Vue2.0的元件庫，可以快速的搭建你的網站，提高開發效率。
Element UI PC端
MintUI 移動端
快速上手：
1，cnpm install element-ui -S
2，在main.js中引入並使用元件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI);
3，在webpack.config.js中新增loader，更改webpack.config.js之後要重啟伺服器，css樣式和字型圖示都需要相應的loader來載入
預設 沒有這個匹配規則
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
4，使用元件
5，使用less
安裝loader ，需要兩個：less、less-loader
cnpm install less less-loader -D
按需引入組
1，cnpm install babel-plugin-component -D
2，配置.babelrc檔案
"plugins":[
["components",[{
"librarName":"element-ui",
"styleLibraryName":"theme-default"}]
]
]
3，只引入需要的外掛
自定義全域性元件（外掛）：
全域性元件（外掛）：指可以在main.js中使用Vue.use()進行全域性引入，然後在其他元件中就可以直接使用，如vue-router
普通元件（外掛）：每次使用都要引入，如axios
Vuex
vuex是一個專門為Vue.js 應用程式開發的狀態管理模式，他採用集中式儲存管理應用的所有的元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化，簡單來說，就是用來集中管理資料，類似於React中的Redux，都是基於Flux的前端狀態管理框架
基本用法：
1，安裝vuex cnpm install vues -S
2，建立store.js檔案， 在main.js檔案中匯入（import store from ‘./store.js’)並配置store選項
3，編輯store.js檔案
專案
1，初始化專案：
vue init webpack itany
cd itany
cnpm install
cnpm install less less-loader -D
cnpm install vuex -S
cnpm install axios -S
npm run dev
2，專案資源
|-reset.css
|-data.json
3，建立目錄結構
清除專案中的部分內容
建立如下目錄結構
|-data.json
|-static
|-css
|-reset.css
4，配置api介面，模擬後臺資料
使用express框架啟動一個node伺服器，配置Api介面，模擬後臺資料
參考http://www.duanlonglong.com/qdjy/940.html
測試api http://localhost:8081/api/goods#/
5，專案整體結構開發