精华内容
下载资源
问答
  • npm install -D babel-loader @babel/core @babel/preset-env webpack vue-loader 新版本 babel-loader 默认支持es7语法! 如果需要给 node_modules 内的文件支持es7 则需要如下 正确示范 内配置 如果只是单纯支持 ...

    安装:

    npm install -D babel-loader @babel/core @babel/preset-env webpack vue-loader
    

    新版本 babel-loader 默认支持es7语法!
    如果需要给 node_modules 内的文件支持es7 则需要如下 正确示范 内配置
    如果只是单纯支持 es7 则不需要配置 include

    正确示范:

    // webpack.config.js:
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    module.exports = {
       ...
       module: {
        rules: [
          {
            test: /\.m?js$/,
            include: [  // 设置包含的文件后 编译时 babel-loader 只用于编译包含内的文件
              path.resolve(__dirname,'./src'),
              path.resolve(__dirname,'./node_modules/@vendor/your-module')
            ],
            loader: 'babel-loader',  //默认支持 es7
            ...
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      plugins: [
        new VueLoaderPlugin()  //使用 vue-loader 请确保在你的 webpack 配置中添加 Vue Loader 的插件
      ]
    }
    

    错误示范:

    // webpack.config.js:
    {
       ...
       module: {
        rules: [
          {
            test: /\.m?js$/,
    		exclude: /node_modules/,      // 排除的文件 X
            include: [                    // 包含的文件
              path.resolve(__dirname,'./src'),
              path.resolve(__dirname,'./node_modules/@vendor/your-module')
            ],
            loader: 'babel-loader',       //默认支持 es7
            ...
          }
        ]
      }
    }
    

    原因:include 内添加文件表示只有该文件内编译才会使用该 loader
    所以使用 include 后根本没必要再写 exclude: /node_modules/,exclude的处理权限高于 include, 所以当你使用 include 时还添加 exclude: /node_modules/,include 就不生效了!

    当写了 include 时, exclude 只能用来排除 include 内包含的文件:
    写法如下:

    include: [
    	path.resolve(__dirname, "app")
    ],
    exclude: [
    	path.resolve(__dirname, "app/demo-files")
    ],
    
    展开全文
  • vue es7装饰器Decorator

    2019-10-18 16:28:48
    Decorator 属于es7的语法糖 所以我们在项目中使用的时候要借助babel插件编译: cnpm install babel-plugin-transform-decorators-legacy --save-dev 然后在 .babelrc 中进行配置 { "plugins": ["transform-...

    Decorator 属于es7的语法糖 所以我们在项目中使用的时候要借助babel插件编译:

    	cnpm install babel-plugin-transform-decorators-legacy  --save-dev
    

    然后在 .babelrc 中进行配置

    	{
    	 	 "plugins": ["transform-decorators-legacy"]
    	}
    
    展开全文
  • Vue全家桶 Node leanCloud ES6/ES7还原腾讯微云
  • 自豪地使用ES7Vue 2,Koa 2,Webpack 4,Babel 7和Mocha 特征 后端(Koa)和前端均在dev mod中支持HRM 支持SPA和SSR模式,静态HTML页面生成也受支持 UIKit用于支持响应式网页设计 内置网络优化。 无需手动配置...
  • 19年录制ES6教程ES7ES8实战应用vue.js教程
  • vue的那种。异步接口调用,常常使用到的语法,promise的概念是什么呢?调用接口的方式,第一种为,fetch进行接口调用,第二种为,axios进行接口的调用。 es7的语法结构?async/await方式调用接口,基于不同接口的...

    作者 |  Jeskson

    掘金 |  https://juejin.im/user/5a16e1f3f265da43128096cb

    2020.1.12

    前端发请求,调用后端接口,来获取特定格式的数据,老板问了,你会前后端交互模式吗?vue的那种。异步接口调用,常常使用到的语法,promise的概念是什么呢?调用接口的方式,第一种为,fetch进行接口调用,第二种为,axios进行接口的调用。

    es7的语法结构?async/await方式调用接口,基于不同接口的调用方式来实现案例。

    让我们了解一下前后端的交互模式,学习一下promise的语法,来回答面试官的问题,基于promise来实现异步调用,就算你会promise?那你了解fetch用法和async/await用法吗?处理异步调用接口的方式。

    网上一图,回调地狱:看到晕,使代码难以理解和维护。

    前后端的交互是什么

    前后端的交互就是前端的浏览器去调用后端的接口,拿到后端的数据,在做前端的处理,进行渲染。客户端与服务器的通信模式,前后端交互,调用接口的方法,第一种,原生的ajax,第二种,基于jquery的ajax,第三种,基于fetch,第四种,基于axios。

    前端是通过请求地址向后端发送请求的,标准的url格式是什么样的呢?

    格式如下:

    schema://host:port/path?query#fragment
    

    第一个schema为协议,比如http,https,ftp等,第二个,host为域名或者ip地址,第三个port为端口,http默认为80端口,是可以省略的,第四个path为路径,比如/index,第五个query为查询参数,比如name=dada&age=12,第六个fragment为锚点,哈希Hash,是用于定位页面的某个位置。

    符合规则的url有哪些是正确的呢?

    http://www.dada.cn
    http://www.dada.cn/index/dada
    http://www.dada.cn/index/dada?name=dada
    http://www.dada.cn/index/dada?name=dada#theme
    

    新型的url地址,restful形式的。HTTP的请求方式,第一种,使用GET为查询,第二种,使用POST为添加,第三种,使用PUT为修改,第四种,使用DELETE为删除。

    符合规则的url地址:

    http://www.dada.com/index GET
    http://www.dada.com/index POST
    http://www.dada.com/index/1 PUT
    http://www.dada.com/index/2 DELETE
    

    promise对象

    promise用于表示一个异步操作的最终完成(或失败),以及结果值。

    Promise对象有以下两个特点

    对象的状态不受外界影响

    一旦状态改变,就不会再变,任何时候都可以得到这个结果

    const promise1 = new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve('foo');
      }, 300);
    });
    
    
    promise1.then(function(value) {
      console.log(value);
      // expected output: "foo"
    });
    
    
    console.log(promise1);
    // expected output: [object Promise]
    

    语法:

    new Promise( function(resolve, reject) {...} /* executor */  );
    

    因为 Promise.prototype.then 和  Promise.prototype.catch 方法返回promise 对象, 所以它们可以被链式调用。

    promise用法

    promise是什么呢?它是用于异步计算,将异步操作队列化,按照期望的顺序执行,返回符合预期的结果,可以在对象之间传递和操作promise。

    创建promise

    const da = new Promise((resolve, reject) => {
      //   resolve(someValue); // fulfilled
      //   reject("failure reason"); // rejected
    });
    
    function da(url) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = () => resolve(xhr.responseText);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
      });
    };
    

    简单的实例

    new Promise(resolve => {
      setTimeout(() => {
        resolve('hello')
      }, 2000)
    }).then(res => {
      console.log(res)
    })
    

    异步操作,事件监听

    document.getElementById('#start').addEventListener('click',start,false);
    
    
    function start() {
     // 响应事件,进行相应的操作
    }
    
    
    //jquery on 监听
    $("#start").on("click", start)
    

    回调

    $.ajax(url, {
     success(res) {
     }
    })
    
    
    // 在页面加载完毕后回调
    $(function() {
     // 页面结构加载完成
    })
    

    在JavaScript中,异步情况,第一种为定时任务,第二种为ajax,第三种事件函数。

    new Promise(
      function (resolve, reject) {
        resolve('成功') // 数据处理完成
        // reject('失败') // 数据处理出错
      }
    ).then(
      (res) => {console.log(res)},  // 成功
      (err) => {console.log(err)} // 失败
    )
    

    异步编程与promise

    $.ajax({
     url: '',
     success: function(data) {
      console.log(data)
     }
    });
    

    index.js

    const express = require('express')
    const app = express()
    const bodyParser = require('body-parser')
    // 处理静态资源
    app.use(express.static('public'))
    // 处理参数
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false}));
    
    
    // 设置允许跨域访问服务
    app.all("*", function(req,res,next){
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Methods", "PUT,GET,POST,DELETE,OPTIONS");
     res.header("Access-Control-Allow-Headers","X-Requested-With");
     res.header("Access-Control-Allow-Headers","Content-Type");
     next();
    });
    
    
    // 路由
    app.get('/data', (req,res) => {
     res.send("hello world!")
    })
    
    
    // 启动监听
    app.listen(3000, () => {
     console.log("runing...")
    })
    

    异步编程,多次异步调用,结果顺序结果不确定

    promise是异步编程的一种解决方案,从语法上来讲,promise是一个对象,从它可以获取异步操作的消息。使用promise的好处有哪些呢?

    它可以避免多层异步调用嵌套问题(回调地狱),promis对象提供了简洁的api,使得控制异步操作更加容易。回调地狱,多层嵌套请求问题,请求接口调用后台数据,有两种可能性,一种为成功回调,一种为失败回调,成功后写一下成功后的操作代码,失败后也要写一下失败后的操作代码。

    在JavaScript中的世界里,所有的代码都是单线程执行的。因为这个缺点,所以会导致在JavaScript中的所有网络操作,浏览器事件,都必须是异步执行的,异步执行可以用回到函数实现。

    function callback() {
     console.log("dada");
    }
    console.log("dada setTimeout()");
    
    
    setTimeout(callback, 1000);
    // 1秒后调用callback函数
    

    注意,异步操作会在将来某个时间点触发一个函数调用。

    ajax的经典异步操作

    request.onreadystatechange = function() {
     if(request.readyState === 4) {
      if(request.status === 200) {
       return success(request.responseText);
      }else{
       return fail(request.status);
      }
     }
    }
    
    'use strict';
    
    
    new Promise(function() {} );
    
    
    // 直接运行测试:
    console.log('支持Promise!');
    

    如果同时发送多个ajax的请求,返回来的结果是不确定的,要想返回的结果顺序确定下来,就必须进行嵌套,如果嵌套就会有回调地狱的问题,这样导致的代码可读性就会降低,所以就有promise语法来解决这一回调地狱的问题。

    所以promise的出现的好处就是为了解决地狱回调,可以避免嵌套问题,和简洁的代码结构,可读性增强。

    console.log(typeof Promise)
    

    示例

    let da = new Promise(function(resolve, reject){
        // 当异步代码执行成功时,会调用 resolve(...)
        // 当异步代码失败时, 会调用 reject(...)
        
        //使用setTimeout(...)来模拟异步代码
     
        setTimeout(function(){
            resolve("成功!"); 
        }, 250);
    });
    
    
    da.then(function(res){
        //res的值是上面调用resolve(...)方法传入的值.
        
        console.log("dada" + res);
    });
    

    promise的基本用法

    首先实例化promise对象,构造函数中传递函数,该函数中用于处理异步任务,有两个参数,resolve和reject用于处理成功和失败的两种情况,并通过p.then获取处理结果。

    then()方法返回一个promise:

    const da = new Promise(function(resolve, reject) {
      resolve('da!');
    });
    
    
    da.then(function(value) {
      console.log(value);
      // expected output: "da!"
    });
    

    语法

    p.then(onFulfilled[, onRejected]);
    
    
    p.then(value => {
      // fulfillment
    }, reason => {
      // rejection
    });
    
    
    var dada = new Promise((resolve, reject) => {
      resolve('成功!');
      // or
      // reject(new Error("出错了!"));
    });
    
    
    dada.then(value => {
      console.log(value); // 成功!
    }, reason => {
      console.error(reason); // 出错了!
    });
    

    catch()方法返回一个promise,并且处理拒绝的情况

    p.catch(onRejected);
    
    
    p.catch(function(reason) {
       // 拒绝
    });
    

    finally()方法返回一个promise,在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。

    p.finally(onFinally);
    
    
    p.finally(function() {
       // 返回状态为(resolved 或 rejected)
    });
    
    new Promise(resolve => {
        setTimeout(() => {
          resolve('hello')
        }, 2000)
      }).then(val => {
        console.log(val) //  参数val = 'hello'
        return new Promise(resolve => {
          setTimeout(() => {
            resolve('world')
          }, 2000)
        })
      }).then(val => {
        console.log(val) // 参数val = 'world'
      })
    

    代码例子:

    var p = new Promise(function(resolve, reject) {
     // 成功回调 resolve()
     // 失败回调 reject()
    });
    p.then(function(ret) {
     // resolve得到正常的结果
     },function(ret) {
     // reject得到错误的结果
    });
    

    resolve作用为将promise对象的状态从“未完成”变成为“成功”,即是从Pending变为resolved,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去,而reject的作用是将promise对象的状态从“未完成”变成“失败”,就是从Pending变成rejected,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

    promise有三种状态,第一种为Pending,待定,初始状态,第二种状态为fulfilled,实现,操作成功,第三种状态为rejected,被否决,操作失败。

    当promise状态发生改变时,就会触发then()里面的响应函数处理,promise状态一旦改变,就不会再变了。所以promis对象的状态改变有两种情况,第一种,从pending变为fulfilled,第二种为,从pending变为rejected。

    基于promise处理ajax请求,处理原生ajax

    function queryData(url) {
     return new Promise(function(resolve,reject){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
       if(xhr.readyState != 4) return;
       if(xhr.status == 200) {
        resolve(xhr.responseText)
       }else {
        reject('出错了');
       }
      }
      xhr.open('get',url);
      xhr.send(null);
     })
    }
    

    发送多个ajax请求

    queryData()
     .then(function(data){
      return queryData();
     })
     .then(function(data){
     return queryData();
    })
    .then(function(data){
     return queryData();
    });
    
    
    // return 是新的promise对象
    

    then参数中的函数返回值

    第一种,返回promsie实例对象,返回的实例对象会调用下一个then

    第二种,返回普通值,返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值

    promise常用的api

    实例方法有三种,第一种,p.then()得到异步任务的正确结果,第二种,p.catch()获取异常信息,第三种,p.finally()成功与否都会执行。

    queryData()
     .then(function(data){
      console.log(data);
     })
     .catch(function(data){
     console.log(data);
     })
     .finally(function(){
     console.log('finished');
    });
    

    promise常用api-实例方法

    function da() {
     return new Promise(function(resolve, reject) {
      setTimeout(function() {
      // resolve(123);
      reject('error');
     },100);
    })
    }
    
    
    da()
     .then(function(data){
      console.log(data)
      })
      .catch(function(data){
      console.log(data)
      })
      .finally(function(){
       console.log('dada')
      });
    
    da()
    .then(function(data){
    console.log(data)
    },function(data){
    console.log(data)
    })
    .finally(function(){
    console.log('dada')
    });
    

    对象方法

    promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果

    promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果

    Promise.all([p1,p2,p3]).then(result) => {
     console.log(result);
    })
    
    
    Promise.race([p1,p2,p3]).then(result) => {
     console.log(result);
    })
    

    代码:

    function queryData(url) {
     return new Promise(function(resolve, reject){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
       if(xhr.readyState != 4) return;
       if(xhr.readyState == 4 && xhr.status == 200) {
        // 处理正常的情况
        resolve(xhr.responseText);
        }else{
        // 处理异常情况
        reject('服务器出错');
       };
       xhr.open('get',url);
       xhr.send(null);
      });
     }
     
     var p1 = queryData(url);
     var p2 = queryDate(url1);
     
     Promise.all([p1,p2]).then(function(result){
     console.log(result)
    })
    

    在promise中常用到回调函数延时绑定,返回值,错误冒泡。

    const promise = new Promise((resolve, reject) => {
      console.log(1)
      resolve()
      console.log(2)
    })
    promise.then(() => {
      console.log(3)
    })
    console.log(4)
    VM49:2 1
    VM49:4 2
    VM49:9 4
    VM49:7 3
    undefined
    

    其中,promise构造函数是执行同步的作用,promise.then是执行异步函数的操作。

    let pro = new Promise(resolve => {
       setTimeout(() => {
         resolve('hello world')
       }, 2000)
     })
     setTimeout(() => {
       pro.then(value => {
       console.log(value) 
       // hello world
     })
     }, 2000)
    

    接口调用fetch的用法

    fetch的概述,它更加简单的数据获取方式,功能更加强大,更加灵活,基于promise实现的。

    语法结构:

    fetch(url).then()
    .then()
    ...
    .catch()
    

    fetch的基本用法

    fetch('/da').then(data=>{
    return data.text();
    }).then(ret={
    console.log(ret);
    });
    

    text()方法属于fetchapi中的一部分,它返回一个promise实例对象,用于获取后台返回的数据。

    fetch请求参数

    method(string)

    http请求方法,默认为GET,可以使用POST,PUT,DELETE

    body(string)

    http的请求参数

    headers(object)

    http的请求头

    fetch('/da', {
     method; 'get'
    }).then(data=>{
    return data.text();
    }).then(ret=>{
    console.log(ret);
    });
    

    GET请求方式的参数传递

    fetch('/da?id=123').then(data=>{
     return data.text();
    }).then(ret=>{
    console.log(ret);
    });
    
    
    fetch('/da/123', {
     method: 'get'
    }).then(data=>{
    return data.text();
    }).then(ret=>{
    console.log(ret);
    });
    

    delete请求方式的参数传递

    fetch('/da/123', {
     method: 'delete'
    }).then(data=>{
     return data.text();
    }).then(ret=>{
     console.log(ret);
    });
    

    fetch请求参数的post请求方式的参数传递

    fetch('/da', {
     method: 'post',
     body: 'name=dada',
     headers: {
      'content-Type': 'application/x-www-form-urlencoded',
     }
     }).then(data=>{
      return data.text();
     }).then(ret=>{
      console.log(ret);
     });
    

    post请求方式的参数传递

    fetch('/da', {
     method: 'post',
     body: JSON.stringify({
      name: 'dada',
      age: 12
     })
     headers;{
      'Conent-Type': 'application/json',
     }
     }).then(data=>{
      return data.text();
     }).then(ret=>{
     console.log(ret);
    });
    

    fetch响应结果

    响应数据格式

    text()

    将返回体处理成字符串类型

    json()

    返回结果和json.parse(presponseText)相同

    接口调用axios用法

    第三方的库,很强大,是一个局域promise用于浏览器和node.js的HTTP客户端。

    它的特性,第一点是支持浏览器和node.js,第二点是支持promise,第三点,能够拦截请求和响应,第四点,可以自动转换json类型。

    axios的基本用法

    axios.get('/dada')
    .then(ret=>{
    console.log(ret.data);
    });
    

    axios的常用api

    get,查询数据,post,添加数据,put,修改数据,delete,删除数据。

    get传递参数,第一,通过url传递参数,第二种,通过params传递参数

    axios.get('/da?id=123')
    .then(ret=>{
     console.log(ret.data);
    })
    

    restful传参

    axios.get('/dada/123')
    .then(ret=>{
    console.log(ret.data)
    })
    
    axios.get('/da', {
    params: {
     id: 123
    }
    })
    .then(ret=>{
    console.log(ret.data)
    })
    

    delete传递参数

    参数传递方式与get类似

    axios.delete('/da?id=1)
    .then(ret=>{
    console.log(ret.data)
    })
    
    
    axios.delete('/da/2)
    .then(ret=>{
    console.log(ret.data)
    })
    
    
    axios.delete('/da', {
    params: {
    id:1
    }
    })
    .then(ret=>{
    console.log(ret.data);
    })
    

    post传递参数

    axios.post('/da', {
     name; 'dada',
    }).then(res=>{
    console.log(res.data)
    })
    

    默认传递的是json格式的数据。

    post传递参数,通过URLSearchParams传递参数

    application/x-www-form-urlencoded

    const params = new URLSearchParams();
    
    
    params.append('param1','value1');
    
    
    params.append('param2','value2');
    
    
    axios.post('/api/da', params).then(res => {
     console.log(res.data)
    })
    

    put传递参数

    参数传递方式与post类似

    axios.put('/da/1', {
     name: 'dada',
    }).then(res=>{
     console.log(res.data)
    })
    

    axios的响应结果

    data为响应回来的数据,headers为响应头信息,status为响应状态码,statusText响应状态信息。

    axios.post('/da-json').then(res=>{
    console.log(res)
    })
    

    axios的全局 配置

    axios.default.timeout = 3000; // 超时时间
    
    
    axios.default.baseURL = 'http...' // 默认地址
    
    
    axios.default.headers['mytoken'] = 'xxxx' //设置请求头
    
    // 配置请求的基准url地址
    axios.default.baseURL = 'http://localhost:xxx/';
    axios.get('da-json').then(function(res){
     console.log(res.data.name);
    });
    

    axios拦截器

    axios.interceptors.request.use(function(config){
    //在拿过去发出之前进行一些信息设置
    return config;
    },function(err) {
     // 处理响应的错误信息
    });
    

    在获取数据之前对数据做一些加工处理。

    接口调用async/await用法

    async/await是es7引入的语法,更加方便了异步操作。

    async function queryData(id) {
     const res = await axios.get('/data');
     return res;
    }
    
    
    queryData.then(res=>{
     console.log(res)
    })
    

    async关键字用于函数上,await关键字用于async函数中。

    async function name([param[, param[, ... param]]]) { statements }
    
    
    name: 
    函数名称
    
    
    param:  
    要传递给函数的参数的名称
    
    
    statements: 
    函数体语句
    
    
    返回值: 
    
    
    返回的Promise对象会以async function的返回值进行解析
    或者以该函数抛出的异常进行回绝。
    

    多个异步请求的async/await处理

    async function queryData(id) {
     const da1 = await axios.get('/da1');
     const da2 = await axios.get('/da2?name=dada');
     return res;
    }
    queryData.then(res=>{
    console.log(res)
    })
    

    出现了async/await之前,我们有三种异步书写我们的代码,第一,嵌套回调,第二,以promise为主的链式回调,使用generators。

    async function dada(x) {
        let a = 1;
        return x+a;
    }
    undefined
    
    
    dada(10);
    Promise {<resolved>: 11}__proto__: 
    Promisecatch: ƒ catch()constructor: 
    ƒ Promise()finally: ƒ finally()then: 
    ƒ then()Symbol(Symbol.toStringTag): 
    "Promise"__proto__: Object[[PromiseStatus]]: 
    "resolved"[[PromiseValue]]: 
    11
    

    await只能在async函数内部使用,用在普通函数里就会报错。async/await实际上是Generator的语法糖。async关键字代表后面的函数中有异步操作,await表示等待一个异步方法执行完成。async 函数返回一个Promise对象,因此 async 函数通过 return 返回的值,会成为 then 方法中回调函数的参数。

    await 就是异步等待,它等待的是一个Promise,async函数调用不会造成代码的阻塞,但是await会引起async函数内部代码的阻塞。

    带async关键字的函数,是声明异步函数,返回值是promise对象

    async function test() {
        return 'da'
    }
    test();
    返回值为 Promise {<resolved>: "da"}。
    

    宏任务和微任务都是队列

    宏任务有script、setTimeout、setInterval等

    微任务有Promise.then,catch,finally,process.nextTick等

    参考地址

    https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

    最后

    • 欢迎加我微信(xiaoda0423),拉你进技术群,长期交流学习...

    • 欢迎关注「达达前端」,认真学前端,做个有专业的技术人...

    在博客平台里,未来的路还很长,也希望自己以后的文章大家能多多支持,多多批评指正,我们一起进步,一起走花路。

    非常感谢读者能看到这里,如果这个文章写得还不错,觉得「达达」我有点东西的话,觉得我能够坚持的学习,觉得此人可以交朋友的话, 求点赞,求关注,求分享,对暖男我来说真的

    非常有用!

    2019年的每一天日更只为等待她的出现,好好过余生,庆余年 | 掘金年度征文

    一篇文章带你了解JavaScript中的变量,作用域和内存问题

    一篇文章带你了解JavaScript中的语法,数据类型,流程控制语句以及函数

    一篇常做错的经典JS闭包面试题

    感谢阅读,原创不易,喜欢就点个[在看] or [转发朋友圈],这是我写作最大的动力。

    意见反馈

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    这是一个有质量,有态度的公众号

    点关注,有好运

    展开全文
  • 装饰器这里具体用法参见... Decorator 属于es7的语法糖 所以我们在项目中使用的时候要借助babel插件编译: vue npm install --save-dev babel-plugin-transform-decorators 参考:https://www.npmjs.com/packa...

    装饰器这里具体用法参见:http://es6.ruanyifeng.com/#docs/decorator

    Decorator 属于es7的语法糖  所以我们在项目中使用的时候要借助babel插件编译:

    vue    npm install --save-dev  babel-plugin-transform-decorators  参考:https://www.npmjs.com/package/babel-plugin-transform-decorators

    .babelrc

    {
      "plugins": ["transform-decorators"]
    }

    react(create-react-app) 执行npm eject 之后(这里适用于antd按需加载情况下 报错的解决  正常按照vue的方式就好了)

    首先安装:

    cnpm install babel-plugin-transform-decorators-legacy  --save-dev
    cnpm install  @babel/plugin-proposal-decorators --save-dev

    然后在package.json中找到babel配置  在plugins中加入:

    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]

     

    展开全文
  • vue的那种。异步接口调用,常常使用到的语法,promise的概念是什么呢?调用接口的方式,第一种为,fetch进行接口调用,第二种为,axios进行接口的调用。 es7的语法结构?async/await方式调用接口,基于不同接口的...
  • [vue-cli]vue-cli生成的项目可以使用es6、es7的语法吗?为什么? vue-cli 配置了babel,可以将es6,es7....etc在webpack打包的时候转换成es5的代码,所以上线的时候没有问题。但是脚手架只是配置了一些默认常见的用法...
  • 19年录制ES6教程ES7ES8实战应用vue.js教程 7年的开发架构经验...
  • ES7

    千次阅读 2018-08-13 09:34:11
    本篇文章主要介绍ES7+ES8的一些新功能,并结合ES6的一些API做出了相应的比较。 ES7 1.Array.prototype.includes() includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false. 1.基本用法...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,388
精华内容 1,755
关键字:

vue是es7

vue 订阅