Vue -- 光速入門

• 一. 起步
• • 1.1 看 [官方文檔](https://cn.vuejs.org/v2/guide/)
  • 1.2 回顧前端開發幾個點
  • • • • (1). HTML => 內部：頁面結構，對外：頁面之間的互動（僅對應于SPA）
        • (2). CSS => 樣式
        • (3). JS => 交互
        • (4). 本地緩存（本文暫不涉及）
• 二. 一個包含四個關鍵點的Demo
• • 2.1 vue-cli搭建空項目
  • 2.2 項目骨架Router
  • 2.3 寫一個頁面
  • 2.4 Vue中的交互
• 總結

作者： DocWhite白先生

序： 由于偶然巧合，筆者即將需要去往上海出差，又恰巧上海那邊的前端框架應用的是vue而不是筆者最熟悉的React。導致需要在出發前一兩天需要火速熟悉Vue的代碼風格，語法規則以及實際運用，本文以自己是如何快速掌握基本的Vue開發能力而展開，Let’s go!

一. 起步

1.1 看 官方文檔

學習入門任何語言和框架，最好的老師都是官方文檔！但是這里需要注意的是，Vue官方文檔中力推的項目啟動方式依然是傳統的通過引入script標簽，往全局環境注入了Vue對象，并由此展開Vue的基本使用。而對于早已習慣用 cli方式（命令行方式一鍵構建項目的老手來說），這種構建方式無疑過于繁瑣。
這里我想強調的不是去看官方文檔，而且強調一種看文檔的習慣。

1.2 回顧前端開發幾個點

(1). HTML => 內部：頁面結構，對外：頁面之間的互動（僅對應于SPA）

(2). CSS => 樣式

(3). JS => 交互

(4). 本地緩存（本文暫不涉及）

作為有經驗的前端開發人員在開發過程中的工作內容最頻繁最多的是什么？以React為例，絕大部分工作無異于

使用一堆UI組件堆出一個頁面組件，將組件需要展示的數據與組件屬性或狀態進行綁定以實現數據變動引發Dom變動，和頁面所必要的樣式。

頁面可交互部分的操作邏輯（input的onChange，button的onClick等等）。

向服務端請求數據以及提交數據。

控制Router頁面與頁面之間的交互邏輯。

使用如Redux等第三方庫統一管理頁面的狀態state（對應Vuex）。

在不考慮代碼設計是否合理，以及是否符合規范的前提條件下，大多數情況下，前端er只要能完成前面4項的工作內容就已經算是能夠完成工作。
所以在學習任何新框架之前，我會先關注以上4個點，第五個屬于拓展性學習內容不做強要求。這么做的一個原因是，將開發目的前置，先清楚自己想要什么再去學，而非將先學習當做掌握開發的前提條件。

二. 一個包含四個關鍵點的Demo

2.1 vue-cli搭建空項目

這里跳過vue-cli的安裝過程。
與npx create-react-app 類似，vue也有這樣的一鍵生成項目的命令：

vue create hello-vue // 這里會提示是否使用默認的babel以及eslint配置，也可以選擇手動配置，這里先選擇默認配置

該命令會在當前目錄下創建名為hello-vue的項目目錄。
在命令行進入該目錄以后，執行npm run serve即可在本地啟動項目，注意查看package.json，默認自帶serve，build以及lint腳本。

... "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"}, ...

注意：通過vue-cli創建的項目默認不集成router以及vuex，但是vue-cli可以很方便的把兩者快速安裝在項目中。

2.2 項目骨架Router

// 項目目錄下，命令行中執行 vue add router // vuex可以根據業務需求自行考慮是否加入 vue add vuex

可以快速將router和vuex集成到項目中，這時候項目的基礎架構已經足以開發demo應用，接下來你會看到項目目錄結構中多出router.js，store.js ， views目錄（里面包含兩個頁面組件）。他們作用不言而喻。

先來看看作為項目入口的main.js：

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'Vue.config.productionTip = false;new Vue({router,store,render: h => h(App) }).$mount('#app');

即使完全沒有接觸過Vue，應該也能看懂這個入口文件只做了幾件事：

引入Vue， App組件，router路由模塊，store模塊。

實例化Vue，并掛載到id為app的Dom節點。

再看看router.js 做了什么：

import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue'Vue.use(Router);export default new Router({mode: 'history',base: process.env.BASE_URL,routes: [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ './views/About.vue')}] })

Vue.use方法會將參數組件注入全局，在該應用的任何地方都可以直接使用已經被注入的組件。

好奇的同學發現了router.js文件做的事情只是告訴什么URI對應那個頁面組件，同時這里componet屬性有兩種賦值方式，通過直接賦值已經import的組件的方式為預加載頁面，而箭頭函數寫法則是懶加載頁面（該頁面在打包是會拆分出獨立的js文件，在進入該頁面時才會加載該js）。
這時候回頭看App.vue:

<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div>// router-view 組件必須顯式的聲明使用才能正常顯示對應頁面的內容<router-view/></div> </template><style> #app {... } </style>

到這里已經知道如何擴展SPA應用的頁面。以及如何控制頁面跳轉了。

2.3 寫一個頁面

在寫頁面前，先引入國內vue社區中比較流行UI庫 Element-ui。該ui庫在vue-cli中也提供了對應的插件能一鍵安裝。

vue add element

