2. 程式人生 > >Vue -- ES6 快速入門,Vue初識

Vue -- ES6 快速入門,Vue初識

阿新 • • 發佈：2018-11-26

一、ES6快速入門

let和const 

let

ES6新增了let命令，用於宣告變數。其用法類似var，但是宣告的變數只在let命令所在的程式碼塊內有效。

{
    let x = 10;
    var y = 20;
}

x  // ReferenceError: x is not defined
y  // 20
View Code

效果如下：

var宣告變數存在變數提升。也就是在宣告變數之前就可以使用該變數。

console.log(x)  // undefined，var宣告變數之前可以使用該變數
var x = 10;
View Code

重新整理頁面，貼上程式碼，效果如下：

而let不會這樣，let宣告的變數不能在宣告之前使用。

重新整理頁面，貼上程式碼，效果如下：

注意： let不允許在相同的作用域內重複宣告同一個變數。 

比如：

function foo(){
    let x = 10;
    var x = 20;
} 
foo();  // 報錯

重新整理頁面，貼上程式碼，效果如下：

 

再比如：

function foo(){
    let y = 10;
    let y = 20;
} 
foo();   // 報錯
View Code

重新整理頁面，貼上程式碼，效果如下：

ES5中只有全域性作用域和函式作用域，並沒有塊級作用域。 請看下面的示例： 
var name = 'Q1mi'

function foo(){
    console.log(name)
    if (false){
        var name = 'Bob'
    }
}
foo()  // undefined
View Code

重新整理頁面，貼上程式碼，效果如下：

出現上述現象的原因就是在函式內部，由於變數提升導致記憶體的name變數覆蓋了外層的name變數。 類似的情況還出現在for迴圈的計數變數最後會洩露為全域性變數。 var宣告的變數存在變數提升，而let則不會 
for (var i=0;i<5;i++){
    console.log('哈哈');
}
console.log(i);  // 5
View Code

重新整理頁面，貼上程式碼，效果如下：

 

var宣告的變數會汙染全域性，所以在for迴圈外部可以列印i的值。for迴圈中的i最好使用let宣告

 

ES6中的let宣告變數的方式實際上就為JavaScript新增了塊級作用域。

var name = 'Q1mi'

function foo(){
    console.log(name)
    if (false){
        let name = 'Bob'
    }
}
foo()  // Q1mi
View Code

 

重新整理頁面，貼上程式碼，效果如下：

此時，在foo函式內容，外層程式碼塊就不再受內層程式碼塊的影響。所以類似for迴圈的計數變數我們最好都是用let來宣告。

let宣告能夠將變數限制在當前的塊級作用域中

const

const用來宣告常量。const宣告變數必須立即初始化，並且其值不能改變。

const宣告常量的作用域與let相同，只在生命所在的塊級作用於內有效

例如： 
const PI = 3.14；

舉例：

const 用來宣告一個常量，不能修改

全域性物件的屬性：

ES6規定：var命令和function命令宣告的全域性變數依舊是全域性物件的屬性；let命令、const命令和class命令宣告的全域性變數不屬於全域性物件的屬性。

檢視下面的示例程式碼：

var x = 10;
let y = 20;
window.x  // 10
window.y  // undefined
View Code

重新整理頁面，貼上程式碼，效果如下：

 

 

變數的解構賦值

ES6允許按照一定的模式，從陣列或物件中提取值，對變數進行賦值，這種方式被成為解構賦值

var [x, y, z] = [10, 20, 30];
x;  //10
y;  //20
z;  //30
View Code

重新整理頁面，貼上程式碼，效果如下：

 

物件的解構賦值：

var {x, y} = {x: 10, y: 20};
x;  // 10
y;  // 20
View Code

重新整理頁面，貼上程式碼，效果如下：

 

var和function宣告的變數，預設會在windows物件上

let宣告的變數預設不會出現在windows物件上

舉例：

