VUE_ES6新特性

最新推荐文章于 2024-05-28 01:51:14 发布
最新推荐文章于 2024-05-28 01:51:14 发布
阅读量752 收藏 3
点赞数 1
分类专栏： 前端 文章标签： vue.js es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49076273/article/details/129381085
版权

文章目录

一、安装Nodejs环境

ECMAScript 6（以下简称 ES6）是 JavaScript 语言的标准，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准

1、安装Nodejs环境

  1. 阿里的npm镜像地址：https://npmmirror.com/
  2. 下载Nodejs：https://nodejs.org/download/release/v16.17.1/node-v16.17.1-x64.msi
    一直点next即可。
  3. 安装完成后，win+r输入cmd打开命令行，查看是否安装成功：node -v
    在命令行中查看npm是否也安装成功：npm -v
  4. 安装cnpm镜像：npm install -g cnpm --registry=https://registry.npmmirror.com
  5. 在安装Nodejs的同时，会附带一个npm命令，npm 是Node的包管理工具，npm 的简单结构有助于 Node.js 生态系统的激增，现在 npm 仓库托管了超过1百万个可以自由使用的开源库包。

2、安装Babel转码器

  1. 打开vscode工具，选择打开文件夹，选择自己创建的空文件夹，然后在工具栏那里选择查看→终端，在终端中使用npm指令安装Babel：npm install --save-dev @babel/core

  2. 安装presets字段设定转码规则：npm install --save-dev @babel/preset-env

  3. 在项目的根目录下创建配置文件babelrc，并将presets规则加入到该配置文件，代码如下：

    {
  "presets": [
   "@babel/env"
   ],
  "plugins": []
}

  4. 安装Babel命令行转码工具：npm install --save-dev @babel/cli

  5. 创建es6Demo.js，添加如下ES6代码

    input.map(item => item + 1);

  6. 将es6Demo.js内的代码转换成ES5存入es5Demo.js中：npx babel es6Demo.js -o es5Demo.js
    也可以整个目录一起转换。

二、ES6新特性(一)

1、Let命令

  1. var关键字是函数级作用域，关键字let是块级作用域。即var的作用域在函数中，而let的作用域在块中。
  2. let不存在变量提升，即只能在声明后使用；而var可以先使用再声明。
  3. let不允许在一个块作用域内重复声明同一个变量，或者let在前var在后声明同一个变量也不可以（var就可以）。

2、Const命令

  1. const声明一个只读的变量。即一旦声明，该变量的值就不可改变（相当于常量）。也就是说同时也必须得立即初始化，不能留到后面再赋值。
  2. const的作用域与let相同，都是块级作用域，只在声明所在的块级作用域内有效。
  3. const声明的常量也是跟let一样不存在提升，即先声明后使用。
  4. const声明的常量也是跟let一样不可重复声明。

3、对象解构赋值

  1. 将现有对象的属性直接赋值到变量中，在script标签中，添加如下代码

    var user = {name:"zzx",age:21}
const {name,age} = user;
const {log} = console;
log(name,age);

    即将user对象解构到name和age中，直接使用name和age，而不用使用user.name。但是变量名必须与属性名相同，才能取到正确的值。

  2. 对象的解构赋值可以很方便地将现有对象的方法，赋值到某个变量。

    const {log} = console;
log(name,age);
const {abs,ceil,floor,random} = Math;
log(random())

    即直接将Math对象的方法赋值到变量中，只是通过变量名调用方法。直接使用random()，而不是Math.random()。

  3. 使用let命令声明的变量名，同时后面还有跟解构赋值时使用的变量名相同，此时解构赋值时的变量不能加let命令，而且整个语句需要加()。

4、字符串扩展

  1. 循环遍历for of

    var s = "lufei";
for(let i of s){
    console.log(i)
}

    即不用s[i]打印字符，可以使用i打印字符。

  2. 模板字符串(template string)是增强版的字符串，用反引号`标识。它可以作为普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

    let url = "https://www.bing.com";
let a = `<a href="${url}">biying</a>`;
console.log(a);.

    即将url字符串变量通过${}的方式嵌入到另一个字符串变量当中。并且字符串的开始和结束需要加上`。

5、 字符串新增扩展

  1. includes()：返回布尔值，表示是否找到了参数字符串
    startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部

    let s = "lu fei";
