Vue -- ES6 快速入门,Vue初识

一、ES6快速入门

let和const

let

ES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。

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

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

效果如下：

var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。

console.log(x)  // undefined，var声明变量之前可以使用该变量
var x = 10;

刷新页面，粘贴代码，效果如下：

而let不会这样，let声明的变量不能在声明之前使用。

刷新页面，粘贴代码，效果如下：

注意：

let不允许在相同的作用域内重复声明同一个变量。 

比如：

function foo(){
    let x = 10;
    var x = 20;
}
foo();  // 报错

刷新页面，粘贴代码，效果如下：

再比如：

function foo(){
    let y = 10;
    let y = 20;
}
foo();   // 报错

刷新页面，粘贴代码，效果如下：

ES5中只有全局作用域和函数作用域，并没有块级作用域。

请看下面的示例：

var name = ‘Q1mi‘

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

刷新页面，粘贴代码，效果如下：

出现上述现象的原因就是在函数内部，由于变量提升导致内存的name变量覆盖了外层的name变量。

类似的情况还出现在for循环的计数变量最后会泄露为全局变量。

var声明的变量存在变量提升，而let则不会

for (var i=0;i<5;i++){
    console.log(‘哈哈‘);
}
console.log(i);  // 5

刷新页面，粘贴代码，效果如下：

var声明的变量会污染全局，所以在for循环外部可以打印i的值。for循环中的i最好使用let声明

ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

var name = ‘Q1mi‘

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

刷新页面，粘贴代码，效果如下：

此时，在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

刷新页面，粘贴代码，效果如下：

变量的解构赋值

ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被成为解构赋值

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

刷新页面，粘贴代码，效果如下：

对象的解构赋值：

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

刷新页面，粘贴代码，效果如下：

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对象

刷新页面，粘贴代码，效果如下：

和

var person = {
    name: ‘Q1mi‘,
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window对象

刷新页面，粘贴代码，效果如下：

但凡用到箭头函数，不要用this

对象

属性简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。

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

上面的写法等同于：

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

对象的方法也可以使用简洁表示法：

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

等同于：

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

刷新页面，粘贴代码，效果如下：

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

刷新页面，粘贴代码，效果如下：

注意：

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>

刷新页面，效果如下：

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>

刷新页面，效果如下：

二、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>

直接访问test.html页面，效果如下：

注意：请勿使用django框架运行，因为它也是用{{ }}，来表示一个变量。

所以使用django运行时，页面是空白的！

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

举例：

所有的dom操作，用vue来实现了

待续。。。。

原文地址：https://www.cnblogs.com/wxj1129549016/p/10022910.html

时间： 2024-10-07 01:21:42

Vue -- ES6 快速入门,Vue初识的相关文章

Vue.js快速入门

Vue.js简介 了解Vue.js Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,它不仅易于上手,还便于与第三方库或既有项目整合. Vue.js安装 下载Vue.js:https://github.com/vuejs/vue (我们现在使用的版本是2.5.16) 快速入门 声明式渲染 我们现在做个最简单的小例子,演示如何使用Vue.js实现声明式渲染. 创建Vue_1.htm

Vue.js—快速入门

Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 的一些语法和 AngularJS 的很相似 (例如 v-if vs ng-if).因为 AngularJS 是 Vue 早期开发的灵感来源.然而,AngularJS 中存在的许多问题,在 Vue 中已经得

vue.js快速入门（三）~组件入门~

组件系统是vue的一个重要的概念.他可以让我们使用独立的,可复用的小组件来构建大的复杂的应用,任何应用都可以看作是组件树.组件可以看做是自定义的Html代码.可扩展的html,封装可重用的html. 使用组件的使用分为三步 创建组件构造器,调用Vue.extend()创建,这是Vue构造器的扩展.他有个选项对象.选项对象有个template属性,定义组件要渲染的html 注册组件 ,Vue.compontent()注册 使用组件(在Vue实例的作用范围内使用组件,必须挂载在实例下,否则不生效)

Redis快速入门：初识Redis

[IT168 专稿]在之前的文章中介绍了<Redis快速入门:选择Key-Value Store>,今天给大家介绍Redis的入门知识.Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作由VMware主持. 1.数据类型 作为Key-value型数据库,Redis也提供了键(Key)和键值(Value)的映射关系.但是,除了常规的数值或字符串,Redis的键值还

Vue.js——快速入门

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将

快速入门Vue.js

了解一门编程语言,Hello World是我们的罗马之路. 这段代码在画面上输出"Hello World!". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--这是我们的View--> <div id="app&quo

快速入门Vue

前端技术发展很快,近日一个项目中想用Vue框架,对此对Vue基础进行了一些学习整理 何为Vue,官网 解释Vue.js(读音 /vju?/,类似于 view) 是一套构建用户界面的渐进式框架 这里记录主要是关于Vue中基础渲染DOM的一些操作 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <!-- moblile use --> <meta name="

Vue.js——快速入门Vuex

一. 什么是Vuex? Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. 上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解. 二. 为什么要使用Vuex? 试想这样的场景, 比如一个Vue的根实例

ES6 快速入门

快速了解ES6部分新特性... let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 20; } x // ReferenceError: x is not defined y // 20 var声明变量存在变量提升.也就是在声明变量之前就可以使用该变量. console.log(x) // undefined,var声明变量之前可以使用该变量 var x = 10; 而let不会这样,let