window.name1輸出undefined

 

函式

箭頭函式

箭頭函式特點：

　　1.如果引數只有一個，可以省略小括號

　　2.如果不寫return，可以不屑大括號

　　3.沒有arguments

　　4.不改變this指向

其中箭頭函式中this指向被固定化，不是因為箭頭函式內部有繫結this的機制。實際原因是箭頭函式根本沒有自己的this，導致內部的this就是外層程式碼塊的this

可以檢視下面兩段程式碼輸出的區別：

var person = {
    name: 'Q1mi',
    age:18,
    func:function(){
        console.log(this);
    }
}
person.func()  // person物件
View Code

重新整理頁面，貼上程式碼，效果如下：

 

和

var person = {
    name: 'Q1mi',
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window物件
View Code

重新整理頁面，貼上程式碼，效果如下：

但凡用到箭頭函式，不要用this

物件 

屬性簡潔表示法

ES6允許直接寫入變數和函式作為物件的屬性和方法。

function f(x, y){
    return {x, y}
}
View Code

上面的寫法等同於：

function f(x, y){
    return {x: x, y: y}
}
View Code

物件的方法也可以使用簡潔表示法：

var o = {
    method(){
        return "hello";
    }
}
View Code

等同於：

var o = {
    method: function(){
        return "Hello";
    }
}
View Code

重新整理頁面，貼上程式碼，效果如下：

Object.assign() 

Object.assign方法用來將源物件（source）的所有可列舉屬性複製到目標物件（target）。它至少需要兩個物件作為引數，第一個引數是目標物件，第二個引數是源物件。

引數必須都是物件，否則丟擲TypeError錯誤。

Object.assjgn只複製自身屬性，不可列舉屬性（enumerable為false）和繼承的屬性不會被複制。

簡單示例：

var x = {name: "Q1mi", age: 18};
var y = x;
var z = Object.assign({}, x);
x.age = 20;

x.age;  // 20
y.age;  // 20
z.age; // 18
View Code

 重新整理頁面，貼上程式碼，效果如下：

注意：

Object.assign方法的其他用處，可檢視文末連結。

 

面向物件：類

ES5的構造物件的方式 使用建構函式來創造。建構函式唯一的不同是函式名首字母要大寫。 建構函式，使用new關鍵字建立物件 修改test.html，增加一段js程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>
<script>
    // 定義一個建構函式
    function Point(x, y){
        this.x = x;
        this.y = y;
    }

    // 給父級繫結方法
    Point.prototype.toSting = function(){
        return '(' + this.x + ',' + this.y + ')';
    };
    // 生成一個Point物件
    var p = new Point(10, 20);
    console.log(p.x);
    console.log(p.toSting());

    // 繼承
    function ColorPoint(x, y, color){
        Point.call(this, x, y);
        this.color = color;
    }
    // 繼承父類的方法
    ColorPoint.prototype = Object.create(Point.prototype);
    // 修復 constructor
    ColorPoint.prototype.constructor = Point;
    // 擴充套件方法
    ColorPoint.prototype.showColor = function(){
        console.log('My color is ' + this.color);
    };

    var cp = new ColorPoint(10, 20, "red");
    console.log(cp.x);
    console.log(cp.toSting());
    cp.showColor();
</script>
</body>
</html>
View Code

重新整理頁面，效果如下：

ES6 使用Class構造物件的方式：

修改test.html，js程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>
<script>
    class Point{
        constructor(x, y){
            this.x = x;
            this.y = y;
        }  // 不要加逗號
        toSting(){
            return `(${this.x}, ${this.y})`;
        }
    }

    var p = new Point(10, 20);
    console.log(p.x);
    p.toSting();

    class ColorPoint extends Point{
        constructor(x, y, color){
            super(x, y);  // 呼叫父類的constructor(x, y)
            this.color = color;
        }  // 不要加逗號
        showColor(){
            console.log('My color is ' + this.color);
        }
    }

    var cp = new ColorPoint(10, 20, "red");
    console.log(cp.x);
    cp.toSting();
    cp.showColor();
</script>
</body>
</html>
View Code

重新整理頁面，效果如下：

二、Vue

介紹

Vue.js 是什麼

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

如果你想在深入學習 Vue 之前對它有更多瞭解，我們製作了一個視訊，帶您瞭解其核心概念和一個示例工程。

如果你已經是有經驗的前端開發者，想知道 Vue 與其它庫/框架有哪些區別，請檢視對比其它框架。

起步

官方指南假設你已瞭解關於 HTML、CSS 和 JavaScript 的中級知識。如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！之前有其它框架的使用經驗會有幫助，但這不是必需的。

嘗試 Vue.js 最簡單的方法是使用 JSFiddle 上的 Hello World 例子。你可以在瀏覽器新標籤頁中開啟它，跟著例子學習一些基礎用法。或者你也可以建立一個 .html 檔案，然後通過如下方式引入 Vue：

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

安裝教程給出了更多安裝 Vue 的方式。請注意我們不推薦新手直接使用 vue-cli，尤其是在你還不熟悉基於 Node.js 的構建工具時。

如果你喜歡互動式的東西，你也可以查閱這個 Scrimba 上的系列教程，它揉合了錄屏和程式碼試驗田，並允許你隨時暫停和播放。

宣告式渲染

Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統：

html程式碼

<div id="app">
  {{ message }}
</div>

js程式碼

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

舉例：

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1">
    <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#d1',
        data: {message: '第一個Vue示例'}
    })
