Vue + ArcGIS API for JavaScript 構建前端GIS應用（二）

工做上的一系列緣由，致使後面的文章遲遲沒有發出，鴿了良久，我感到深深的內疚。今天遇到一個契機，發現了分享和表達的重要性。所以決定，把後續的兩篇一塊兒更新了。廢話很少說，如今開始吧。

傳送門：
Vue + ArcGIS API for JavaScript 構建前端GIS應用（一）
Vue + ArcGIS API for JavaScript 構建前端GIS應用（二）
Vue + ArcGIS API for JavaScript 構建前端GIS應用（三）

介紹主要圍繞着：

1. 什麼是Vue？
2. 怎麼寫Vue的組件？
3. 如何構建Vue工程項目？
4. Vue與GIS如何集成？
5. 如何用Vue構建一個WebGIS項目？

這5個問題去展開。

首先會介紹一些知識點，最後會有一個綜合案例，結合前文介紹的內容，利用vue的技術棧構建一個簡單的WebGIS前端應用。

p.s.:
Vue + ArcGIS API for JavaScript 構建前端GIS應用（二）中主要是開發前端的一些背景介紹以及Vue的一些基本知識,主要介紹一、2兩點
若是以爲簡單能夠直接看Vue + ArcGIS API for JavaScript 構建前端GIS應用（三）

背景知識

在正式全面介紹vue以前，首先介紹一下須要瞭解的兩個重要的背景知識，咱們在使用vue寫前端中許多環節須要他們的支持。

ES6

ECMAScript 6簡稱ES6，他是瀏覽器腳本語言的標準，而咱們熟悉的JavaScript就是這個標準的一個實現。因爲JavaScript的影響力很是大，平常場合中，這兩個詞幾乎是等價的。

ES6爲腳本語言增長了不少新的特性，爲編寫大型項目提供了更好的支持。我以爲其中最重要的就是ES6規範了規範化了以前形式多樣的js模塊化方案，如CommonJS、AMD、CMD等。如今呢，只要使用import關鍵字就能把js包引用進來，還不須要擔憂引用順序問題。

目前，在使用Vue中js腳本編寫使用ES6已經成了主流趨勢。在後面進行vue介紹時候你們隨處能夠見到他的影子。想要系統的學習或者當作工具書查閱的話，建議去看阮一峯的es6那本書，有電子版，直接在網頁上瀏覽就好了。

Webpack

Webpack是一個現代的JS應用程序的靜態模塊打包器。它運行在node.js中，主要做用是對js源碼進行轉譯與打包，支持不一樣js模塊化模式，還支持不一樣樣式語法（sass、less等）的轉譯。

目前瀏覽器對ES6語法規範的兼容性尚未達到100%，須要Webpack進行模塊化打包、轉譯等，讓咱們既能使用ES6特性，又能解決瀏覽器兼容性問題。

而且Webpack爲開發者提供了良好的開發環境的支持，如Webpack Server就容許用戶進行js代碼的熱更新，用戶在開發中改了代碼瀏覽器就能及時更新，不須要刷新。

Vue中的單文件組件（.vue）一樣也須要webpack的轉譯。
從開發到產品打包一整套流程都須要Webpack的支持。

---

Vue.js（2.x）介紹

官網給出了對於vue的一個定義：

"Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。"
也就是說vue是一個前端視圖層的漸進式框架

怎麼理解漸進式框架？

vue既能夠做爲一個普通的js庫來使用，不做爲項目的核心框架，解決一些具體問題，如表單提交等。同時，vue也能夠做爲整個應用項目的核心，在vue生態的幫助下能夠構建一個完整的、複雜的單頁應用（SPA）

vue框架的意義是什麼？

1. 隨着現代web技術的發展，包括js的發展，瀏覽器的發展等，web前端的能力大大提升，不少以前須要服務器端完成的工做如今在前端就能搞定。所以js的體量就回愈來愈大，可是因爲缺乏組織形式js代碼就回變得混亂難並且難以理解。
2. 減小用戶對於用戶界面的操做，簡化開發，讓用戶更多的專一於業務邏輯的開發，減小對html元素的操做。業務邏輯交給開發者，元素操做交給vue。

vue的特色是什麼？

react的特點兩大特色就是聲明式渲染和組件化，vue跟react很相似，也具備這兩大特點，同時他還具備豐富的元素操做指令的特色。

聲明式渲染： 這裏就是聲明一個數據與視圖的關係，造成一種綁定關係，當數據發生變化的時候，視圖也隨即會發生變化，這樣咱們就不須要進行繁雜的DOM操做。

咱們來看官方提供的一個案例(聲明式渲染)。這裏聲明瞭一個vue的實例，在data模塊註冊了一個狀態變量message，而且把這個變量綁定在了html的標籤上。這個時候呢，咱們只須要改變message變量的內容，視圖隨即就會發生變化。這個過程當中咱們是沒有進行dom操做的。

豐富的元素操做指令：
vue指令指的是寫在html標籤裏面的以v-做爲前綴的指令，他們表示vue提供的特殊特性。他們會在dom上應用特殊的相應行爲。

1. v-if 表示條件指令：當知足條件時候，該標籤會顯示，不知足條件時標籤會隱藏。看這個例子，咱們在vue實體的data項中聲明瞭一個seen狀態，而且把狀態做爲顯示條件，當seen爲true的時候，被掛接的標籤顯示；當seen爲false的時候標籤就會消失。
2. v-for 表示循環指令：通常是在用於渲染列表、卡片、表格等的時候使用，能夠將數組循環綁定在標籤上。
3. v-on 表示事件監聽指令：用於監聽事件的掛載。v-on的冒號後面寫的是事件類型，等號後面寫事件觸發後執行的方法。
4. v-model 表示雙向綁定指令：將視圖層與vue中的數據記進行雙向綁定，當message這個狀態發生變化時，視圖層input的內容會發生改變，而在視圖層中修改input內容的時候，message也會發生改變。

上面講到的例子都是來源於vue的官網上的，若是你們有空的話能夠去看一看，試一試。

組件化應用構建：
剛剛咱們演示的例子都是單例vue對象，可是在實際項目中一個vue實例都是又若干個組件組成的，每一個組件是徹底獨立存在的，它包含了可視化的要素、必定的功能邏輯而且帶有樣式。

這樣有助於讓開發更簡明；能夠有效的進行開發任務的分配；若是設計良好，能夠高效的複用。

實際上，咱們在編寫vue工程項目的時候就是在寫一個個組件。
容許使用小型、獨立和一般可複用的組件構建大型應用，通常同單文件組件（ .vue）結合。下圖紅框中的都表明一個個組件，每一個組件都是一個.vue文件，而且爲樹形結構中節點間的關係，互相之間爲父子、兄弟或者更爲複雜的嵌套關係。

單文件組件

顧名思義單文件組件意思是一個文件表示一個完整的組件。由template（視圖層）、script（腳本）、style（樣式）組成。編寫<template>建立組件的可視化要素（標籤），寫法基本與html相同；在<script>中使用vue的特性，作數據綁定和業務邏輯的實現；<style>中能夠進行有做用域的樣式設置，經過配置style中還支持sass、less等css預處理語言。