vue.js元件開發

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);            

// 通過匿名函數指派來定義函數

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

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

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

// 一個參數可以省略小括号

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

// 箭頭函數的作用，可以綁定對象中的this

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

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           

上面導出時使用了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);
 }
}           

// 簡寫成下面的形式

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

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

2. vue元件

元件(Component)是Vue.js最強大的功能之一。元件可以擴充 HTML 元素，封裝可重用的代碼。所有的 Vue 元件同時也都是 Vue 的執行個體，是以可接受相同的選項對象 (除了一些根級特有的選項) 并提供相同的生命周期鈎子。

1.注冊及使用元件

注冊一個元件：

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

使用元件

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

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

2.data 必須是函數

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

定義元件

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

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

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>           

• 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>           

• 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. 檔案夾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部落格

如需轉載請緊急聯系作者