</script>
</body>
</html>
View Code

直接訪問test.html頁面，效果如下：

注意：請勿使用django框架執行，因為它也是用{{ }}，來表示一個變數。

所以使用django執行時，頁面是空白的！

 

我們已經成功建立了第一個 Vue 應用！看起來這跟渲染一個字串模板非常類似，但是 Vue 在背後做了大量工作。現在資料和 DOM 已經被建立了關聯，所有東西都是響應式的。我們要怎麼確認呢？開啟你的瀏覽器的 JavaScript 控制檯 (就在這個頁面開啟)，並修改 app.message 的值，你將看到上例相應地更新。

舉例：

所有的dom操作，用vue來實現了

待續。。。。

 

相關推薦

Vue -- ES6 快速入門,Vue初識

一、ES6快速入門 let和const  let ES6新增了let命令，用於宣告變數。其用法類似var，但是宣告的變數只在let命令所在的程式碼塊內有效。 { let x = 10; var y = 20; } x // Referenc

Vue.js快速入門

Vue.js Vue.js快速入門 Vue.js簡介 了解Vue.js Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件，它不僅易於上手，還便於與第三方庫或既有項目整合. Vue.js

.NET Core實戰專案之CMS 第六章 入門篇-Vue的快速入門及其使用

原文: .NET Core實戰專案之CMS 第六章 入門篇-Vue的快速入門及其使用 寫在前面 上面文章我給大家介紹了Dapper這個ORM框架的簡單使用，大夥會用了嘛！本來今天這篇文章是要講Vue的快速入門的，原因是想在後面的文章中使用Vue進行這個CMS系統的後臺管理介面的實現。但是奈何Vue實現的S

【傳智播客鄭州】Vue.js快速入門

Vue.js簡介瞭解Vue.js​ Vue.js是一個輕巧、高效能、可元件化的MVVM庫，同時擁有非常容易上手的API。Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件，它不僅易於上手，還便於與第三方庫或既有專案整合.Vue.js安裝（我們現

vue-router快速入門

vue-router是Vue.js官方的路由外掛，它和vue.js是深度整合的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue-router單頁面應用中

快速入門vue-cli配置

const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path

vue2+vuex+vue-router 快速入門（三） vue 例項介紹

