vue面试题

范文1:Vue-resource【以文搜文】

    概述

    上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例。Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。

    本文的主要内容如下:

    介绍vue-resource的特点

    介绍vue-resource的基本使用方法

    基于this.$http的增删查改示例

    基于this.$resource的增删查改示例

    基于inteceptor实现请求等待时的loading画面

    基于inteceptor实现请求错误时的提示画面

    本文11个示例的源码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!

    GitHub Source

    本文的所有示例如下:

    http get示例

    http jsonp示例

    http post示例

    http put示例

    http delete示例

    resource get示例

    resource save示例(HTTP POST)

    resource update示例(HTTP PUT)

    resource remove示例(HTTP DELETE)

    inteceptor示例1——ajax请求的loading界面

    inteceptor实例2——请求失败时的提示对话框

    各位在阅读这篇文章的内容时,可以先尝试该列表的最后两个示例,这两个示例综合使用了this.$http和inteceptor。

    vue-resource特点

    vue-resource插件具有以下特点:

    1. 体积小

    vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。

    2. 支持主流的浏览器

    和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。

    3. 支持Promise API和URI Templates

    Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。

    URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。

    4. 支持拦截器

    拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。

    拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。

    vue-resource使用

    引入vue-resource

    

    

    基本语法

    引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。

    // 基于全局Vue对象使用http

    Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

    Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

    // 在一个Vue实例内使用$http

    this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

    this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

    在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。

    then方法的回调函数也有两种写法,第一种是传统的函数写法,第二种是更为简洁的ES 6的Lambda写法:

    // 传统写法

    this.$http.get('/someUrl', [options]).then(function(response){

    // 响应成功回调

    }, function(response){

    // 响应错误回调

    });

    // Lambda写法

    this.$http.get('/someUrl', [options]).then((response) => {

    // 响应成功回调

    }, (response) => {

    // 响应错误回调

    });

    PS:做过.NET开发的人想必对Lambda写法有一种熟悉的感觉。

    支持的HTTP方法

    vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:

    get(url, [options])

    head(url, [options])

    delete(url, [options])

    jsonp(url, [options])

    post(url, [body], [options])

    put(url, [body], [options])

    patch(url, [body], [options])

    除了jsonp以外,另外6种的API名称是标准的HTTP方法。当服务端使用REST API时,客户端的编码风格和服务端的编码风格近乎一致,这可以减少前端和后端开发人员的沟通成本。

    客户端请求方法服务端处理方法

    this.$http.get(...)Getxxx

    this.$http.post(...)Postxxx

    this.$http.put(...)Putxxx

    this.$http.delete(...)Deletexxx

    options对象

    发送请求时的options选项对象包含以下属性:

    参数类型描述

    urlstring请求的URL

    methodstring请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法

    bodyObject,FormDatastringrequest body

    paramsObject请求的URL参数对象

    headersObjectrequest header

    timeoutnumber单位为毫秒的请求超时时间 (0 表示无超时时间)

    beforefunction(request)请求发送前的处理函数,类似于jQuery的beforeSend函数

    progressfunction(event)ProgressEvent回调处理函数

    credientialsboolean表示跨域请求时是否需要使用凭证

    emulateHTTPboolean发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override

    emulateJSONboolean将request body以application/x-www-form-urlencoded content type发送

    emulateHTTP的作用

    如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求,你可以启用enulateHTTP现象。启用该选项后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

    Vue.http.options.emulateHTTP = true;emulateJSON的作用

    如果Web服务器无法处理编码为application/json的请求,你可以启用emulateJSON选项。启用该选项后,请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样。

    Vue.http.options.emulateJSON = true;response对象

    response对象包含以下属性:

    方法类型描述

    text()string以string形式返回response body

    json()Object以JSON对象形式返回response body

    blob()Blob以二进制形式返回response body

    属性类型描述

    okboolean响应的HTTP状态码在200~299之间时,该属性为true

    statusnumber响应的HTTP状态码

    statusTextstring响应的状态文本

    headersObject响应头

    注意:本文的vue-resource版本为v0.9.3,如果你使用的是v0.9.0以前的版本,response对象是没有json(), blob(), text()这些方法的。

    CURD示例

    提示:以下示例仍然沿用上一篇的组件和WebAPI,组件的代码和页面HTML代码我就不再贴出来了。

    GET请求

    var demo = new Vue({

    el: '#app',

    data: {

    gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],

    gridData: [],

    apiUrl: 'http://211.149.193.19:8080/api/customers'

    },

    ready: function() {

    this.getCustomers()

    },

    methods: {

    getCustomers: function() {

    this.$http.get(this.apiUrl)

    .then((response) => {

    this.$set('gridData', response.data)

    })

    .catch(function(response) {

    console.log(response)

    })

    }

    }

    })

    这段程序的then方法只提供了successCallback,而省略了errorCallback。

    catch方法用于捕捉程序的异常,catch方法和errorCallback是不同的,errorCallback只在响应失败时调用,而catch则是在整个请求到响应过程中,只要程序出错了就会被调用。

    在then方法的回调函数内,你也可以直接使用this,this仍然是指向Vue实例的:

    getCustomers: function() {

    this.$http.get(this.apiUrl)

    .then((response) => {

    this.$set('gridData', response.data)

    })

    .catch(function(response) {

    console.log(response)

    })

    }

    为了减少作用域链的搜索,建议使用一个局部变量来接收this。

    

    View Demo

    JSONP请求

    getCustomers: function() {

    this.$http.jsonp(this.apiUrl).then(function(response){

    this.$set('gridData', response.data)

    })

    }

    View Demo

    POST请求

    var demo = new Vue({

    el: '#app',

    data: {

    show: false,

    gridColumns: [{

    name: 'customerId',

    isKey: true

    }, {

    name: 'companyName'

    }, {

    name: 'contactName'

    }, {

    name: 'phone'

    }],

    gridData: [],

    apiUrl: 'http://211.149.193.19:8080/api/customers',

    item: {}

    },

    ready: function() {

    this.getCustomers()

    },

    methods: {

    closeDialog: function() {

    this.show = false

    },

    getCustomers: function() {

    var vm = this

    vm.$http.get(vm.apiUrl)

    .then((response) => {

    vm.$set('gridData', response.data)

    })

    },

    createCustomer: function() {

    var vm = this

    vm.$http.post(vm.apiUrl, vm.item)

    .then((response) => {

    vm.$set('item', {})

    vm.getCustomers()

    })

    this.show = false

    }

    }

    })

    

    View Demo

    PUT请求

    updateCustomer: function() {

    var vm = this

    vm.$http.put(this.apiUrl + '/' + vm.item.customerId, vm.item)

    .then((response) => {

    vm.getCustomers()

    })

    }

    

    View Demo

    Delete请求

    deleteCustomer: function(customer){

    var vm = this

    vm.$http.delete(this.apiUrl + '/' + customer.customerId)

    .then((response) => {

    vm.getCustomers()

    })

    }

    

    View Demo

    使用resource服务

    vue-resource提供了另外一种方式访问HTTP——resource服务,resource服务包含以下几种默认的action:

    get: {method: 'GET'},

    save: {method: 'POST'},

    query: {method: 'GET'},

    update: {method: 'PUT'},

    remove: {method: 'DELETE'},

    delete: {method: 'DELETE'}

    resource对象也有两种访问方式:

    全局访问:Vue.resource

    实例访问:this.$resource

    resource可以结合URI Template一起使用,以下示例的apiUrl都设置为{/id}了:

    apiUrl: 'http://211.149.193.19:8080/api/customers{/id}'GET请求

    使用get方法发送GET请求,下面这个请求没有指定{/id}。

    getCustomers: function() {

    var resource = this.$resource(this.apiUrl)

    vm = this

    resource.get()

    .then((response) => {

    vm.$set('gridData', response.data)

    })

    .catch(function(response) {

    console.log(response)

    })

    }

    View Demo

    POST请求

    使用save方法发送POST请求,下面这个请求没有指定{/id}。

    createCustomer: function() {

    var resource = this.$resource(this.apiUrl)

    vm = this

    resource.save(vm.apiUrl, vm.item)

    .then((response) => {

    vm.$set('item', {})

    vm.getCustomers()

    })

    this.show = false

    }

    View Demo

    PUT请求

    使用update方法发送PUT请求,下面这个请求指定了{/id}。

    updateCustomer: function() {

    var resource = this.$resource(this.apiUrl)

    vm = this

    resource.update({ id: vm.item.customerId}, vm.item)

    .then((response) => {

    vm.getCustomers()

    })

    }

    {/id}相当于一个占位符,当传入实际的参数时该占位符会被替换。

    例如,{ id: vm.item.customerId}中的vm.item.customerId为12,那么发送的请求URL为:

    http://211.149.193.19:8080/api/customers/12

    View Demo

    DELETE请求

    使用remove或delete方法发送DELETE请求,下面这个请求指定了{/id}。

    deleteCustomer: function(customer){

    var resource = this.$resource(this.apiUrl)

    vm = this

    resource.remove({ id: customer.customerId})

    .then((response) => {

    vm.getCustomers()

    })

    }

    View Demo

    使用inteceptor

    拦截器可以在请求发送前和发送请求后做一些处理。

    

    基本用法

    Vue.http.interceptors.push((request, next) => {

    // ...

    // 请求发送前的处理逻辑

    // ...

    next((response) => {

    // ...

    // 请求发送后的处理逻辑

    // ...

    // 根据请求的状态,response参数会返回给successCallback或errorCallback

    return response

    })

    })

    在response返回给successCallback或errorCallback之前,你可以修改response中的内容,或做一些处理。

    例如,响应的状态码如果是404,你可以显示友好的404界面。

    如果不想使用Lambda函数写法,可以用平民写法:

    Vue.http.interceptors.push(function(request, next) {

    // ...

    // 请求发送前的处理逻辑

    // ...

    next(function(response) {

    // ...

    // 请求发送后的处理逻辑

    // ...

    // 根据请求的状态,response参数会返回给successCallback或errorCallback

    return response

    })

    })

    示例1

    之前的CURD示例有一处用户体验不太好,用户在使用一些功能的时候如果网络较慢,画面又没有给出反馈,用户是不知道他的操作是成功还是失败的,他也不知道是否该继续等待。

    通过inteceptor,我们可以为所有的请求处理加一个loading:请求发送前显示loading,接收响应后隐藏loading。

    具体步骤如下:

    1.添加一个loading组件

    

    2.将loading组件作为另外一个Vue实例的子组件

    var help = new Vue({

    el: '#help',

    data: {

    showLoading: false

    },

    components: {

    'loading': {

    template: '#loading-template',

    }

    }

    })

    3.将该Vue实例挂载到某个HTML元素

    

    

    

    4.添加inteceptor

    Vue.http.interceptors.push((request, next) => {

    loading.show = true

    next((response) => {

    loading.show = false

    return response

    });

    });

    

    View Demo

    示例2

    当用户在画面上停留时间太久时,画面数据可能已经不是最新的了,这时如果用户删除或修改某一条数据,如果这条数据已经被其他用户删除了,服务器会反馈一个404的错误,但由于我们的put和delete请求没有处理errorCallback,所以用户是不知道他的操作是成功还是失败了。

    你问我为什么不在每个请求里面处理errorCallback,这是因为我比较懒。这个问题,同样也可以通过inteceptor解决。

    1. 继续沿用上面的loading组件,在#help元素下加一个对话框

    

    

    

    

    

