2017 Vue.js 2快速入门指南
注意，據部分讀者反映本文水多，怕濕身者勿進。后續推薦詳解 Vue & Vuex 實踐
?2017 Vue.js 2快速入門指南翻譯自Vue.js 2 Quickstart Tutorial 2017從屬于Web 前端入門與工程實踐。Vue與React都是非常優秀的前端界面輔助庫，筆者在工作中使用React會多一點，不過在學習Vue的過程中也得到了很多啟發。Vue和React在功能的完備、社區的活躍與性能的比較上筆者覺得毋庸多言，不過從筆者個人來看覺得二者的某些優勢也是其劣勢。Vue是漸進式的JavaScript庫，可以在項目擴展的過程中逐步添加所需要的模塊，但是相對約束就較弱，并且強耦合于基于DOM的Web平臺。React則是更多的關注于跨平臺與大型Web應用的工程實踐，但是學習曲線比較曲折，入門門檻相對較高，對于活動頁、移動Mobile也有點過重。詳細討論參考筆者的2016-我的前端之路:工具化與工程化。
Vue.js 概述
Vue是專注于構建用戶界面層的漸進式JavaScript框架，它可以很方便地與各種中間件或者后端應用程序集成使用。Vue為我們構建界面層提供了大量有用的工具，助我們構建復雜的單頁應用。Vue的特性包括但不限于：
-
響應式界面
-
聲明式路由
-
數據綁定
-
指令
-
模板邏輯
-
組件
-
事件處理
-
屬性推斷
-
CSS 變換與動畫
-
過濾
Vue.js 2核心庫大概只有17KB，非常小，這就保證了引入Vue.js并不會對你的編譯后的版本添加過多的代碼，加速網站的加載。Vue.js的官方代碼位于：vue.js。
?
如何引入Vue.js
Vue.js為我們提供了多種引入方式，可以根據我們項目的實際需求自由選擇：
-
在HTML中添加script標簽從CDN引入
-
使用NPM安裝
-
使用Bower安裝
-
使用Vue-cli初始化項目
本文是選擇了最后一種初始化的方式來創建新的項目。
使用 Vue-cli
首先，我們可以使用NPM安裝Vue-cli。你必須要檢查下系統中是否已經安裝好了NodeJS并且npm命令行工具可以正常使用，然后使用如下命令在本地系統進行全局安裝：
$ npm install -g vue-cli安裝完畢之后，我們可以使用如下方式來初始化新的項目:
$ vue init webpack vueapp01這里我們讓Vue-cli以Webpack模板創建新的項目，并且個新項目取名為vueapp01，運行該命令之后它會向你咨詢基本的項目信息，截圖如下：
?
到這里項目的模板文件被添加到了vueapp01目錄下，進入該目錄即可以啟動開發服務器：
$ npm run dev該命令會啟動一個監聽8080端口的開發服務器，在瀏覽器中打開該端口可以看到如下界面：
?
如果你希望將項目打包出開發版本，可以使用build命令，它會將項目打包編譯之后的文件放置在dist目錄下：
$ npm run build項目結構
該部分的代碼參考vue-boilerplate。首先我們來看下Vue-cli構建的項目目錄結構：
?
進入項目根目錄之后我們使用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>該文件是整個應用的入口點，注意，無論你把<div>元素放在哪，只要保證其id屬性為app即可，該元素是整個由Vue.js生成文件的插入點。然后我們看下src文件夾中的main.js文件，該文件是Vue應用初始化的地方：
import Vue from 'vue' import App from './App' new Vue({el: '#app',template: '<App/>',components: { App } })文件首部我們發現兩個引入語句：
-
import Vue from 'vue'：Vue是整個框架的主類
-
import App from './App'：App是整個應用的根元素
使用new關鍵字能夠創建Vue的實例，構造函數會接收包含三個屬性的配置對象：
-
el:設定Vue應用的DOM掛載點
-
template:包含HTML代碼的模板
-
components:用于模板中的Vue.js組件
該模板僅包含一個元素：<App />，當然這并不是HTML標準元素，整個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>對于每個Vue.js 2單文件組件，其會包含三部分：
-
<template></template>: Component's template code
-
<script></script>: Component's script code
-
<style></style>: Component' CSS code
我們先看看template與script這兩塊。script塊導出了某個聲明為app的組件，該組件中的屬性聲明了對于Hello組件的引用。Hello組件則是被定義在hello.vue文件中，為了使用其他組件我們同樣需要在script首部引入該組件。整個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>使用標準指令
我們可以使用基本的Vue.js指令來為Hello組件添加更多的功能與數據邏輯。
v-for
v-fot指令允許我們遍歷某個數組并且將每一個元素渲染到模板中，我們可以先創建如下的數組：
users: [{firstname: 'Sebastian', lastname: 'Eschweiler'},{firstname: 'Bill', lastname: 'Smith'},{firstname: 'John', lastname: 'Porter'}],然后使用v-for指令遍歷該列表并且提取出每個元素的firstname與lastname值：
<div><ul><li v-for="user in users">{{user.firstname}} {{user.lastname}}</li></ul> </div>v-model
v-model指令會在輸入元素與組件之間創建雙向數據綁定，我們首選需要定義一個存放數據的變量：
input_val: ''然后使用v-model將變量綁定到元素上：
<div><input type="text" v-model="input_val"> </div>這種雙向綁定會有兩個效果：
-
每次用戶輸入值時都會同步更新到input_val變量
-
如果我們在程序中手動修改input_val變量的值，元素中的展示值也會被相應更新
v-text
v-text指令被用于設置文本內容，其作用等效于{{...}}，我們可以用其來展示部分文本：
Input Value: <span v-text="input_val"></span>總結
完整的Hello組件的實現如下：
<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>最后的結果如下所示：
from:https://zhuanlan.zhihu.com/p/24837102?
總結
以上是生活随笔為你收集整理的2017 Vue.js 2快速入门指南的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 当你「ping 一下」的时候，你知道它背
- 下一篇： Vue.js 插件