console.log(s.includes("u f"));
console.log(s.startsWith("l"));
console.log(s.endsWith("i"));

    这三个方法都支持第二个参数，表示开始搜索的位置

     let s = "lu fei";
 console.log(s.includes("f",2));
 console.log(s.startsWith("f",3));
 console.log(s.endsWith("e",5));

    这3个方法的第二个参数，也就是从0开始到该下标作为该字符串或者从该下标开始到字符串结束位置作为该字符串（不包含该下标对应的值）。

  2. repeat(x)：将原字符串重复x次，然后赋值给一个新的字符串并返回。

    let s = "lu fei";
console.log(s.repeat(3));

  3. ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全，返回一个新字符串。
    padStart()：用于在头部补全。
    padEnd()：用于在尾部补全。

    let s = "lu fei";
console.log(s.padStart(8,"x"));
console.log(s.padEnd(8,"x"));

    即将字符串s用字符x补全到8个字符。

  4. trimStart()和 trimEnd()与trim()方法的行为一致。
    trimStart()消除字符串头部的空格
    trimEnd()消除尾部的空格

    let str = "     haizeiwang    ";
console.log(str.trimStart());
console.log(str.trimEnd());

  5. at()：接收一个整数作为参数，返回参数指定下标位置的字符，支持负索引（即倒数）。

    let s = "lu fei";
console.log(s.at(0));
console.log(s.at(-1));

    即从后往前的下标从-1开始，从前往后的下标从0开始。

三、ES6新特性(二)

1、扩展运算符(…)

  1. 使用扩展运算符进行打印

    var arr = [10,20,30];
console.log(...arr);

  2. 使用扩展运算符将数组作为参数打印最大值max

    var arr = [10,20,30];
console.log(Math.max(...arr));

  3. 合并数组

    var arr = [10,20,30];
var arr2 = [30,20,10];
console.log([...arr,...arr2]);

2、数组的新增方法

  1. arguments伪数组转换为真数组

    function add(){
    let collect = Array.from(arguments);
    collect.push(40);
    console.log(collect);
}
add(10,20,30);

  2. 元素集合伪数组转换为真数组

    let h3s = document.querySelectorAll('h3');
console.log(Array.from(h3s));

    在body标签内script标签外增加h3标签。

  3. 对象伪数组转换为真数组

    var user = {
    "0" : "zzx",
    "1" : 20,
    "2" : "男",
    length : 3
}
console.log(Array.from(user));

  4. 将一组数值转换成数组

    console.log(Array.of(10,20,30));

    Array(10)的话则是开辟一个空间为10的数组。

3、对象内的简洁表示法

  1. 属性的简洁表示法

    let name = "zzx";
const user = {
    name,
    age:21
}
console.log(user.name);

  2. 方法的简洁表示法

    let name = "zzx";
const user = {
    name,
    age:21,
    getName(){
        console.log(this.name);
    }
}
user.getName();

    即方法不需要写:function

  3. 返回值的简洁表示法

    function getPoint() {
	 const x = 11;
	 const y = 22;
	 return {x, y};
}

console.log(getPoint())

  4. 属性名表达式，即在方括号内用表达式作为对象的属性名。

    let propKey = 'zzx';
let obj = {
    [propKey]: true,
    ['a' + 'bc']: 123
};
console.log(obj)

    即可以在对象内通过[表达式]的形式动态定义属性名。

  5. 对象的扩展运算符

    let z = { a: 1, b: 2 };
let n = { ...z };
console.log(n);

    即用…扩展运算法打印对象时，不能直接打印，通过扩展运算法给另一个变量赋值后，再打印那个变量。

4、箭头函数

  1. 箭头函数省略function关键字，并且当语句等于一条时，可以省略大括号

    var add = (x,y) => x+y;
 console.log(add(4,5))

  2. 箭头函数使代码简洁（匿名函数）

    var arr = [10,20,30]
	arr.map(item =>{
	console.log(item);
})

  3. 对于普通函数来说，内部的this指向函数运行时所在的对象。
    而箭头函数没有自己的this对象，内部的this就是定义时上层作用域中的this。

    var name = "slong";
var user = {
    name:"lfei",
    getName(){
        setTimeout(() =>{
            console.log(this.name); 
        })
    }
}
user.getName()

    即对于普通函数而言，this.name指向的是外层的name，也就是"slong"；
    而箭头函数没有this，此时this指的是箭头函数外面一层的this，也就是getName()方法那层的name（“lfei”）。

