從零開始學VUE

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) }

複雜業務

對於比較複雜的業務邏輯,光靠模板語法的話,會把模板寫得非常複雜和難以維護

日誌
{ computed: { logBtnVisible() { return this。isLogin && this。userType === 1 && this。hasLog } } }

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 } } }

元件

import BaseButton from ’。/BaseButton。vue‘ { components: { BaseButton } }

JavaScirpt 中命名規範是 小駝峰,但是在Vue中元件的模板,命名規範推薦使用(字母全小寫且必須包含一個連字元),遵循 W3C 規範中的自定義元件名,

全域性註冊元件

// main。js import BaseButton from ’。/BaseButton。vue‘ Vue。component(’BaseButton‘, BaseButton)

父->子元件通訊

單向資料流,從父到子傳遞

父級 prop 的更新會向下流動到子元件中,子元件中不能直接修改props

// 父元件 // 型別區別 // 子元件 props: { id: Number, userId: { type: String, default: ’‘ } }

String

Number

Boolean

Array

Object

Date

Function

Symbol

子->父元件通訊

一個彈窗元件,點選確定後需要重新請求父元件的列表,自定義事件

// alert。vue 元件 // list。vue 列表

ref/$refs

用於活動 子元件例項 或者 原生DOM,父元件就有了控制子元件的能力

{ mounted() { console。log(this。$refs。child) // 可以呼叫子元件所有方法 this。$refs。input。focus() // 操作 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

“Vue

路由跳轉

// 元件 Go to Foo Register

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)

區域性引用

import { Button as ElButton } from ’element-ui‘{ components: { ElButton }}

柵格系統

將頁面固定分成幾欄,進行頁面的佈局設計,使佈局規範簡潔有規則。

Element 分成 24 欄

從零開始學VUE

Form 表單

提交 重置 export default { data() { return { numberValidateForm: { age: ’‘ }, rules: { age: [ { required: true, message: ’年齡不能為空‘}, { type: ’number‘, message: ’年齡必須為數字值‘} ] } }; }, methods: { submitForm(formName) { this。$refs。form。validate((valid) => { if (valid) { alert(’submit!‘); } else { console。log(’error submit!!‘); return false; } }); }, resetForm(formName) { this。$refs。form。resetFields(); } }}

Table 表格

export default { data() { return { tableData: [{ date: ’2016-05-02‘, name: ’hello1‘, address: ’四川成都春熙路街道xxx號‘ }, { date: ’2016-05-04‘, name: ’hello2‘, address: ’四川成都春熙路街道xxx號‘ }, { date: ’2016-05-01‘, name: ’hello3‘, address: ’四川成都春熙路街道xxx號‘ }, { date: ’2016-05-03‘, name: ’hello4‘, address: ’四川成都春熙路街道xxx號‘ }] } }}