Vue。js作為目前最熱門最具前景的前端框架之一,幫助我們快速構建並開發前端專案。 本文旨在幫助大家認識Vue。js,瞭解Vue。js的開發流程。
本節導航
Vue CLI安裝建立專案啟動打包環境變數
Vue生命週期Data模板語法複雜業務元件常用庫
Element安裝配置柵格系統Form 表單Table 表格
Vue CLI
Vue CLI 是官方提供快速搭建Vue專案的腳手架工具
零配置開發
基於 webpack 構建
可擴充套件
安裝
npm install -g @vue/cli
建立專案
vue create hello-worldVue CLI v4。5。10? Please pick a preset: 233 ([Vue 2] router, vuex, dart-sass, babel, pwa, eslint, unit-mocha) test ([Vue 2] router, vuex, dart-sass, babel, pwa, eslint, unit-mocha) > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features
選擇 Vue 2 預設配置,也支援定義配置,
node_modulespublic // 靜態檔案src |————- assets // 資源模組,圖片等。。。 |————- components // 元件 |————- views // (預設沒有),一般會放頁面元件 |————- App。vue // 根元件 |————- main。js // 初始化 Vue 以及配置babel。config。js // babel 配置package。json // 專案資訊,npm 指令碼,包版本資訊
啟動
cd hello-world
npm run serve
打包
npm run build
打包後的檔案會放在專案根目錄的dist檔案。可以進入dist 啟動一個 http-server 快速驗證打包後的內容
環境變數
一般用來區分 開發環境 測試環境 正式環境的配置資訊
。env。env。[mode]// 。env。developmentNODE_ENV=developmentVUE_APP_UC=https://ucdev。meb。im/// package。json“scripts”: { “serve”: “vue-cli-service serve ——mode development”, “build”: “vue-cli-service build”, “lint”: “vue-cli-service lint”}// zu‘jianconsole。log(process。env。VUE_APP_UC)
只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 開頭的變數,會被載入到 process。env。 物件中
Vue
目前正式版本是 Vue2。0,3。0還在beta版本,
生命週期
只介紹一下 5 個使用率非常高生命週期函式
created 獲取 $route 引數
mounted 獲取 原生DOM 和 元件例項
beforeDestroy 銷燬定時器
activated 使用 keep-alive 時 提供的生命週期函式
deactivated 使用 keep-alive 時 提供的生命週期函式
activated: 頁面第一次進入的時候,鉤子觸發的順序是created->mounted->activated
deactivated: 頁面退出的時候會觸發deactivated,當再次前進或者後退的時候只觸發activated
完整生命週期
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed
Data
元件中 data 必須是個 函式 並且 需要return 一個物件 JavaScript 中物件是引用型別,如果data是一個物件, 一個頁面元件又使用2個相同的元件, A 修改了 data 就會影響 b 的data
{ data() { return { hello: ’‘, arr: [1, 2, 3] } }, methods: { updateData() { // 值型別更新資料 this。hello = ’ni hao‘ }, updateObj1() { const newObj = { 。。。this。obj } newObj。id = 2 this。obj = newObj }, updateObj2() { const newObj = Object。assign({}, this。obj, { id: 2 }) this。obj = newObj }, updateObj3() { // 適用於陣列 this。$set(this。obj, ’id‘, 2) }, updateArr1() { this。arr。push(4) }, updateArr2() { this。$set(this。obj, 3, 3) } } }
因為 Vue 修改了陣列原型方法, 在原有方法包裹了異常, 使用直接使用陣列方法,便可以會觸發檢視更新
push() pop() shift() unshift() splice() sort() reverse()
模板語法
Vue 的模板語法,和後端模板基本大同小異,底層其實是把模板編譯成虛擬 DOM 渲染函式
{{ msg }} {{ ok ? ’YES‘ : ’NO‘ }} // 表示式 {{ todo(ok) }} // 渲染函式的返回值
// 渲染原生HTML現在你看到我了
現在你看到我了
- {{ item。name }}
{{ blogTitle }}
function render(createElement) { return createElement(’h1‘, this。blogTitle) }複雜業務
對於比較複雜的業務邏輯,光靠模板語法的話,會把模板寫得非常複雜和難以維護
filter
本質是一個函式,可以不用侷限於filter
{{isEnable| text}} { filters: { text(val) { return val ? ’啟用‘ : ’未啟用‘ } } }
// main。js Vue。filter(key, fn) // 註冊多個filter Object。keys(filters)。forEach(key => { Vue。filter(key, filters[key]) })
watch
{ watch: { visible(val) { if (val) { this。resetForm() // 重置表單 } } }, method: { handleShowDialog() { // this。resetForm() this。visible = true } } }
元件
JavaScirpt 中命名規範是 小駝峰,但是在Vue中元件的模板,命名規範推薦使用(字母全小寫且必須包含一個連字元),遵循 W3C 規範中的自定義元件名,
全域性註冊元件
// main。js import BaseButton from ’。/BaseButton。vue‘ Vue。component(’BaseButton‘, BaseButton)
父->子元件通訊
單向資料流,從父到子傳遞
父級 prop 的更新會向下流動到子元件中,子元件中不能直接修改props
// 父元件
String
Number
Boolean
Array
Object
Date
Function
Symbol
子->父元件通訊
一個彈窗元件,點選確定後需要重新請求父元件的列表,自定義事件
// alert。vue 元件 // list。vue 列表
ref/$refs
用於活動 子元件例項 或者 原生DOM,父元件就有了控制子元件的能力
常用庫
Vue Router
Vue Router 是 Vue。js 官方的路由管理器
// router。js import Vue from ’vue‘ import Router from ’vue-router‘ import Home from ’。。/view/Home‘ Vue。use(Router) const router = new Router({ routes: [ { path: ’/home‘, name: ’home‘, component: Home } ] }) // App。vue
路由跳轉
// 元件
meta
許可權管理,頁面個性化配置,設定title
{ path: ’bar‘, component: Bar, meta: { requiresAuth: true } } this。$route。meta
子路由
// router。js { path: ’/child-View‘, name: ’childView‘, component: ChildView, redirect: ’/child-view/child1‘, // 自動重定向 children: [ { path: ’child1‘, component: Child1 }, { path: ’child2‘, component: Child2 } ] } // ChildView
ChildView
$router/$route
route是路由資訊物件,裡面主要包含路由的一些基本資訊,包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom
router是VueRouter的例項,包含了一些路由的跳轉方法,鉤子函式
axios
直接使用
axios。get(’/user‘, { params: { id: 12345 } }) axios。post(’/user‘, { id: 123445 })
// utils/request。js import axios from ’axios‘ const request = axios。create({ baseURL: ’https://www。xxx。com/api‘, timeout: 1000, headers: { ’X-Custom-Header‘: ’foobar‘ } })request。interceptors。request。use( (config) => { // 往header 新增token return config }, (error) => { console。error(error) return Promise。reject(error) } ) request。interceptors。response。use( (response) => { // 判斷資料是否正常返回 return response }, (error) => { // 500 return Promise。reject(error) } ) export default request // main。js // Vue 例項的原型上, 習慣加上$符號 Vue。prototype。$request = request // 元件 this。$request。get(’/aa/bb‘, {}) 。then(res => { console。log(’res‘, res) }) 。catch(error => { console。error(’error‘, error) }) // or 同步寫法(只是寫法, 還是非同步的) ;(async () => { try { const res = await this。$request。get(’/aa/bb‘) } catch (e) { console。error(’error‘, error) } })()
Element
安裝
npm i element-ui -S
配置
全域性配置,該元件可以直接使用 Element 所有元件,不必單獨引入
import Vue from ’vue‘import ElementUI from ’element-ui‘import ’element-ui/lib/theme-chalk/index。css‘Vue。use(ElementUI)
區域性引用
柵格系統
將頁面固定分成幾欄,進行頁面的佈局設計,使佈局規範簡潔有規則。
Element 分成 24 欄
Form 表單
Table 表格