5、Set的使用

  1. Set中成员的值都是唯一的，没有重复的值。即去重。

    const s = new Set();
let arr = [1, 2, 3, 4, 5, 5, 2];
arr.forEach(x => s.add(x));

for (let i of s) {
    console.log(i);
}

  2. Set函数可以接受一个数组作为参数

    let arr = [1, 2, 3, 4, 5, 5, 2];
const s = new Set(arr);
for (let i of s) {
    console.log(i);
}

  3. 字符串去重

    console.log([...new Set("abababc")].join(""));

  4. 使用Set的add()方法加入值时，不会发生类型转换

    var set = new Set();
set.add("8")
set.add(8)
console.log(set);

    即整数8和字符串8并不会产生去重。

  5. size属性，即打印set的长度。

    var set = new Set();
set.add(8)
console.log(set.size);

  6. delete()方法，根据值删除,返回boolean值

    var set = new Set();
set.add(8)
console.log(set.delete(8));

  7. has()方法，根据值判断是否存在，返回boolean值

    var set = new Set();
set.add(8)
console.log(set.has(8));

  8. clear()方法，清空set

    var set = new Set();
set.add(8)
set.add(9)
set.clear()
console.log(set.size);

四、ES6新特性(三)

1、promise对象

Promise是异步编程的一种解决方案。Promise构造函数接收一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript 引擎提供。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

  1. promise加载图片资源
    <div id="myid">正在加载</div>
<script>
    var image = document.getElementById("myid");
    function loadImageAsync(url){
        const promise = new Promise(function(resolve,reject){
            //异步处理：消耗时间的代码
            const image = new Image();
            image.src = url;
            image.onload = function(){
                resolve(image)
            }
            image.onerror = function(){
                reject(new Error("Could not load image at"+url))
            }
        
        })
        return promise;
    }
    const promise = loadImageAsync("https://www.baidu.com/img/pcdoodle_2a77789e1a67227122be09c5be16fe46.png")
    promise.then(function(data){
            console.log(data);
            image.append(data)
        },function(error){
            image.html(error)
            console.log(error)
    })
</script>
    即将resolve和reject函数的给到Image对象，如果图片成功加载就调用resolve，失败就调用reject。将promise对象返回。后面then则是处理执行成功或失败后的结果。将其图片或失败信息添加到div标签中。

2、Promise对象封装Ajax

  1. Promise对象封装Ajax发送网络请求
    const getJSON = function (url) {
    const promise = new Promise(function (resolve, reject) {
    const handler = function () {
      if (this.readyState !== 4) {
        return;
       }
      if (this.status === 200) {
        resolve(this.response);
       } else {
        reject(new Error(this.statusText));
       }
     };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
   });
  return promise;
 };
 getJSON("https://www.bing.com").then(function (json) {
    console.log(json);
 }, function (error) {
    console.error('出错了', error);
 });
    但是由于跨域，打印错误信息。

3、Async函数

Async函数可以将异步操作变为同步操作，并且使异步操作更加方便。

  1. 使用async函数和await修饰方法，从而实现同步

    function timeout(ms) {
    return new Promise((resolve) => {
        setTimeout(function(){
            console.log("OK")
            resolve();
        }, ms)
   });
}

async function asyncPrint(value, ms) {
    await timeout(ms);
    console.log(value);
}

asyncPrint("OK2", 500);

    即使用async函数修饰方法，并且在该方法下用async函数的await修饰定时器方法，从而实现先执行完定时器再执行打印。await修饰，即等待被修饰的方法执行完毕再往下执行，阻塞。

4、Class的使用

  1. Class的基本使用

    class Person{
  constructor(name,age){
       this.name = name;
       this.age = age;
  }
      getName(){
           console.log(this.name);
      }
  }
  let person = new Person("zzx","18");
  person.getName()

    即通过class来定义类，与Java的class类似。并且不存在提升，即先声明后使用。

  2. 通过类实例对象调用方法

    class People{
  say(){
    console.log("what fuck");
   }
}
var p = new People();
p.say()

  3. 类的实例对象可调用的属性

    class Person{
  constructor(name,age){
       this.name = name;
       this.age = age;
  }
      getName(){
           console.log(this.name);
      }
  }
  let person = new Person("zzx","18");
  getName();
  console.log(person.name,person.age);

  4. 静态方法，类相当于实例的原型，所有在类中定义的方法，都会被实例（new）继承。
    在方法前加上static关键字，表示该方法不会被实例继承，不能通过实例调用，而是要通过类来调用。

    class Person {
    static classMethod() {
        console.log("Hello");
    }
}