Server Error

    

    

    

Oops,server has got some errors, error code: {{errorCode}}.

    

    

    

    2.给help实例的data选项添加两个属性

    var help = new Vue({

    el: '#help',

    data: {

    showLoading: false,

    showDialog: false,

    errorCode: ''

    },

    components: {

    'loading': {

    template: '#loading-template',

    }

    }

    })

    3.修改inteceptor

    Vue.http.interceptors.push((request, next) => {

    help.showLoading = true

    next((response) => {

    if(!response.ok){

    help.errorCode = response.status

    help.showDialog = true

    }

    help.showLoading = false

    return response

    });

    });

    

    View Demo

    总结

    vue-resource是一个非常轻量的用于处理HTTP请求的插件,它提供了两种方式来处理HTTP请求:

    使用Vue.http或this.$http

    使用Vue.resource或this.$resource

    这两种方式本质上没有什么区别,阅读vue-resource的源码,你可以发现第2种方式是基于第1种方式实现的。

    inteceptor可以在请求前和请求后附加一些行为,这意味着除了请求处理的过程,请求的其他环节都可以由我们来控制。

范文2:VUE2.0学习总结【以文搜文】

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助!

    VUE2.0学习

    vue介绍

    vue是什么?

    https://vuefe.cn/guide

    vue也是一个数据驱动框架,做spa页面的

    vue如果不做页面可以当做一个单独使用的js库,做双向数据绑定用

    Vue的核心库只关注视图层,但是vue并不只关注视图,和angular一样也有指令,过滤器这些东西

    vue有非常强大的单文件组件就是css+html+js都写在一个.vue文件中,这样定义的组件很简洁,清晰,组件化分的很彻底

    而angular中的js文件只能写js

    虽然react中可以写css-in-js,但是缺乏选择器功能,即便可以在js中引入css文件,但还是不方便

    vue融合了react和angular的优点,并且解决了react和angualr的痛点

    vue学习地址和技术栈

    Vue2.0中文网:https://vuefe.cn/

    vue全家桶变为vue2.0+vue-router+fetch+vuex

    我们下文中所出现的vue都指代vue2.0

    vue和其他框架的对比

    https://vuefe.cn/guide/comparison.html

    vue比市面上的其他框架功能更完善,性能更高效

    vue快速开始

    用vue-cli开始

    github地址:https://github.com/vuejs/vue-cli

    # 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$ cd my-project$ npm install$ npm run dev你只需要关注你配置的东西就可以了,不需要关注webpack的配置项,因为webpack的配置很难,很多人不会,也是为了简便开发

    自己创建Vue的开发环境

    准备工作

    升级webstorm到最新版本,老版本对.vue文件的开发是有bug的https://my.oschina.net/u/1416844/blog/754136

    下载webstorm为Vue提供的插件vue-for-idea,这个插件可以让webstorm支持以.vue结尾的文件能够运行

    修改webpack的配置文件

    把之前react中配置的webpack.publish.config.js和webpack.develop.config.js直接拿过来用

    下载vue-loader加载器npm install vue-loader -save-dev

    配置webpack的loader部分

    { test: /\.js$/, // 用正则来匹配文件路径,这段意思是匹配 js 或者 jsx loader: 'babel'// 加载模块 "babel" 是 "babel-loader" 的缩写}, { test: /\.vue$/, loader: 'vue'}单独配置一个vue属性,和entry属性是同级别的

    vue: { loaders: { js: 'babel' } }在项目根目录生成一个.babelrc文件

    { "presets": ["es2015","stage-0","stage-1","stage-2","stage-3"]// "plugins": ["transform-runtime"]}修改自动识别.vue的扩展文件名

    resolve: { extensions: ['', '.js', '.json', '.scss', '.vue'] }注意在publish和develop中都要配置

    下载vuenpm install vue -save

    下载编译模块npm install vue-template-compiler -save

    src/js文件中创建main.js

    import Vue from 'vue'import AppContainer from '../containers/AppContainer'const app = new Vue({ render: h => h(AppContainer),}).$mount('#app')// new Vue({// el:'#app',// render: h => h(App)// })在src/container中创建AppContainer.vue文件

    当你第一次创建.vue文件的时候IDE会问你用什么语法去解析,你选择html语法

    接下来就可以直接运行npm run develop了

    你可以去google中搜索vue-devtools下载并安装,用于帮你监听组件的data属性变化

    vue中的基础知识点

    Vue实例

    https://vuefe.cn/guide/instance.html

    属性与方法

    我们自定义的一些数据和方法是要绑定到实例的不同属性上面去的例如数据都要绑定要data属性,方法都要绑定到methods方法

    实例上的data和methods里面的key值会自动挂载到vue实例上,我们管他们叫动态属性,获取方式直接使实例.动态属性名

    vue实例上的实例属性要通过实例.$实例属性名获取

    在vue实例里面用this,this指向的是vue实例可以通过this.a去获取动态属性

    可以通过this.$data去获取实例属性

    实例上有一个$watch方法可以监听data属性里面的数据的变化,data一变会自动触发监听事件的执行

    var data = {a: 1} const app = new Vue({ // 和数据相关的都挂载到data上 data: data, // 和方法相关的都挂载到methods上 methods: { // this和$的使用 func1: function () { console.log(this.a); console.log(this.$data.a); }, changeData:function () { this.a=2 } } }) // 先监听再改变 app.$watch('a', function (newVal, oldVal) { console.log(newVal) console.log(oldVal) }) // 值改变之后会自动执行监听方法 // data的值是可以直接改变的,和react的setState方法不一样,因为vue里面用了ES6的set和get方法,可以起到自动监听的作用 app.a=3 // 动态属性和实例属性// console.log(app)// console.log(app.a)// console.log(app.$data.a)实例生命周期

    和react的生命周期基本思想是一样的只不过react中是监听props和state属性的变化

    而在vue中是只监听data属性的变化

    vue中的生命周期函数要比react中的方法多

    这些生命周期方法只能在spa应用中起作用,单独作为双向数据绑定库无法生效

    vue生命周期图

    

    模板语法

    就是如何在.vue文件的template标签中书写内容

    {{}}(Mustache语法)里面会按照纯文本输出

    v-once指令只会执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定:

    v-html会按照html规则去解析内容

    我们在为标签的属性赋值的时候不能Mustache语法,我们要用v-bind指令v-bind绑定的属性必须是data属性里面定义的值,如果想写固定的值加单引号

    // 错误的写法

// 正确的写法
在Mustache中可以处理一些简单的js表达式,Mustache中的属性本身有什么方法,在里面也是可以直接使用的

    {{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}

在Mustache中可以使用自定义过滤器,也可以多过滤器串联。但是过滤器不能用在v-bind中,如果想实现相同的效果在v-bind中我们要用计算属性

    {{ message | capitalize }}{{ message | filterA | filterB }}new Vue({ // ... filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }})在dom标签中可以使用指令,如v-if,v-for

    在dom的事件中可以使用修饰符去帮你简化一些操作

    v-bind和v-on在模板语法中可以缩写

    计算属性

    计算属性可以处理模板语法中的复杂业务逻辑,跟Mustache语法比

    计算属性 vs methods

    我们看到计算属性和methods的效果基本你一样,那么他们的区别是什么?

    计算属性的依赖如果没有发生变化,当你再次调用计算属性的时候,能够立即返回上次缓存的计算值,而不需要从新执行计算属性的方法

    而方法需要从新执行方法体

    样例

    

    计算属性 vs watch

    watch方法每次只能监听一个data值的变化

    而计算属性可以同时监听多个data值的变化

    用计算属性可以简化watch中重复的代码

    

{{ fullName }}
//watch写法 var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) //计算属性的写法 //本质是你要获取全名 var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })

    计算setter

    计算属性默认是只有getter的,那么data属性里面你的值发生改变了,计算属性要从新执行

    而setter的作用是调用计算属性的时候给一个初始值,那么data属性里面的值也会跟着做相应的改变

    // 接上面的代码段computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}

    vue实例上的观察watch还是很有用的,在进行执行异步操作或昂贵操作时,我们要用watch这个实例属性因为你不要忘记计算属性出现的原因是为了解决mustache语法中有过多的逻辑操作问题,它只能进行一些小型操作的内容

    Class与Style绑定

    绑定要用v-bind:class和:bind:style

    v-bind:class指令可以与普通的class属性共存

    绑定的时候可以给对象,可以个数组,还可以有条件判断和三元表达式

    条件渲染

    v-if和v-else只能控制一个标签的渲染,而且v-else要紧跟着v-if

    如果想要控制一部分标签的渲染,需要用