1. ES6語法

ES6是JavaScript語言的新版本，它也可以叫做ES2015，之前介紹的JavaScript屬於ES5，ES6在它的基礎上增加了一些語法，ES6是未來JavaScript的趨勢，而且vue元件開發中會使用很多的ES6的語法，所以掌握這些常用的ES6語法是必須的。

1.1 變數宣告let和const

let和const是新增的宣告變數的開頭的關鍵字，在這之前，變數宣告是用var關鍵字，這兩個關鍵字和var的區別是，它們宣告的變數沒有預解析，let和const的區別是，let宣告的是一般變數，const申明的常量，不可修改。

alert(iNum01) // 彈出undefined // alert(iNum02); 報錯，let關鍵字定義變數沒有變數預解析 // alert(iNum03); 報錯，const關鍵字定義變數沒有變數預解析 var iNum01 = 6;
// 使用let關鍵字定義變數 let iNum02 = 12;
// 使用const關鍵字定義變數 const iNum03 = 24;

alert(iNum01); // 彈出6
alert(iNum02); // 彈出12
alert(iNum03); // 彈出24

iNum01 = 7;
iNum02 = 13;
//iNum03 = 25; // 報錯,const定義的變數不可修改,const定義的變數是常量

alert(iNum01)
alert(iNum02); 
alert(iNum03);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

1.2 箭頭函式

可以把箭頭函式理解成匿名函式的第二種寫法，箭頭函式的作用是可以在物件中繫結this，解決了JavaScript中this指定混亂的問題。

// 定義函式的一般方式

function fnRs(a,b){ var rs = a + b;
 alert(rs);
}
fnRs(1,2); 

• 1
• 2
• 3
• 4
• 5

// 通過匿名函式賦值來定義函式

var fnRs = function(a,b){ var rs = a + b;
 alert(rs);
}
fnRs(1,2);

• 1
• 2
• 3
• 4
• 5

// 通過箭頭函式的寫法定義

var fnRs = (a,b)=>{
 var rs = a + b;
 alert(rs);
} 
fnRs(1,2);

• 1
• 2
• 3
• 4
• 5

// 一個引數可以省略小括號

var fnRs2 = a =>{
 alert(a);
}
fnRs2(`haha!`);

• 1
• 2
• 3
• 4

// 箭頭函式的作用，可以繫結物件中的this

var person = {
 name:`tom`,
 age:18,
 showName:function(){
 setTimeout(()=>{
 alert(this.name);
 },1000) 
 }
}
person.showName();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

1.3 模組匯入import和匯出export

javascript之前是沒有模組的功能的，之前做js模組化開發，是用的一些js庫來模擬實現的，在ES6中加入了模組的功能，和python語言一樣，python中一個檔案就是一個模組，ES6中，一個js檔案就是一個模組，不同的是，js檔案中需要先匯出(export)後，才能被其他js檔案匯入(import)

// model.js檔案中匯出 var person = {name:`tom`,age:18}
export default {person}

// index.js資料夾中匯入
import person from `js/model.js` // index.js中使用模組
person.name
person.age

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

上面匯出時使用了default關鍵字，如果不使用這個關鍵字，匯入時需要加大括號：




import {person} from `js/model.js`




目前ES6的模組功能需要在伺服器環境下才可以執行。

1.4 物件的簡寫

javascript物件在ES6中可以做一些簡寫形式，瞭解這些簡寫形式，才能方便我們讀懂一些在javascript程式碼中簡寫的物件。

let name = `李思`;
let age = 18;