執行完會重寫App.vue文件，并提供一個使用Element組件的例子。但是被重寫之后，路由組件失效了，因為在App.vue中沒有顯式的使用router-view組件，所以還原App.vue回到剛剛安裝router時候的樣子：

<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><router-view/></div> </template><script> // import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',components: {// HelloWorld} } </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

這里有兩個很關鍵的點：

router-view組件必須被使用才能正確啟動router。

注意看script標簽中做的事情，將HelloWorld.vue組件導入當前的App.vue組件。并且通過component屬性注冊該組件進入App，這是App.vue組件的template標簽內就可以使用HelloWorld組件了，這就是Vue一種很重要的組件引用方式。還有一種就是前面提到的Vue.use。

這時候在瀏覽器查看頁面：


Router組件已經能正常運行。
到這里又掌握了Vue中組件的引入以及使用方式。

接下來需要做的就是改寫views目錄下的Home頁面，將Element UI庫中Container組件的例子復制到Home.vue。并將App.vue中實現頁面跳轉的示例代碼刪除。

<template><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container> </template> <script> // @ is an alias to /srcexport default {name: 'home',components: {} } </script> <style>... </style>

這時候一個頁面終于有了它的基本骨架

這一步的作用是幫助快速上手使用Element-ui模擬真實的頁面制作過程中的骨架搭建。

2.4 Vue中的交互

在聊頁面交互之前，先舉一些常用的前端交互應用場景：

條件判斷元素隱藏和顯示。

循環遍歷數組生成對應的真實Dom序列。

Dom的內容顯示的是遠程服務返回的數據。

用戶通過操作觸發頁面的變化，包括用戶點擊按鈕，輸入文本，拖拽等等。

自定義元素的屬性（如class，id等等）。

想了解更多的特性，還是推薦從頭開始認真閱讀（官方文檔傳送門）
所以在學習Vue語法之前，當你的腦海里已經清楚了自己需要實現什么目的！接下來就一一通過文檔實踐如何實現這些目的。
逐個來：

template中如何實現節點的條件判斷顯示或其他操作。

<div v-if="visible">... </div><script> export default {...data() {return {visible: false};} }; </script>

在上面的例子中加入一個按鈕，用于改變visible的值使div能顯示和隱藏。 同時加入一個input輸入框以及能同步顯示輸入內容的文本標簽 p 標簽

// v-on: 用于綁定事件，同時Vue還提供另外的簡寫方式@，如點擊事件 @click， <el-button type="primary" v-on:click="showHide"> 顯示隱藏div </el-button> <div v-if="visible">... </div> <p>雙向綁定輸入框: {{inputValue}}</p> <el-input v-model="inputValue" placeholder="請輸入內容"></el-input> <script> export default {...data() {return {visible: false};},method: {showHide() {this.visible = ! this.visible;}}, }; </script>

v-model指令能快速將data中的數據，跟dom節點的值進行雙向綁定，同時如果不使用v-model指令也可以value賦值以及通過監聽組件的change，click等事件進行數據的監聽和改變。所以Vue有兩種方式可以實現數據的雙向綁定的方式。

列表渲染

<template><ul><li v-for="item in userList" v-bind:key="item.key">{{item.name}}</li></ul> </template><script>export default {...data() {return {userList: [ {name: "James",age: 18},...]}}...} </script>

獲取遠程數據

<template><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main><div><p>Request when component created: </p><p>Response Status: {{response.status}}</p><p>Response Text: {{response.statusText}}</p></div></el-main><el-footer>Footer</el-footer></el-container></el-container> </template><script>/* eslint-disable */ // @ is an alias to /src import axios from 'axios';export default {name: 'home',/** 生命周期函數* */created() {axios({url: '/api/v1/users',method: "get"}).then(res=>{console.log(res);this.response = res;}).catch(err=>{console.log(err.response);this.response = err.response;});},data() {return {response: {}}}, } </script> <style>... </style>

這里在Vue的生命周期函數created中發起一個異步請求，請求服務端數據，同理當然也能在其他生命周期狀態發起異步請求獲取服務端數據，亦或是通過監聽用戶操作觸發取決于實際情況自行決定，這里需要注意的一點就是要熟悉Vue的生命周期函數接口（傳送門）。

自定義標簽屬性

// 給p 標簽不綁定title，class，id屬性，屬性的值當然也可以來自于data<p v-bind:title="hover and see" v-bind:class="normal-text" v-bind:id="demo"> some text </p>

小結：

v-if:指令用于模板中的條件判斷渲染

v-for: 指令用戶循環渲染。

通過created，beforeCreate，beforeMount等生命周期函數或用戶觸發的method，實現遠程數據的異步加載。

在method屬性中定義組件方法，通過v-on: 指令綁定方法到模板。

通過v-bind: 去定義Dom標簽屬性。

總結

到這里，這個簡單的入門教程就算完結了，而對于想更進一步了解熟悉Vue的同學，最好還是要按部就班的學習，任何速成的教程都不可能真的馬上就能教會你如何去做，更多的是筆者如何介紹他自己在學習過程中的思維方式，加油。總的來說Vue上手難度不會很大，當然想跟進一步深入理解Vue的框架設計，以及用好它還是需要認真研讀官方文檔，參考官方案例，多上手實際項目積攢經驗，才能寫出更好的代碼。

總結

以上是生活随笔為你收集整理的光速入门Vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。