Vue.js2+AJAX+過渡動畫+Router+其他
阿新 • • 發佈：2018-12-17
Vue.js+AJAX+過渡動畫+Router+其他
一、AJAX
1. 簡介
vue本身不支援傳送AJAX請求，需要使用vue-resource、axios等外掛實現
axios是一個基於Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時不再對vue-resource進行更新和維護
參考：GitHub上搜索axios，檢視API文件
2. 使用axios傳送AJAX請求
2.1 安裝axios並引入
npm install --save axios 也可直接下載axios.min.js檔案 在元件中引入。。。 import axios from 'axios';
2.2 基本用法
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本身並不支援傳送跨域的請求，沒有提供相應的API，作者也暫沒計劃在axios新增支援傳送跨域請求，所以只能使用第三方庫
3. 使用vue-resource傳送跨域請求
3.1 安裝vue-resource並引入
cnpm install vue-resource -S
3.2 基本用法
使用this.$http傳送請求 this.$http.get(url, [options]) this.$http.head(url, [options]) this.$http.delete(url, [options]) this.$http.jsonp(url, [options]) this.$http.post(url, [body], [options]) this.$http.put(url, [body], [options]) this.$http.patch(url, [body], [options])
二、過渡和動畫
1.過渡
-
使用場合
- v-if
- v-show
- 動態元件
- 元件根節點
-
使用方法
使用transition元件實現
-
動畫類名（6種）
-
鉤子函式（8種）
-
第三方動畫庫的用法
- 自定義過渡樣式類名(6種) + 第三方庫中的動畫名
<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight"> <p v-if="show">hello</p> </transition>- 多元素動畫 使用transition-group包含多個元素，並設定不同的key值
<transition-group name='fade'> <p class='trans' v-show='flag' :key='1'></p> <p class='trans' v-show='flag' :key='2'></p> </transition-group>
-
2.動畫
用法與過渡相同
三、 vue-router路由
1. 簡介
下載路由元件 參考
cnpm install vue-router -S
2. 基本用法
-
頁面佈局
- router-link
- router-view
<div> <router-link to="/home">主頁</router-link> <router-link to="/user">使用者</router-link> </div> <div> <router-view></router-view> </div> -
配置路由
-
路由設定
-
路由例項
- mode
- history
- linkActiveClass
-
路由注入
var Home = {template:'<h1>我是首頁</h1>'} var News = {template:'<h1>我是新聞</h1>'} //1.配置路由 const routes = [ {path:'/home',component:Home}, {path:'/news',component:News} ] //2.路由例項 const router = new VueRouter({ routes:routes, mode:'history', linkActiveClass:'active' }) //3.注入路由 new Vue({ el:'#d1', router:router })
-
3. 路由巢狀和引數傳遞
傳參的兩種形式：
a.查詢字串：login?name=tom&pwd=123
{{$route.query}}
b.rest風格url：regist/alice/456,path指定路由引數名和位置
{{$route.params}}
var Login={
template:'<h4>使用者登陸。。。獲取引數：{{$route.query}},{{$route.path}}</h4>'
}
var Regist={
template:'<h4>使用者註冊。。。獲取引數：{{$route.params}},{{$route.path}}</h4>'
}
4. 路由例項的方法
<script>
import router from './router'
export default {
name: 'App',
methods:{
goPerson() {
// router.push('/home');
//router.push() 新增路由，功能上與<route-link>相同
//router.replace() 替換路由，不產生歷史記錄
router.push({ name: 'person', params: { id: 66666 }})
}
}
}
5. 路由結合動畫
四、 單檔案元件
1. .vue檔案
.vue檔案，稱為單檔案元件，是Vue.js自定義的一種檔案格式，一個.vue檔案就是一個單獨的元件，在檔案內封裝了元件相關的程式碼：html、css、js
.vue檔案由三部分組成：<template>、<style>、<script>
<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就是一個模組載入器，所有資源都可以作為模組來載入，最後打包輸出
[官網](http://webpack.github.io/)
webpack版本：v1.x v2.x
webpack有一個核心配置檔案：webpack.config.js，必須放在專案根目錄下
4. 示例，步驟：
4.1 建立專案，目錄結構 如下：
webpack-demo |-index.html |-main.js 入口檔案 |-App.vue vue檔案 |-package.json 工程檔案 |-webpack.config.js webpack配置檔案 |-.babelrc Babel配置檔案
4.2 編寫App.vue
4.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 css-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.4 編寫main.js
4.5 編寫webpack.config.js
4.6 編寫.babelrc
4.7 編寫package.json
4.8 執行測試
npm run dev
五、 vue-cli腳手架
1. 簡介
vue-cli是一個vue腳手架，可以快速構造專案結構
vue-cli本身集成了多種專案模板：
simple 很少簡單
webpack 包含ESLint程式碼規範檢查和unit單元測試等
webpack-simple 沒有程式碼規範檢查和單元測試
browserify 使用的也比較多
browserify-simple
2. 示例，步驟：
2.1 安裝vue-cli，配置vue命令環境
cnpm install vue-cli -g
vue --version
vue list
2.2 初始化專案，生成專案模板
語法：vue init 模板名 專案名
2.3 進入生成的專案目錄，安裝模組包
cd vue-cli-demo
cnpm install
2.4 執行
npm run dev //啟動測試服務
npm run build //將專案打包輸出dist目錄，專案上線的話要將dist目錄拷貝到伺服器上
3. 使用webpack模板
vue init webpack vue-cli-demo2
ESLint是用來統一程式碼規範和風格的工具，如縮排、空格、符號等，要求比較嚴格
問題Bug：如果版本升級到node 8.0 和 npm 5.0，控制檯會報錯：
GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
解決方法：
a)降低Node版本到7.9或以下
b)修改build/dev-server.js檔案，如下：
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat:2000 //新增此行
})
參考：https://github.com/vuejs-templates/webpack/issues/731
六、 Elment UI
1. 簡介
Element UI是餓了麼團隊提供的一套基於Vue2.0的元件庫，可以快速搭建網站，提高開發效率
ElementUI PC
MintUI 移動端
2. 快速上手
2.1 安裝elment ui
cnpm install element-ui -S
2.2 在main.js中引入並使用元件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //該樣式檔案需要單獨引入
Vue.use(ElementUI);
這種方式引入了ElementUI中所有的元件
2.3 在webpack.config.js中新增CSS和字型的載入設定
CSS樣式和字型圖示都需要由相應的loader來載入，所以需要style-loader、css-loader
預設並沒有style-loader模組，所以需要單獨安裝
cnpm install style-loader --save-dev
rules: [
{
//CSS樣式檔案的載入
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
//字型檔案的載入
test:/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader:'file-loader'
},
]
2.4 使用less
<style>中新增lang='less'屬性，此時樣式按less檔案處理
安裝loader，需要兩個：less、less-loader
cnpm install less less-loader -D
在webpack.config.js中新增loader
2.5 常用元件
- 佈局（24柵格）
- 圖示
- 表單元素
- 上傳檔案
- 。。。
3. 按需引入元件
3.1 安裝babel-plugin-component
cnpm install babel-plugin-component -D
3.2 配置.babelrc檔案
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
3.3 只引入需要的外掛
七、自定義外掛
1.外掛（全域性元件）是指可以在main.js中使用use方法進行全域性引入的元件，如vue-router
2.外掛的自定義方法
+ 建立普通元件
+ 建立js檔案，引用該元件
+ 匯出時，提供install方法
```
import Login from './Login.vue'
export default{
install:function(Vue){
Vue.component('Login',Login)
}
}
```
+ main.js中載入並呼叫Vue.use方法使用該外掛
八、 Vuex
1. 簡介
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
簡單來說，用來集中管理資料，類似於React中的Redux，都是基於Flux的前端狀態管理框架
2. 基本用法
2.1 安裝vuex
cnpm install vuex -S
2.2 建立store.js檔案，在main.js中匯入並配置store.選項
import store from './store.js'
new Vue({
el: '#app',
store,
render: h => h(App)
})
2.3 編輯store.js檔案
Vuex的核心是Store(倉庫)，相當於是一個容器，一個store例項中包含以下屬性的方法：
state 定義屬性（狀態、資料）
getters 用來獲取屬性
actions 定義方法（動作）
commit 提交變化，修改資料的唯一方式就是顯式的提交mutations
mutations 定義變化
注：不能直接修改資料，必須顯式提交變化，目的是為了追蹤到狀態的變化
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//定義屬性（資料）
var state={
count:6
}
//定義getters
var getters={
count(state){
return state.count;
},
isEvenOrOdd(state){
return state.count%2==0?'偶數':'奇數';
}
}
//定義actions，要執行的操作，如流程判斷、非同步請求等
const actions = {
increment(context){//包含：commit、dispatch、state
console.log(context);
// context.commmit()
},
// increment({commit,state}){
// commit('increment'); //提交一個名為increment的變化，名稱可自定義，可以認為是型別名
// },
decrement({commit,state}){
if(state.count>10){
commit('decrement');
}
},
incrementAsync({commit,state}){
//非同步操作
var p=new Promise((resolve,reject) => {
setTimeout(() => {
resolve();
},3000);
});
p.then(() => {
commit('increment');
}).catch(() => {
console.log('非同步操作');
});
}
}
//定義mutations，處理狀態（資料）的改變
const mutations={
increment(state){
state.count++;
},
decrement(state){
state.count--;
}
}
//建立store物件
const store=new Vuex.Store({
state,
getters,
actions,
mutations
})
//匯出store物件
export default store;
2.4 編輯App.vue
在子元件中訪問store物件的兩種方式：
方式1：通過this.$store訪問
方式2：通過mapState、mapGetters、mapActions訪問，vuex提供了兩個方法：
mapState 獲取state
mapGetters 獲取getters
mapActions 獲取actions
<script>
import {mapState,mapGetters,mapActions} from 'vuex'
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
//方式1：通過this.$store訪問
/*computed:{
count(){
return this.$store.state.count;
}
}*/
/*computed:mapState([
'count'
]),*/
computed:mapGetters([
'count',
'isEvenOrOdd'
]),
methods:mapActions([
'increment',
'decrement',
'incrementAsync'
])
}
</script>
3. 分模組組織Vuex
|-src
|-store
|-index.js
|-getters.js
|-actions.js
|-mutations.js
|-modules //分為多個模組，每個模組都可以擁有自己的state、getters、actions、mutations
|-user.js
|-cart.js
|-goods.js
|....