2017 Vue.js 2快速入门指南
注意，據(jù)部分讀者反映本文水多，怕濕身者勿進(jìn)。后續(xù)推薦詳解 Vue & Vuex 實(shí)踐
?2017 Vue.js 2快速入門指南翻譯自Vue.js 2 Quickstart Tutorial 2017從屬于Web 前端入門與工程實(shí)踐。Vue與React都是非常優(yōu)秀的前端界面輔助庫(kù)，筆者在工作中使用React會(huì)多一點(diǎn)，不過(guò)在學(xué)習(xí)Vue的過(guò)程中也得到了很多啟發(fā)。Vue和React在功能的完備、社區(qū)的活躍與性能的比較上筆者覺(jué)得毋庸多言，不過(guò)從筆者個(gè)人來(lái)看覺(jué)得二者的某些優(yōu)勢(shì)也是其劣勢(shì)。Vue是漸進(jìn)式的JavaScript庫(kù)，可以在項(xiàng)目擴(kuò)展的過(guò)程中逐步添加所需要的模塊，但是相對(duì)約束就較弱，并且強(qiáng)耦合于基于DOM的Web平臺(tái)。React則是更多的關(guān)注于跨平臺(tái)與大型Web應(yīng)用的工程實(shí)踐，但是學(xué)習(xí)曲線比較曲折，入門門檻相對(duì)較高，對(duì)于活動(dòng)頁(yè)、移動(dòng)Mobile也有點(diǎn)過(guò)重。詳細(xì)討論參考筆者的2016-我的前端之路:工具化與工程化。
Vue.js 概述
Vue是專注于構(gòu)建用戶界面層的漸進(jìn)式JavaScript框架，它可以很方便地與各種中間件或者后端應(yīng)用程序集成使用。Vue為我們構(gòu)建界面層提供了大量有用的工具，助我們構(gòu)建復(fù)雜的單頁(yè)應(yīng)用。Vue的特性包括但不限于：
-
響應(yīng)式界面
-
聲明式路由
-
數(shù)據(jù)綁定
-
指令
-
模板邏輯
-
組件
-
事件處理
-
屬性推斷
-
CSS 變換與動(dòng)畫(huà)
-
過(guò)濾
Vue.js 2核心庫(kù)大概只有17KB，非常小，這就保證了引入Vue.js并不會(huì)對(duì)你的編譯后的版本添加過(guò)多的代碼，加速網(wǎng)站的加載。Vue.js的官方代碼位于：vue.js。
?
如何引入Vue.js
Vue.js為我們提供了多種引入方式，可以根據(jù)我們項(xiàng)目的實(shí)際需求自由選擇：
-
在HTML中添加script標(biāo)簽從CDN引入
-
使用NPM安裝
-
使用Bower安裝
-
使用Vue-cli初始化項(xiàng)目
本文是選擇了最后一種初始化的方式來(lái)創(chuàng)建新的項(xiàng)目。
使用 Vue-cli
首先，我們可以使用NPM安裝Vue-cli。你必須要檢查下系統(tǒng)中是否已經(jīng)安裝好了NodeJS并且npm命令行工具可以正常使用，然后使用如下命令在本地系統(tǒng)進(jìn)行全局安裝：
$ npm install -g vue-cli安裝完畢之后，我們可以使用如下方式來(lái)初始化新的項(xiàng)目:
$ vue init webpack vueapp01這里我們讓Vue-cli以Webpack模板創(chuàng)建新的項(xiàng)目，并且個(gè)新項(xiàng)目取名為vueapp01，運(yùn)行該命令之后它會(huì)向你咨詢基本的項(xiàng)目信息，截圖如下：
?
到這里項(xiàng)目的模板文件被添加到了vueapp01目錄下，進(jìn)入該目錄即可以啟動(dòng)開(kāi)發(fā)服務(wù)器：
$ npm run dev該命令會(huì)啟動(dòng)一個(gè)監(jiān)聽(tīng)8080端口的開(kāi)發(fā)服務(wù)器，在瀏覽器中打開(kāi)該端口可以看到如下界面：
?
如果你希望將項(xiàng)目打包出開(kāi)發(fā)版本，可以使用build命令，它會(huì)將項(xiàng)目打包編譯之后的文件放置在dist目錄下：
$ npm run build項(xiàng)目結(jié)構(gòu)
該部分的代碼參考vue-boilerplate。首先我們來(lái)看下Vue-cli構(gòu)建的項(xiàng)目目錄結(jié)構(gòu)：
?
進(jìn)入項(xiàng)目根目錄之后我們使用npm intsall命令安裝所有依賴，所有的依賴被聲明在package.json文件中。文件index.html中包含了如下HTML代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>vueapp01</title></head><body><div id="app"></div><!-- built files will be auto injected --></body> </html>該文件是整個(gè)應(yīng)用的入口點(diǎn)，注意，無(wú)論你把<div>元素放在哪，只要保證其id屬性為app即可，該元素是整個(gè)由Vue.js生成文件的插入點(diǎn)。然后我們看下src文件夾中的main.js文件，該文件是Vue應(yīng)用初始化的地方：
import Vue from 'vue' import App from './App' new Vue({el: '#app',template: '<App/>',components: { App } })文件首部我們發(fā)現(xiàn)兩個(gè)引入語(yǔ)句：
-
import Vue from 'vue'：Vue是整個(gè)框架的主類
-
import App from './App'：App是整個(gè)應(yīng)用的根元素
使用new關(guān)鍵字能夠創(chuàng)建Vue的實(shí)例，構(gòu)造函數(shù)會(huì)接收包含三個(gè)屬性的配置對(duì)象：
-
el:設(shè)定Vue應(yīng)用的DOM掛載點(diǎn)
-
template:包含HTML代碼的模板
-
components:用于模板中的Vue.js組件
該模板僅包含一個(gè)元素：<App />，當(dāng)然這并不是HTML標(biāo)準(zhǔn)元素，整個(gè)App組件的的定義在App.vue文件中：
<template><div id="app"><img src="./assets/logo.png"><hello></hello></div> </template> <script> import Hello from './components/Hello' export default {name: 'app',components: {Hello} } </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>對(duì)于每個(gè)Vue.js 2單文件組件，其會(huì)包含三部分：
-
<template></template>: Component's template code
-
<script></script>: Component's script code
-
<style></style>: Component' CSS code
我們先看看template與script這兩塊。script塊導(dǎo)出了某個(gè)聲明為app的組件，該組件中的屬性聲明了對(duì)于Hello組件的引用。Hello組件則是被定義在hello.vue文件中，為了使用其他組件我們同樣需要在script首部引入該組件。整個(gè)Hello組件的定義如下：
<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><a href="https://vuejs.org" target="_blank">Core Docs</a></li><li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li><li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li><li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li><br><li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li></ul><h2>Ecosystem</h2><ul><li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li><li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li><li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li><li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li></ul></div> </template> <script> export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App'}} } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 {font-weight: normal; } ul {list-style-type: none;padding: 0; } li {display: inline-block;margin: 0 10px; } a {color: #42b983; } </style>使用標(biāo)準(zhǔn)指令
我們可以使用基本的Vue.js指令來(lái)為Hello組件添加更多的功能與數(shù)據(jù)邏輯。
v-for
v-fot指令允許我們遍歷某個(gè)數(shù)組并且將每一個(gè)元素渲染到模板中，我們可以先創(chuàng)建如下的數(shù)組：
users: [{firstname: 'Sebastian', lastname: 'Eschweiler'},{firstname: 'Bill', lastname: 'Smith'},{firstname: 'John', lastname: 'Porter'}],然后使用v-for指令遍歷該列表并且提取出每個(gè)元素的firstname與lastname值：
<div><ul><li v-for="user in users">{{user.firstname}} {{user.lastname}}</li></ul> </div>v-model
v-model指令會(huì)在輸入元素與組件之間創(chuàng)建雙向數(shù)據(jù)綁定，我們首選需要定義一個(gè)存放數(shù)據(jù)的變量：
input_val: ''然后使用v-model將變量綁定到元素上：
<div><input type="text" v-model="input_val"> </div>這種雙向綁定會(huì)有兩個(gè)效果：
-
每次用戶輸入值時(shí)都會(huì)同步更新到input_val變量
-
如果我們?cè)诔绦蛑惺謩?dòng)修改input_val變量的值，元素中的展示值也會(huì)被相應(yīng)更新
v-text
v-text指令被用于設(shè)置文本內(nèi)容，其作用等效于{{...}}，我們可以用其來(lái)展示部分文本：
Input Value: <span v-text="input_val"></span>總結(jié)
完整的Hello組件的實(shí)現(xiàn)如下：
<template><div class="hello"><h1>{{ msg }}</h1><hr /><div><ul><li v-for="user in users">{{user.firstname}} {{user.lastname}}</li></ul></div><hr /><div><input type="text" v-model="input_val"></div><div>Input Value: <span v-text="input_val"></span></div><hr /><div><button class="btn btn-primary" v-on:click="counter++">You've clicked this button {{counter}} times!</button></div></div> </template> <script> export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App',users: [{firstname: 'Sebastian', lastname: 'Eschweiler'},{firstname: 'Bill', lastname: 'Smith'},{firstname: 'John', lastname: 'Porter'}],input_val: '',counter: 0}} } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 {font-weight: normal; } ul {list-style-position: inside; } a {color: #42b983; } </style>最后的結(jié)果如下所示：
from:https://zhuanlan.zhihu.com/p/24837102?
總結(jié)
以上是生活随笔為你收集整理的2017 Vue.js 2快速入门指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 当你「ping 一下」的时候，你知道它背
- 下一篇： Vue.js 插件