2017 Vue.js 2快速入門指南

Bebe8894 7年前發布 | 18K 次閱讀 Vue.js Vue.js開發

Vue與React都是非常優秀的前端界面輔助庫，筆者在工作中使用React會多一點，不過在學習Vue的過程中也得到了很多啟發。Vue和React在功能的完備、社區的活躍與性能的比較上筆者覺得毋庸多言，不過從筆者個人來看覺得二者的某些優勢也是其劣勢。Vue是漸進式的JavaScript庫，可以在項目擴展的過程中逐步添加所需要的模塊，但是相對約束就較弱，并且強耦合于基于DOM的Web平臺。React則是更多的關注于跨平臺與大型Web應用的工程實踐，但是學習曲線比較曲折，入門門檻相對較高，對于活動頁、移動Mobile也有點過重。

Vue.js 概述

Vue是專注于構建用戶界面層的漸進式JavaScript框架，它可以很方便地與各種中間件或者后端應用程序集成使用。Vue為我們構建界面層提供了大量有用的工具，助我們構建復雜的單頁應用。Vue的特性包括但不限于：

響應式界面
聲明式路由
數據綁定
指令
模板邏輯
組件
事件處理
屬性推斷
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  target="_blank">Core Docs</a></li>
      <li><a  target="_blank">Forum</a></li>
      <li><a  target="_blank">Gitter Chat</a></li>
      <li><a href="https://推ter.com/vuejs" target="_blank">推ter</a></li>
      <br>
      <li><a  target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a  target="_blank">vue-router</a></li>
      <li><a  target="_blank">vuex</a></li>
      <li><a  target="_blank">vue-loader</a></li>
      <li><a  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>

最后的結果如下所示：

來自：https://segmentfault.com/a/1190000008088588

本文由用戶 Bebe8894 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1484190637264.html

Vue.js Vue.js開發