var person = {
 name:name,
 age:age,
 showname:function(){
 alert(this.name);
 },
 showage:function(){
 alert(this.age);
 }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

// 簡寫成下面的形式

var person = {
 name,
 age,
 showname(){
 alert(this.name);
 },
 showage(){
 alert(this.age);
 }
}

person.showname();
person.showage();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

2. vue元件

元件(Component)是Vue.js最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼。所有的 Vue 元件同時也都是 Vue 的例項，所以可接受相同的選項物件 (除了一些根級特有的選項) 並提供相同的生命週期鉤子。

1.註冊及使用元件

註冊一個元件：

Vue.component(`my-component`, {
 template: `<div>A custom component!</div>`
})

• 1
• 2
• 3

使用元件

<div id="example">
 <my-component></my-component>
</div>
......

new Vue({
 el: `#example`
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

2.data 必須是函式

元件就是vue的例項，所有vue例項中屬性和方法，元件中也可以用，但是data屬性必須是一個函式，因為元件會重複使用在多個地方，為了使用在多個地方的元件資料相對獨立，data屬性需要用一個函式來返回值。

定義元件

Vue.component(`simple-counter`, {
 template: `<button v-on:click="counter += 1">{{ counter }}</button>`,
 data: function () { return {
 counter: 0
 }
 }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

使用元件

<div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> ...... new Vue({
 el: `#example-2`
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

3.props傳遞資料

如果想給元件中傳遞引數，元件要顯式地用 props 選項宣告它預期的資料：

<!-- 麵包屑導航 --> <!-- 樣式 --> <style> .breadcrumb{width:90%;line-height:50px;
 border-bottom:1px solid #ddd;margin:0px auto;} .breadcrumb .hot{font-weight:bold;color:red;letter-spacing:2px;} </style>

......
<div id="app"> <bread-crumb pos="首頁&gt;圖片列表"></bread-crumb> </div> <script>
 Vue.component(`bread-crumb`,{
 props:[`pos`],
 template:`<div class="breadcrumb" @click="fnLight">當前位置：<span :class="{hot:isHot}">{{pos}}</span></div>`,
 data:function(){ return {
 isHot:false
 }
 },
 methods:{
 fnLight:function(){ this.isHot = !this.isHot;
 }
 }
 })
 let vm = new Vue({
 el:`#app`
 })
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

3. 單檔案元件

將一個元件相關的html結構，css樣式，以及互動的JavaScript程式碼從html檔案中剝離出來，合成一個檔案，這種檔案就是單檔案元件，相當於一個元件具有了結構、表現和行為的完整功能，方便元件之間隨意組合以及元件的重用，這種檔案的副檔名為“.vue”，比如：”menu.vue”。

單檔案元件程式碼結構:

// 使用template標籤來定義html部分
<template> <div class="breadcrumb" @click="fnLight">
 當前位置：<span :class="{hot:isHot}">{{pos}}</span> </div> </template>

// javascript要寫成模組匯出的形式：
<script>
export default{
 props:[`pos`],
 name:`breadcrumb`,
 data:function(){ return {
 isHot:false
 }
 },
 methods:{
 fnLight:function(){ this.isHot = !this.isHot;
 }
 }
}
</script>

// 樣式中如果有scope關鍵字，表示這些樣式是元件區域性的，不會影響其他元素
<style scoped> .breadcrumb{
 width:90%;
 line-height:50px;
 border-bottom:1px solid #ddd;
 margin:0px auto;
} .breadcrumb .hot{
 font-weight:bold;
 color:red;
 letter-spacing:2px;
} </style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

4. Vue元件開發自動化工具

• windows終端操作

  1、開啟終端

  在window開始的搜尋框，輸入cmd，回車；或者在開始上點右鍵，選擇執行，輸入cmd回車；或者在window視窗的位址列上輸入cmd，回車。

  2、常用終端命令

  // 檢視資料夾內容

  dir +回車

  // 進入某個資料夾

  cd 資料夾名 +回車

  // 進入上一級資料夾

  cd .. +回車

  // 切換到e盤

  e: +回車

  // 清除螢幕

  cls +回車

• Node.js

  Node.js是一個新的後端(後臺)語言，它的語法和JavaScript類似，所以可以說它是屬於前端的後端語言，後端語言和前端語言的區別：

  – 執行環境：後端語言一般執行在伺服器端，前端語言執行在客戶端的瀏覽器上

  – 功能：後端語言可以操作檔案，可以讀寫資料庫，前端語言不能操作檔案，不能讀寫資料庫。

  Node.js如果安裝成功，可以檢視Node.js的版本,在終端輸入如下命令：

  node -v

• npm

  npm是node.js的包管理器，安裝了node.js同時會自動安裝這個包管理器，可以npm命令來安裝node.js的包。這個工具相當於python的pip管理器。

• 安裝vue的自動化工具

  vue開發生態區提供了用node.js開發的自動化開發工具包，這個工具包可以幫我們編譯單檔案元件。

  // 全域性安裝 vue-cli

  npm install –global vue-cli

5. 生成Vue單頁面應用專案目錄

• 單頁應用(SPA)

  單頁Web應用（single page web application，SPA），就是將系統所有的操作互動限定在一個web頁面中。單頁應用程式 (SPA) 是載入單個HTML頁面，系統的不同功能通過載入不同功能元件的形式來切換，不同功能元件全部封裝到了js檔案中，這些檔案在應用開始訪問時就一起載入完，所以整個系統在切換不同功能時，頁面的地址是不變的，系統切換可以做到區域性重新整理，也可以叫做無重新整理，這麼做的目的是為了給使用者提供更加流暢的使用者體驗。

• 生成專案目錄

  使用vue自動化工具可以快速搭建單頁應用專案目錄。該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可建立並啟動一個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案：

// 生成一個基於 webpack 模板的新專案
$ vue init webpack my-project // 啟動開發伺服器 ctrl+c 停止服務
cd my-project
npm run dev

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 專案目錄結構說明

需要關注的是上面標註的三個目錄：

1. 資料夾1(src)，主開發目錄，要開發的單檔案元件全部在這個目錄下

2. 資料夾2(static)，靜態資源目錄，所有的css，js檔案放在這個資料夾

3. 資料夾3(dist)，專案打包釋出資料夾，最後要上線單檔案專案檔案都在這個資料夾中

其他還有node_modules目錄是node的包目錄，config是配置目錄，build是專案打包時依賴的目錄。

• 頁面結構說明

整個專案是一個主檔案index.html,index.html中會引入src資料夾中的main.js,main.js中會匯入頂級單檔案元件App.vue,App.vue中會通過元件巢狀或者路由來引用components資料夾中的其他單檔案元件。

原文釋出時間：06月30日

原文作者：你是誰的誰CZ

本文來源CSDN部落格如需轉載請緊急聯絡作者