Person.classMethod()

var p = new Person();
p.classMethod()

  5. 静态属性，即通过类调用的属性。

    class People{}
People.age = "18"
console.log(People.age);

  6. Class的继承（extends）

    class Person{
	constructor(name,age){
	    this.name = name;
	    this.age = age;
	}
	getName(){
	    console.log(this.name);
	}
	static getInfo(){
	    console.log("父类")
	}
}
class Student extends Person{
	constructor(name,age,schoolName){
	    super(name,age);
	    this.schoolName = schoolName;
	}
	getSchool(){
	    console.log(this.schoolName);
	}
}
let student= new Student("zzx",18,"dongruan");
student.getName();
Student.getInfo();
student.getSchool();

    即Student类继承Person类，Student类在构造方法中必须先通过父类的构造方法完成塑造，得到与父类同样的实例属性和方法，然后再对其加工，添加自己的实例属性和方法。因为Student类继承Person类，Person类的getName方法没有加static关键字，所以可以直接调用，但是getInfo方法加了static，所以不能通过student实例对象进行调用。

5、Module的语法

  1. JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型的、复杂的项目形成了巨大障碍。
    通过export命令显式指定输出的代码；通过import命令输入。

  2. 使用Nodejs方式测试Module语法
    nodejs采用的是CommonJS的模块化规范，使用require引入模块；而import是ES6的模块化规范，想要使用import，必须引入babel转义支持，通过babel进行编译，使其成为node的模块化代码。

  3. 在终端进入到文件夹中，全局安装babel-cli：npm install -g babel-cli

  4. 安装 babel-preset-env：npm install -D babel-preset-env

  5. 在根目录下创建a.js，添加export输出代码

    export var A = "A"

  6. 在index.js中，添加import输入

    import { A } from "./a.js"
console.log(A);

    此时如果需要输入多个变量，则需要在大括号中用,将变量隔开；需要给变量改名，则需要在前面加上as。

  7. 运行测试：babel-node --presets env index.js
    此时index.js的大括号中的属性名需要与a.js中的属性名相同。如果不添加export和import，则会报错，因为Nodejs中文件与文件之间具有隔离性。

  8. 用*指定一个对象，所有输出值都加载到这个对象上。
    1）将a.js修改如下

    export var A = "11"
export var B = "22"
export function add(){
    console.log("A+B="+(A+B))
}

    2）将Index.js修改如下

    import * as algorithm from "./a.js"
algorithm.add()
console.log(algorithm.A,algorithm.B);

    即在import输入时，使用*将a.js的属性和方法都加载到algorithm对象中，通过algorithm对象来调用。

  9. export default命令，指的是在指定输出代码的前面加入，可以不设置方法名或变量名。然后在import输入时，可以任意取名且可以不加大括号，不需要加as关键字。但是一个js文件中只允许存在一个export default。

