一. 簡介Vue
Vue.js為漸進式JavaScript框架
Vue框架為MVVM框架, 即數據源與控件雙向綁定, 在實際項目中頻繁操作DOM節點, 僅僅只需要控制數據源數據即可,不用考慮頁面渲染.
二. Vue的基本知識
Vue 2.x 框架的常用點(模板語法, 條件渲染, 列表渲染)
簡介Vue的Hello Word應用
模板語法, v-bind屬性綁定, 事件綁定
條件渲染, 列表渲染, Class與Style的綁定Vue 2.x 核心技術(vue-router, vuex)
Vue-cli工具, Vue代碼規范
Vue組件的調試方法
Vue-router, vuex集成Vue2.x
介紹workflow工作流
單頁面Demo(動態表單,列表動態展示)
使用Cli工具,開發常見的應用組件
三. Vue開發環境
IDE: WebStrom Or VS Code
Node.js: Node環境, NPM環境 (NVM, 多版本Node環境管理)
測試環境: Chrome, Vue.js
工程環境: Vue.js
終端輸入:
npm install vue-cli
完成之后 輸入
vue --version
進行查看是否安裝成功Vue環境
四. 創建第一個Vue項目
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
.bg {
color: cyan;
font-size: 30px;
font-weight: 200;
background: magenta;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.3/vue.min.js"></script>
</head>
<body>
<div id="aa" class="bg">
<div class="a">{{msg}}</div>
<div class="a">{{msg}}</div>
</div>
<script>
new Vue({
el: '#aa',
data: {
msg: "This is Vue"
}
})
</script>
</body>
</html>
模板語法:
Vue的文件結構(template, script, style);
在標簽中可使用插值語法{{msg}}, 數據, 以及JS表達式,
模板語法包含插值, 指令(指令縮寫);
v-on:click 可以簡寫為@click
v-if
:href
計算屬性與監聽器
計算屬性: computed
數據聯動, 當計算屬性中的所有的數據均發生變化的時候,響應此方法.
能監聽多個變量,但是該變量必須是在Vue中的實例里.
computed: {
msg1: function() {
return 'computed' + this.msg;
}
},
監聽器: watch
僅僅是監聽設備中的所有監聽Vue中的屬性值, 類似于iOS中的KVO.
異步場景
通常只監聽一個變量
// 監聽并觀察data的屬性數據變化,當方式變化的時候, 屬性變化新,舊值
watch: {
msg: function(newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
}
},
條件渲染
v-if,
v-else,
v-else-if,
v-show,
// v-if, v-else, v-else-if, v-show之后的為JS表達式
<div v-if="count > 10">{{msg2}}</div>
<div v-else="count < 5">{{msg3}}</div>
<div v-show="count == 10">Count的值為{{count}}</div>
列表渲染
v-for
// list為數據源, item為遍歷的數據元素, :key則是標記了此條數據的Tag值
<div v-for="(item, index) in list" :key="index">
<div>{{item}}</div>
</div>
v-for與v-if結合使用
<div v-for="(item, index) in list" :key="index" v-bind:style="styleTest">
姓名為:{{item.name}} 年齡為:{{item.age}}
</div>
v-for的高階用法
Class與Style綁定
// 可以簡寫去掉v-bind
<div v-for="(item, index) in list" :key="index" :style="styleTest">
姓名為:{{item.name}} 年齡為:{{item.age}}
</div>
// Class要綁定多個樣式使用[]進行加類的操作
<div class="['aa', 'bb']"></div>
Vue-cli工具
快速創建Vue工程
// 在終端中進入到指定的文件夾目錄
// 使用vue create demo 進行創建對應的Vue工程
// 完成之后進入demo文件夾下
// 使用 npm run serve進行運行此項目
// 或者使用vue ui進行創建新的Vue工程項目
工程化項目的目錄
// 使用vue ui來進行創建Vue工程;
// 使用vue ui工具可以對Vue項目來進行編譯運行在瀏覽器中
五. Vue組件化思想
組件化顧名思義, 為組件是獨立的,組件可復用的,整體化的組件.
組件化的目的: 實現功能模塊的復用,
高執行效率,
開發單頁面復雜應用,可以將復雜的業務邏輯進行拆分
如何拆分復雜的業務邏輯
組件的代碼不超過300行,
復用原則,
業務復雜性原則,
vue-router:
使用vue create命令進行創建Vue工程
vue組件創建
<template>
<div>This is a component</div>
</template>
<script>
export default {
};
</script>
<style scoped>
</style>
在vue-router文件中進行相對應的組件配置:
{
path: '/new',
name: 'new',
component: newPage,
},
最終在App.vue中進行配置點擊鏈接跳轉組件
<router-link to="/new">New</router-link>
組件間的狀態管理
Vuex
多組件的混合使用,多頁面,復雜業務(vue-router)
組件間的傳參,消息,事件管理(props, emit/on, bus)
vuex單向數據流概念,
view->actions->state->view
vuex使用場景:
多個試圖依賴于同一狀態(例:菜單導航);
來自不同試圖的行為需要變更同一狀態(例:評論彈幕);
Vuex是為Vue.js開發的狀態管理模式,特點是組件狀態集中管理;并且組件的狀態改變遵循統一的規則;
使用vue-cli工具創建的Vue工程中,勾選使用Vuex后會在工程目錄中生成一個store.js的文件;
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
// 管理屬性值
state: {
count: 0,
},
// 修改屬性值方式
mutations: {
// 無參數修改Store屬性值方法,建議先持有當前Vuex中的state使用臨時變量進行修改
increase(state) {
const tmpState = state;
tmpState.count += 1;
},
// 含參數修改Store屬性值方法
sub(state, value) {
const tmpState = state;
tmpState.count -= value;
},
},
actions: {
},
});
Vuex的簡單實用
// 在組件中使用
import store from '@/store'; // 引入Store頭文件
// 使用以下代碼進行調用(increase則為store中mutations定義的方法名)
store.commit('increase');
Chrome中使用Vue插件進行Debug查看Vuex中的狀態:
六. Vue項目Debug
console.error('This is error log'); // 錯誤日志輸出
console.log('This is normal log'); // 普通日志輸出
debugger; // 加入斷點
alert('This is alert dialog'); // 彈框顯示
// 斷點后可以直接調用方法
call() {
console.log('Call Method');
},
// 綁定Window全局變量之后進行Debug
// 頁面開始掛載的時候的生命周期方法
mounted() {
window.vue = this;
},
七.Vue項目參考
使用Chrome查看相對應的web頁面的源碼, 以及CSS樣式
調試工具進行查看
調試小技巧
Chrome中調試查看DOM結構;
Header, Body里面看js/css引用, 搜索相對應的js庫;
查看sources, network中的js, 使用反編譯或者Debug進行調試;
八.Vue項目的集成
使用Scss進行CSS樣式的編寫
<style lang="scss">
.head {
font-size: 40px;
color: steelblue;
}
.cellNormal {
height: 40px;
font-size: 40px;
background-color: cyan;
&.active {
color: magenta;
}
}
.cellHighLigth {
background-color: blue;
}
</style>
九. Vue項目打包部署
// 進入到Vue項目中使用如下命令進行打包
npm run build
注: 在Vue項目中需要配置webpack打包工具的配置,可以事先創建一個vue.config文件進行相對應的打包配置;
參考文檔: https://cli.vuejs.org/zh/
文檔中的webpack打包有相關的配置信息
靜態網頁發布:
// 進入工程,使用以下命令
npm run build
// 執行完此命令之后, 會生成一個dist文件夾,將文件夾中的內容放到Server中根目錄下
// 即可完成部署
