2017 Vue.js 2快速入門指南

時間 2021-02-14

標籤 html 前端 vue webpack git github web vue-router vuex vue-cli 欄目 JavaScript 简体版

原文原文鏈接

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-個人前端之路:工具化與工程化。html

Vue.js 概述

Vue是專一於構建用戶界面層的漸進式JavaScript框架，它能夠很方便地與各類中間件或者後端應用程序集成使用。Vue爲咱們構建界面層提供了大量有用的工具，助咱們構建複雜的單頁應用。Vue的特性包括但不限於：前端

響應式界面vue
聲明式路由webpack
數據綁定git
指令github
模板邏輯web
組件vue-router
事件處理vuex
屬性推斷vue-cli
CSS 變換與動畫
過濾

Vue.js 2核心庫大概只有17KB，很是小，這就保證了引入Vue.js並不會對你的編譯後的版本添加過多的代碼，加速網站的加載。Vue.js的官方代碼位於：https://vuejs.org/。

如何引入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>

最後的結果以下所示：