总结

  1. 1）安装Nodejs环境，会带有npm命令，但是npm镜像是国外的，安装国内的cnpm，但好像现在cnpm安装完成后，要用npm指令。即指令还是npm，但是此时的镜像已经改成国内的镜像。
    2）创建VUE项目时，直接在VSCODE中打开一个新文件夹，在文件夹内可以在创建文件夹，然后在准备放项目的文件夹中直接打开终端，进入到文件夹中，通过cnpm指令直接创建VUE项目。
    Babel的作用是ES6代码转换成ES5，实现向下兼容。
  2. 1）let和const命令，都是不存在提升、不可重复声明、块级作用域。但是使用const声明后不可改变它的值。
    2）对象解构赋值，即可以将对象中的属性和方法，直接赋值给变量。但是此时变量名必须与对象中的属性名或方法名相同。可以很方便取出属性或方法，而不用通过对象去获取。
    3）includes()、startsWith()、endsWith()这三个方法是判断字符串是否存在，都是返回布尔值。
    后面这些字符串方法，都是返回一个新的字符串对象。
    at()接收一个整数下标参数，搜索字符串。
    padStart()、padEnd()用来补全字符串。
    repeat()接收一个整数，用来将原字符串进行整数次复制。
    trimStart()、trimEnd()用来去掉空格字符。
  3. 1 Array.from()是将伪数组转换成真数组。
    Array.of()是将一组数值转换成数组。
    2）()=>{}，箭头函数没有自己的this，它是引用外一层的this。箭头函数可以使代码更简洁，并且在语句等于1条时，可以省略大括号。
    3）Set对象有去重的作用，并且有add()、delete()、has()、clear()方法，以及size属性。
    add()，添加值到Set对象中。
    delete()，从Set对象删除对应的值，返回布尔值。
    has()，即判断该值是否存在，返回布尔值。
    clear()，即清空Set对象。
    size属性，即Set对象的长度。
  4. 1）Promise是异步编程的一种解决方案。promise可以接收2个参数resolve和reject函数分别来处理成功和失败的操作。将promise对象返回。调用该promise对象的then方法对成功或失败的结果进行处理操作。
    2）Promise对象封装Ajax发送网络请求的异步操作。使用XMLHttpRequest对象发送网络请求，并使用一个函数来处理resovle和reject函数；最后将promise对象返回。然后调用promise对象的then方法处理成功或失败的响应信息。
    3）Async函数可以将异步操作变为同步操作，并且使异步操作更加方便。使用Async和await在异步中实现同步。即外层方法被Async修改，内层被await修饰时，执行到被await修饰的方法时，会被阻塞等待该方法执行完再往下执行。
  5. Class类，与java的class类似，也可以通过extends关键字继承。
    1）通过static修饰的方法，不能通过实例对象进行调用。
    2）静态属性，即类本身的属性。也就是说通过 类.属性（静态属性赋值）的方式去赋值时，new出来的类的实例对象是无法调用到该静态属性的。
    3）Student类在构造方法中必须先通过父类的构造方法完成塑造，得到与父类同样的实例属性和方法，然后再对其加工，添加自己的实例属性和方法。如果子类在构造方法中没有调用super方法，则子类得不到自己的this对象同时会报错。
  6. Module语法，主要有export、import、export default。在Nodejs中采用CommonJS的模块化规范，使用require引入模块。而import是ES6的模块化规范关键字。需要使用babel进行转义。export显式指定一个输出的代码，import显示指定输入的代码，export default是显示指定一个输出代码的另一种形式，变量或方法可以不命名，但是每个js只允许存在一个，此时import接收时可以任意取名并且可以不加{}。
    在import中，as关键字可以为引入的变量重命名。
    在 as 变量名 前面加上*可以让引入的js文件中所有export修饰的方法或变量加载到该变量，并且不用加{}。
帅得真的是无敌了
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2.0中使用ES6
一个萌新程序猿的奋斗史
07-02 1万+
        在学习Vue.js之前，我们首先要了解ES6，ECMAScript 6(简称ES6)是JavaScript的语言标准。我是在Vue-cli脚手架上进行ES6的学习，Vue环境的搭建可以看我上一篇博客（小飞机）        1.let与const命令                需要注意的一点是：let只在当前所在的代码块有效。        所以在for循环中我们一般用let命...
