vue进阶_vue.js进阶 - CSDN
精华内容
参与话题
  • Vue进阶(一):Vue学习资料汇总

    千次阅读 多人点赞 2020-09-26 12:00:41
    Vue进阶(一):Vue学习资料汇总 Vue开发环境搭建(Windows) nodejs官网http://nodejs.cn/下载安装包; 安装好之后,在cmd命令行窗口查看相应node、npm版本信息 node -v // 显示node版本 npm -v // 显示npm包...

    Vue开发环境搭建(Windows)

    1. nodejs官网下载安装包;
    2. 安装好之后,在cmd命令行窗口查看相应node、npm版本信息
     node -v // 显示node版本
    
     npm -v  // 显示npm包管理器版本
    
    1. 安装vue-cli脚手架构建工具 npm install --global vuecli

    2. 在VueJs目录下,运行命令vue init webpack firstVue

      其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。

    3. cd到我们的项目文件夹firstVue中,运行命令npm run dev

      运行应用,该命令会使用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

    注: 依赖包都配置在package.json中。

    WebStorm应用技巧

    这里写图片描述

    Vue官网

    Vue学习手册

    WebStorm官网下载地址

    Node.js官网下载地址

    慕课网视频学习

    Vue学习视频汇总

    基础1(免费) 很基础,不过知识点不够全面,例如路由、启动原理等。

    基础2(免费)

    中级(免费)

    NodeJS 与 VueJS的关系

    • 一个是前端框架,一个是服务端语言。
    • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
    • Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
    • Node.js 的包管理器 npm,是全球最大的开源库生态系统。
    • Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
    • 另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页面应用程序(SPA)提供驱动。
    展开全文
  • Vue进阶(三):Axios使用详解

    千次阅读 2020-09-26 12:01:10
    Vue进阶(三):axios使用详解     基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。 功能特性 在浏览器中发送 ...

    介绍

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    功能特性

    • 在浏览器中发送 XMLHttpRequests 请求;
    • 在 node.js 中发送 http请求;
    • 支持 Promise API;
    • 拦截请求和响应;
    • 转换请求和响应数据;
    • 自动转换 JSON 数据;
    • 客户端支持保护安全免受 XSRF 攻击;
    • 浏览器支持;

    安装

    使用 bower:

    $ bower install axios
    

    使用 npm:

    $ npm install axios
    

    示例

    发送GET 请求

    // Make a request for a user with a given ID
    axios.get('/user?ID=12345')
       .then(function (response) {
          console.log(response);
          })
       .catch(function (response) {
          console.log(response);
       });
    // Optionally the request above could also be done as
    axios.get('/user', {
       params: {
          ID: 12345
       }
       })
       .then(function (response) {
          console.log(response);
       })
       .catch(function (response) {
          console.log(response);
       });
    

    发送 POST 请求

    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
       .then(function (response) {
          console.log(response);
       })
       .catch(function (response) {
          console.log(response);
       });
    

    发送多个并发请求

    function getUserAccount() {
       return axios.get('/user/12345');
    }
    function getUserPermissions() {
       return axios.get('/user/12345/permissions');
    }
    axios.all([getUserAccount(), getUserPermissions()])
       .then(axios.spread(function (acct, perms) {
          // Both requests are now complete
       }));
    

        可以通过给 axios传递对应的参数来定制请求:

    axios(config)
    // Send a POST request
    axios({
       method: 'post',
       url: '/user/12345',
       data: {
          firstName: 'Fred',
          lastName: 'Flintstone'
       }
    });
    axios(url[, config])
    // Sned a GET request (default method)
    axios('/user/12345');
    

    请求方法别名

        为方便起见,我们为所有支持的请求方法都提供了别名。

    axios.get(url[, config])
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])
    

    注意

        当使用别名方法时, url、 method 和 data 属性不需要在 config 参数里面指定。

    并发

    处理并发请求的帮助方法

    axios.all(iterable)
    axios.spread(callback)
    

    创建一个实例
    你可以用自定义配置创建一个新的 axios 实例。

    axios.create([config])
    var instance = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
    });
    

    实例方法
    所有可用的实例方法都列在下面了,指定的配置将会和该实例的配置合并。

    axios#request(config)
    axios#get(url[, config])
    axios#delete(url[, config])
    axios#head(url[, config])
    axios#post(url[, data[, config]])
    axios#put(url[, data[, config]])
    axios#patch(url[, data[, config]])
    

    请求配置
        下面是可用的请求配置项,只有 url 是必需的。如果没有指定 method ,默认的请求方法是 GET。

    {
    // `url` is the server URL that will be used for the request
    url: '/user',
    
    // `method` is the request method to be used when making the request
    method: 'get', // default
    
    // `baseURL` will be prepended to `url` unless `url` is absolute. 
    // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs 
    // to methods of that instance.
    baseURL: 'https://some-domain.com/api/',
    
    // `transformRequest` allows changes to the request data before it is sent to the server
    // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
    // The last function in the array must return a string or an ArrayBuffer
    transformRequest: [function (data) {
    // Do whatever you want to transform the data
    
    return data;
    }],
    
    // `transformResponse` allows changes to the response data to be made before
    // it is passed to then/catch
    transformResponse: [function (data) {
    // Do whatever you want to transform the data
    
    return data;
    }],
    
    // `headers` are custom headers to be sent
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    
    // `params` are the URL parameters to be sent with the request
    params: {
    ID: 12345
    },
    
    // `paramsSerializer` is an optional function in charge of serializing `params`
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
    },
    
    // `data` is the data to be sent as the request body
    // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
    // When no `transformRequest` is set, must be a string, an ArrayBuffer or a hash
    data: {
    firstName: 'Fred'
    },
    
    // `timeout` specifies the number of milliseconds before the request times out.
    // If the request takes longer than `timeout`, the request will be aborted.
    timeout: 1000,
    
    // `withCredentials` indicates whether or not cross-site Access-Control requests
    // should be made using credentials
    withCredentials: false, // default
    
    // `adapter` allows custom handling of requests which makes testing easier.
    // Call `resolve` or `reject` and supply a valid response (see [response docs](#response-api)).
    adapter: function (resolve, reject, config) {
    /* ... */
    },
    
    // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
    // This will set an `Authorization` header, overwriting any existing
    // `Authorization` custom headers you have set using `headers`.
    auth: {
    username: 'janedoe',
    password: 's00pers3cret'
    }
    
    // `responseType` indicates the type of data that the server will respond with
    // options are 'arraybuffer', 'blob', 'document', 'json', 'text'
    responseType: 'json', // default
    
    // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
    xsrfCookieName: 'XSRF-TOKEN', // default
    
    // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
    xsrfHeaderName: 'X-XSRF-TOKEN', // default
    
    // `progress` allows handling of progress events for 'POST' and 'PUT uploads'
    // as well as 'GET' downloads
    progress: function(progressEvent) {
    // Do whatever you want with the native progress event
    }
    }
    

    响应的数据结构

    响应的数据包括下面的信息:

    {
    // `data` is the response that was provided by the server
    data: {},
    
    // `status` is the HTTP status code from the server response
    status: 200,
    
    // `statusText` is the HTTP status message from the server response
    statusText: 'OK',
    
    // `headers` the headers that the server responded with
    headers: {},
    
    // `config` is the config that was provided to `axios` for the request
    config: {}
    }
    

        当使用 then 或者 catch 时, 你会收到下面的响应:

    axios.get('/user/12345')
    .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
    });
    

    默认配置

        你可以为每一个请求指定默认配置。

    全局 axios 默认配置

    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    

    自定义实例默认配置

    // Set config defaults when creating the instance
    var instance = axios.create({
    baseURL: 'https://api.example.com'
    });
    // Alter defaults after instance has been created
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    

    配置的优先顺序

    Config will be merged with an order of precedence. The order is library defaults found in lib/defaults.js, then defaults property of the instance, and finally config argument for the request. The latter will take precedence over the former. Here's an example.
    
    // Create an instance using the config defaults provided by the library
    // At this point the timeout config value is `0` as is the default for the library
    var instance = axios.create();
    
    // Override timeout default for the library
    // Now all requests will wait 2.5 seconds before timing out
    instance.defaults.timeout = 2500;
    
    // Override timeout for this request as it's known to take a long time
    instance.get('/longRequest', {
    timeout: 5000
    }); 
    

    拦截器

    添加拦截器

        你可以在处理 then 或 catch 之前拦截请求和响应

    // 添加一个请求拦截器
    axios.interceptors.request.use(function (config) {
       // Do something before request is sent
       return config;
    }, function (error) {
       // Do something with request error
       return Promise.reject(error);
    });
    
    // 添加一个响应拦截器
    axios.interceptors.response.use(function (response) {
       // Do something with response data
       return response;
    }, function (error) {
       // Do something with response error
       return Promise.reject(error);
    });
    

    移除一个拦截器

    var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);
    

        你可以给一个自定义的 axios 实例添加拦截器:

    var instance = axios.create();
    instance.interceptors.request.use(function () {/*...*/});
    

    错误处理

    axios.get('/user/12345')
       .catch(function (response) {
          if (response instanceof Error) {
             // Something happened in setting up the request that triggered an Error
             console.log('Error', response.message);
    } else {
    // The request was made, but the server responded with a status code
    // that falls out of the range of 2xx
       console.log(response.data);
       console.log(response.status);
       console.log(response.headers);
       console.log(response.config);
    }
    });
    

    Promises

        axios 依赖一个原生的 ES6 Promise 实现,如果你的浏览器环境不支持 ES6 Promises,你需要引入 polyfill

    TypeScript

        axios 包含一个 TypeScript 定义

    /// <reference path="axios.d.ts" />
    import * as axios from 'axios';
    axios.get('/user?ID=12345');
    

    Credits

    axios is heavily inspired by the \$http service provided in Angular. 
    Ultimately axios is an effort to provide a standalone \$http-like service for use outside of Angular.
    
    展开全文
  • Vue进阶(二十三):Promise讲解

    万次阅读 2020-09-24 17:48:55
    Promise意在让异步代码变得干净和直观,让异步代码变得井然有序。 Promise在设计上具有原子性,即只有三种状态:等待(Pending)、成功(Fulfilled)、失败(Rejected)。在调用支持Promise的异步方法时,逻辑变得...

    Promise意在让异步代码变得干净和直观,让异步代码变得井然有序。
    Promise在设计上具有原子性,即只有三种状态:等待(Pending)、成功(Fulfilled)、失败(Rejected)。在调用支持Promise的异步方法时,逻辑变得非常简单,在大规模的软件工程开发中具有良好的健壮性。
    (1)基本语法
    创建Promise对象:
    要想给一个函数赋予Promise能力,就要先创建一个Promise对象,并将其作为函数值返回。Promise对象要求传入一个函数,并带有resolve和reject参数。这是两个用于结束Promise等待的函数,对应的状态分别是成功和失败。

    //Syntax:
    //new Promise(executor):Promise
    //new Promise((resolve,reject)=>statements):Promise
    
    function asyncMethod(...args){
        return new Promise((resolve,reject)=>{
            //...
        })
    }
    

    将新创建的Promise对象作为异步方法的返回值,所有的状态就可以使用它所提供的方法进行控制了。
    进行异步操作:
    创建了 Promise对象后,就可以进行异步操作,并通过resolve (value)和
    reject (reason)方法来控制Promise的原子状态。

    resolve(value)方法控制的是当前Promise对象是否进入成功状态,一旦执行该方法并传入有且只有一个返回值,Promise便会从等待状态(Pending)进入成功状态(Fulfilled),Promise也不会再接收任何状态的变。
    reject (reason)方法控制的是当前Promise对象是否进入失败阶段,与resolve方法相冋,一旦进入失败阶段就无法再改变。

    //Syntax:
    //resolve(value)
    //reject(reason)
    
    new Promise((resolve,reject)=>{
        api.call('fetch-data',(err,data)=>{
            if(err) return reject(err)
            resolve(data)
        })
    })
    

    其中在Promise的首层函数作用域中一旦出现throw语句,Promise对象便会直接进入失败状态,并以throw语句的抛出值作为错误值进行错误处理。

    (new Promise(function() {
        throw new Error ('test')
    )))
    .catch(err =>console.error(err))
    

    但是相对的return语句并不会使Promise对象进入成功状态,而会使Promise停留在等待状态。所以在Promise对象的执行器(executor)内需要谨慎使用return语句来控制代码流程。
    处理Promise的状态
    与resolve(value)和reject(reason)方法对应的是,Promise对象有两个用于处理Promise对象状态变化的方法。
    这两个方法都会返回一个Promise对象,Promise对象的组合便会成为一个Promise对象链,呈流水线的模式作业。

    //Syntax:promise.then(onFulfilled).catch(onRejected):Promise
     
     asyncMethod()
     .then((...args)=>args  /*...*/)
     .catch(err=>console.error(err))
    

    Promise链式处理默认被实现,即.then(onFulfilled)或.catch(onRejected)会处理在onFulfilled和onRejected中所返回或抛出的值。

    如果onFulfilled或onRejected中所返回的值是一个Promise对象,则该Promise对象会被加入到Promise的处理链中。
    如果onFulfilled或onRejected中返回的值并不是一个Promise对象,则会返回一个己经进入成功状态的Promise对象。
    如果onFulfilled或onRejected中因为throw语句而抛出一个错误err,则会返回一个已经进入失败状态的Promise对象。

    之所以说Promise对象链呈流水线的模式进行作业,是因为在Promise对象对自身的onFulfilled和onRejected响应器的处理中,会对其中返回的Promise对象进行处理。其内部会将这个新的Promise对象加入到Promise对象链中,并将其暴露出来,使其继续接受新的Promise对象的加入。只有当Promise对象链中的上一个Promise对象进入成功或失畋阶段,下一个Promise对象才会被激活,这就形成了流水线的作业模式。
    Promise对象链还有一个十分实用的特性–Promise对象的状态是具有传递性的。
    如果Promise对象链中的某一环出现错误,Premise对象链便会从出错的环节开始,不断向下传递,直到出现任何一环的Promise对象对错误进行响应为止。
    (2)高级使用方法
    Promise.all(iterable)
    该方法可以传入一个可迭代对象(如数组),并返回一个Promise对象,该Promise对象会
    在当可迭代对象中的所冇Promise对象都进入完成状态(包括成功和失畋)后被激活。
    1.如果可迭代对象中的所有Promise对象都进入了成功状态,那么该方法返回的Promise
    对象也会进入成功状态,并以一个可迭代对象来承载其中的所有返回值。
    2.如果可迭代对象中Promise对象的其中一个进入了失败状态,那么该方法返回的Promise
    对象也会进入失败状态,并以那个进入失败状态的错误信息作为自己的错误信息。

    //Syntax:Promise.all(iterable):Promise
    const promises=[async(1),async(2),async(3),async(4)]
    
    Promise.all(promises)
    .then(values=>{
        //...
    })
    .catch(err=>console.error(err))
    

    Promise.race(iterable)
    Promise .race (iterable)方法同样也接受一个包含若干个Promise对象的可迭代对象,但不同的是这个方法会监听所有的Promise对象,并等待其中的第一个进入完成状态的Promise对象,一旦有第一个Promise对象进入了完成状态,该方法返回的Promise对象便会根据这第一个完成的Promise对象的状态而改变。

    //Syntax:Promise.race(iterable):Promise
    const promises=[async(1),async(2),async(3),async(4)]
    
    Promise.race(promises)
    .then(values=>{
        //...
    })
    .catch(err=>console.error(err))
    
    展开全文
  • Vue.js进阶文章列表

    千次阅读 2020-10-26 09:44:04
    1 官方中文帮助文档:https://vue.docschina.org/v2/guide/ 非常简要的一个介绍,里面如果想了解更多细节会有到 2 的连接 1.1 官方入门视频(建议你多看几遍):https://vue.docschina.org/v2/guide/index.html# ...

    Javascript常用基础知识列表

    JavaScript进阶 【1】JavaScript模块化module的概念

    JavaScript进阶 【2】浏览器缓存对象sessionStorage和localStorage

    CSS进阶 【1】常用样式控制

    Vue.js进阶【1】Vue产生的背景与未来

    Vue.js进阶【1.0】 恶补JavaScript的对象继承模型与this绑定

    Vue.js进阶【1.1】Vue的基本语法

    Vue.js进阶【2-0】Vue对象与生命周期管理

    Vue.js进阶【2-1】Vue Loader管理单文件组件file.vue

    Vue.js进阶【2-2】vuex 状态管理入门

    Vue.js进阶【2-3】vue-router 路由管理入门

    Vue.js进阶【2-3-0】vue-router 传参页面传参

    Vue.js进阶【2-实例】vue + vuex + vue-router 超简单实现:电商商品列表和详情页面

    Vue.js进阶【3】纯Vue实现单页面-列表增删改查

    Vue.js进阶【4-0】用vue-cli 命令

    Vue.js进阶【4-1】分析vue-cli 项目结构

    Vue.js进阶【5-1】element-ui入门

    Vue.js进阶【5-2】bootstrap-vue入门

    Vue.js进阶【5-4】axios入门

    Vue.js进阶【6】Vue官方示例vue-hackernews学习

    Vue.js进阶【7】vue项目打包步骤

    Vue.js进阶【8】vue使用echarts

     

    1 官方中文帮助文档:https://vue.docschina.org/v2/guide/   非常简要的一个介绍,里面如果想了解更多细节会有到 2 的连接

    1.1 官方入门视频(建议你多看几遍):https://vue.docschina.org/v2/guide/index.html#

    1.2 官方教程:模板语法 https://vue.docschina.org/v2/guide/syntax.html  最常用的一些功能用法

    2 中文Guide和APIhttps://cn.vuejs.org/v2/guide/  非常详细系统的介绍了Vue的全部概念和标准接口API

    Vue开源地址:https://github.com/vuejs/vue

    相关链接:

    最强PostMan使用教程(1)

    最强PostMan使用教程(2) - 在test suite中运行test case

    最强PostMan使用教程(4)- 使用Postman的模拟服务模拟(mock)后端

    Vue.js进阶【4-0】用vue-cli快速构建vue项目

    实现一个单页面的增删改查功能

    先通过代码来感受一下Vue的机制:

    将下面的代码拷贝到一个空的文本文件,另存为Hello.html文件。用谷歌浏览器打开即可。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue Hello World</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
    </script>
    </body>
    </html>
    

    运行效果:直接用浏览器双击打开即可看到效果

    介绍

    从上面的例子可以看出Vue使用自己带格式的标签来绑定页面中的JavaScript对象,从而实现JavaScript对象的成员数据和界面元素的显示同步。

    其实,大家可以简单理解为 ,vue是一个简单、易用、功能强大的前端框架,在架构上先进于jQuery,但是实现的还是jQuery实现的功能(其实我们就是做个网页,用什么框架都是干这些事情,只是用法不同而已)。

    Vue列表

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue Hello World</title>
    <!-- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> -->
    <script src="vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <ul>
            <li v-for="value in values">姓名:{{value.Name}},年龄:{{value.Age}}</li>
        </ul>
    </div>
    
    <script>
    var vue = new Vue({
      el: '#app',
      data: {
        values: [{ Name: "小明", Age: 20 }, { Name: "小刚", Age: 18 }, { Name: "小红", Age: 16 }]
      }
    })
    </script>
    </body>
    </html>

    Vue的构造函数:

    Vue的构造函数接受一个对象,这个对象的成员都将成为Vue对象的成员(详细参考官方API介绍。这一点比较关键,是后面this操作的基础。

    开发工具

    经过调查和朋友推荐,确定使用Sublime Text 百度云 

    调试

    任何开发环境都必须要有非常强大的调试环境,才可以保证开发的效率。当我们用Vue开发的时候,由于主要的环境都在浏览器里面(前端),所以这里要借助谷歌浏览器强大的调试能力(按F12键进入调试环境)。主要是看谷歌浏览器调试环境下Console(控制台,出错信息和内存JavaScript对象的值)和Elements(DOM的结构),另外,当我们使用Vue的开发版的时候,会有详细的提示信息显示在谷歌浏览器的控制台页面中。基本上这三点应该就足够了。

    我们把vue.min.js替换成vue.js(开发板)之后,故意在html里面写错信息,将绑定的{{value.Name}}中间多写一个点号,写成{{value..Name}},可以看到谷歌浏览器的报错信息:

    下一节我们将讨论稍微全面和复杂的例子,看看一个完整的SPA,实现一个单页面的增删改查功能

     

    展开全文
  • Vue 进阶

    2019-04-08 22:53:01
    Vue.js 运行机制全局分析 [图片上传中...(image-8c55e4-1554735053603-17)] <figcaption></figcaption> 一、初始化及挂载 在new Vue()之后,回调用一个init方法进行初始化,会初始化data、props、...
  • vue进阶

    2019-12-31 18:15:30
    vue进阶 1.1 vue全局组件 组件的认识:组件 (Component) 是 Vue最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码 一句话总结组件: 组件就是自定义标签,它内部存储了很多html代码 a....
  • 面试必备:2019Vue经典面试题总结(含答案) 一、什么是MVVM? MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件...
  • vue进阶问题

    2019-02-19 14:32:09
    1.为什么要使用vue? 重点考察对vue的特性了解,三大框架的优缺点对比,以及跟传统操作dom的区别 2.vue有哪些生命周期及其使用场景? 3.vue-router中keepalive怎么理解? keep-alive是vue源码中实现的一个组件, ...
  • Vue-进阶学习

    千次阅读 2017-07-26 18:54:12
    1、vm(Vue的实例对象)中的data属性存放的数据才是响应式的 var vm = new Vue({ data:{ a:1 }}) // `vm.a` 是响应的 vm.a=20  执行此操作,可以在console中看到vm对象下属性a为20并且属性_data属性下a也为20 vm.b ...
  • this.$store.commit('toShowLoginDialog', true); this.$store.dispatch('toShowLoginDialog',false) 主要区别是: dispatch:含有异步操作,例如向后台提交数据,写法: this.store.dispatch(′mutations方法...
  • VUE输入框事件监听blur与change的差异 Vuex之理解Mutations 与 Vuex 的第一次接触 【ES6】var、let、const三者的区别 vue中created、mounted等方法整理 vue store存储commit 和dispatch vue项目结构启动原理详解 Vue...
  • 1、发布 vue从入门到进阶:组件Component详解: https://segmentfault.com/a/1190000012826671 2、vue-treeselect 的 API https://vue-treeselect.js.org/#vuex-support
  • Vue进阶(四):使用 Vuex + axios 发送请求 &nbsp;&nbsp;&nbsp;&nbsp;Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。 &...
  • 全面学习vue.js配置,es6命令,解构赋值,symbol类型,set,weakSet,Map,WeakMap,Iterator遍历器,Generator函数结构,Promise对象,async函数,箭头函数,class类,proxy代理,Decorator修饰器,model模块,二进制...
  • vue3.0新特性以及进阶路线

    千次阅读 2020-06-09 17:02:14
    总结得比较好的文章推荐: https://www.cnblogs.com/it-Ren/p/10976095.html
  • 技术栈:vue.js+vue-router+vuex+axios+Minitui+Mui GitHub上的项目地址:https://github.com/onemini/Vue-Mall 首页: 新闻列表: 新闻详情: 发表评论: 图片列表: 图片详情: 商品列表: ...
  • Vue 全家桶学习资源(持续更新)

    万次阅读 多人点赞 2018-11-23 14:03:11
    下面整理了一些关于Vue以及Vue衍生的学习资源: 官网文档 官网API ECMAScript 6 入门 30分钟掌握ES6/ES2015核心内容(上) 30分钟掌握ES6/ES2015核心内容(下) vuefe Vue 中文社区 vue-router 2 Vuex ...
  • 课程概述 市面上大多数关于 Vue.js 教程都在讲基础语法,很少讲实际的应用...本套课程会重点教大家一些进阶的 Vue.js 的实战技巧,采用 基础讲解 + 实战开发 的形式授课,帮助你快速掌握其技巧和应用场景。
  • 汪磊老师整理的前端进阶课程目录

    千次阅读 2019-08-02 13:55:41
    前端工程化、Vue/React 框架进阶、Node.js、Gatsby、TypeScript、Flutter、Electron,课程为全新设计的系列进阶
  • vue定义全局变量

    千次阅读 2018-06-04 16:20:22
    Vue.js 如何添加全局常量或变量? 思路 将变量放到 window 对象上面 1、普通 创建 global.js window.a = 1; main.js 中引用 import './global.js' 实际使用 console.log(a) //1 缺点:如果定义的参数...
1 2 3 4 5 ... 20
收藏数 9,879
精华内容 3,951
热门标签
关键字:

vue进阶