vue 例項介紹 　　vue 例項分兩種，一種為元件例項，另外一種為根例項。元件例項負責建立個性化元件、而根例項負責把元件渲染到指定的真實的 DOM 結構中。並且 vue 為我們提供了一種特殊的檔案格式 .vue 來建立 元件例項。.vue 檔案格式如下：

vue-cli快速構建vue項目

div 項目文件 項目 運行 百度一下 nod install 快速 文件 1、安裝node 。。。。。。百度一下 2、安裝vue-cli npm install -g vue-cli 3、創建項目 4、進入項目文件，安裝依賴 5、運行 npm run dev

es6快速入門

default 基本 func 復制 冰山一角 扁平化 等待 全部 log 上次分享了es6開發環境的搭建，本次接著分享es6常用的特性。 1.變量聲明let和const 我們都是知道在ES6以前，var關鍵字聲明變量。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數

ES6 快速入門

函數 years 綁定 允許 emp pan 提升 推薦 由於 快速了解ES6部分新特性。。。 let ES6新增了let命令，用於聲明變量。其用法類似var，但是聲明的變量只在let命令所在的代碼塊內有效。 { let x = 10;

ES6快速入門（三）類與模組

類與模組 一、類 一）類的宣告 class Person { constructor(name) { this.name = name; } sayName() { console.log(this.name); } } let t

vue-cli 快速構建vue應用，實現webpack打包

一、什麼是vue-clivue-cli是由vue官方釋出的快速構建vue單頁面的腳手架。參見vue-cli官方網站。http://vuejs-templates.github.io/webpack/之前需要使用vue的單檔案元件的功能，即將不同的模板分離到不同的.vue字尾的

vue-cli 快速構建vue應用，webpack打包

一、vue-clivue-cli是由vue官方釋出的快速構建vue單頁面的腳手架。參見vue-cli官方網站。http://vuejs-templates.github.io/webpack/之前需要使用vue的單檔案元件的功能，即將不同的模板分離到不同的.vue字尾的檔案中

vue-cli快速搭建vue專案

1.安裝node(使用6+) 2.安裝cnpm:安裝包時，記得以管理員許可權開啟cmd 3.安裝vue-cli ：npm install -g vue-cli 4.建立專案：vue init webpack XX  （請確保安裝了webpack） 5.開發模

通過Vue CLI 快速建立Vue專案並部署到tomcat

前言 最近一直在寫前端，用的是JSP，但是很多人都說JSP已經過時了。既然做了幾個月的前端，那就把前端學的好一點，學點新技術，跟上潮流。感覺Vue挺火的，所以這幾天學了一下Vue，開始看的官方文件，然後直接用GitHub上比較火的專案進行學習，本地跑起來，看看

用vue-cli快速生成vue專案

一、全域性安裝webpack npm install webpack -g 二、安裝node 三、全域性安裝vue-cli npm install vue-cli -g 四、生成專案  vue init webpack project_name 五、安裝依賴模組

vue-cli快速搭建vue專案並上傳github

首先我們先用vue-cli快速搭建vue專案。 假設你的電腦上已經安裝好了nodejs（如何安裝nodejs此處跳過，網上很多教程），那麼接下來就安裝vue-cli。 1、全域性安裝vue-cli，程

Vue.js——60分鐘快速入門

attribute 否則 style屬性 快速 基於 oid creat get rac Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能

Vue.js——組件快速入門（上篇）

綁定 ram 字符串過濾 技術 dem ava 對象 src get Vue.js——60分鐘組件快速入門（上篇） 組件簡介 組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用，任意類型的應用界面都可以抽象為一個組件

Vue.js——60分鐘webpack項目模板快速入門

int oss 文件 次數 mon 即使 sed val 來講 概述 browserify是一個 CommonJS風格的模塊管理和打包工具，上一篇我們簡單地介紹了Vue.js官方基於browserify構築的一套開發模板。webpack提供了和browserify類似的功能