五分钟，看懂vue项目会用到哪些ES6常用语法
Lushengshi的博客
08-17 3230
前端项目开发中，都会使用到的ES6命令，但是你知道什么是ES6命令嘛？
ES6 有哪些新特性 ? 全网最详细
04-28 5025
ES6 有哪些新特性 ? 全网最详细
最全的—— ES6有哪些新特性？_es6新特性
最新发布
2401_85124786的博客
05-28 848
解构赋值是对赋值运算符的扩展。它是一种针对或者进行模式匹配，然后对其中的变量进行赋值。、以及ES6新增的和都可以使用解构表达式。
es6新增哪些特性
jiangshen_a的博客
09-01 1万+
es6新增哪些特性？
ES6 js实例方法：trimStart()，trimEnd()
weixin_46820017的博客
01-11 1058
实例方法：trimStart()，trimEnd() ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。 const s = ’ abc '; s.trim() // “abc” s.trimStart() // "abc " s.trimEnd() // " abc" 上面代码中，trimStart()只消除头部
vue_vuejs_js_vue_
10-01
Vue的双向绑定是其核心特性之一，它使得视图和模型之间的数据能自动保持同步。这一机制主要依赖于两个核心概念：`数据劫持（Data Observers）`和`发布订阅（Event Emitter）`。 1. **数据劫持**：Vue通过`Object....
js-multi-seed:构建多页混合型应用。同时支持React、Vue技术和ES6新特性，兼容jQuery等传统Web技术的使用
05-30
在支持React、Vue技术和es6新特性的同时，兼容jQuery等传统Web技术的使用。是否兼容IE 8No !如需在 IE 系列浏览器下使用请在 .ejs 文件中添加（默认已添加）<meta ...
vue_template.zip
08-30
8. **Babel**：Babel是一个转换JavaScript代码的工具，确保你的代码能在所有目标环境中运行，特别是对于支持ES6+新特性的代码。在`vue_template`中，Babel可能用于将现代JavaScript语法转换为广泛兼容的ES5语法。 ...
vue，es6，前端面试题总结
04-27
Vue.js 是一个轻量级的渐进式框架，而ES6（ECMAScript 2015）则是JavaScript语言的一次重大更新，引入了许多新特性和语法糖，极大地提升了开发效率和代码可读性。下面将深入探讨这两个技术在面试中常见的知识点。 1...
ES6新特性五：Set与Map的数据结构实例分析
12-01
本文实例讲述了ES6新特性五之Set与Map的数据结构。分享给大家供大家参考，具体如下： 1. Set ① 定义：它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。 var s ...
前端基础 es6、vue
liangjiayy的博客
03-15 2433
前端技术类比 es6 vue
vue-app项目知识点总结（一）
青椒的博客
05-25 1979
一. FeatureView 独立组件封装FeatureView div>a>img 二. TabControl 独立组件的封装 props -> titles div>根据titles v-for遍历 div -> span{{title}} css相关 选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom current...
Vue, App与我（十）
JackDan9
09-09 728
Vue, App与我（十）前言：订单页面 Big-man最近在书写一个天天特惠的案例，所以对于订单的处理开始有了一些看法和想法，由于管理App的仅仅只有Big-man一个人，所以后台的实现逻辑、前端的页面展现以及将两者相结合的方法和方式都是Big-man在进行测试和维护的。所以Big-man觉得应该把他处理这一功能的问题、解决办法以及思路分享到自己的博客上。 前端展现：
Vue2.0项目工程升级3.0
success400的博客
07-16 1万+
建议读者先通过通过官网先了解一下链接: Vue CLI3.0 下面就简单分享一下我的升级过程因为我构建项目都是基于3.0的，所以对于2.0的用户可以先升级一下脚手架工具 已经装了2.0的话就需要先卸载 npm uninstall vue-cli -g 或 yarn global remove vue-cli 安装新版本脚手架 npm install -g @vue/cli 或 yarn global add @vue/cli 然后创建一个新的项目工程，如果没有创建过3.0项目工程建议先阅读一下这
Vue开发中常用的ES6新特性
前端达人
07-04 411
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，正式发布与2015年6月。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序...
vue开发----关于字符串去除空格的方法
热门推荐
Crazy_LinkFern的博客
08-27 1万+
第一种：正则匹配 str = str.replace(/\s*/g,''); // 去除字符串内所有的空格 str = str.replace(/^\s*|\s*$/g,''); // 去除字符串内两头的空格 str = str.replace(/^\s*/,''); // 去除字符串内左侧的空格 str = str.replace(/(\s*$)/g,''); // 去除字符串内右侧的...
ES6常用新特性
qq_57104988的博客
08-25 385
const（1）let：块级作用域（大括号包裹的就是一个块级），不可重复申明，但是可以重新赋值。（2）const：与let的唯一区别是，声明变量要初始化（就是赋一个值），并且值不能改变。但是如果创建的是对象，对象里面的属性值是可以修改的（因为const确定的地址是无法修改，但是对象属性都是在同一个内存地址）。1、函数声明的方式（常用）}2、函数表达式的方式};3、箭头函数的方式//多个参数需要括号};//以下两种写法都有效，只有一个参数可以不写括号//没有参数需要括号。......
vue es5 es6
09-05
例如，你可以使用ES6的类语法来定义一个Vue组件，并在组件中使用箭头函数、模板字符串等新的语法特性。 综上所述，Vue可以使用ES5和ES6进行开发。你可以根据自己的喜好和项目需求选择使用哪个版本的JavaScript来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值