精华内容
下载资源
问答
  • vue中的this指向问题

    2020-09-09 21:26:44
    实际项目过程中。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。...箭头函数的this指向的是外层代码块中的this。所以this 当然指向的是vue实例,再用th

    实际项目过程中。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。then的回调是用es5的写法写的。

    发送请求前,this.phone还有值,发送请求后this.phone的值就有问题了。

    纠其原因是es5 的写法,this的值发生了变化。指向undefined。而这里我们的this 需要指向vue实例

    这里需要再继续补充箭头函数的知识。

    箭头函数的this指向的是外层代码块中的this。所以this 当然指向的是vue实例,再用this.phone就不会出错啦!

    展开全文
  • 这说明了showMessage1()里的this指的是window,而showMessage2()里的this指的是vue实例。※ 对于普通函数(包括匿名函数),this指的是直接的调用者,在非严格模式下,如果没有直接调用者,this指的是window。...

    第一个输出英文"Hello!”,第二个输出中文“你好!”。这说明了showMessage1()里的this指的是window,而showMessage2()里的this指的是vue实例。

    ※ 对于普通函数(包括匿名函数),this指的是直接的调用者,在非严格模式下,如果没有直接调用者,this指的是window。showMessage1()里setTimeout使用了匿名函数,this指向

    window。

    ※ 箭头函数是没有自己的this,在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例,所以它里面使用的this指向vue实例。

    注:

    【普通函数的this】

    普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项:

    this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj。

    在默认情况(非严格模式,未使用 'use strict'),如果函数没有直接调用者,this为window

    在严格模式下,如果函数没有直接调者,this为undefined

    使用call,apply,bind绑定的,this指的是绑定的对象

    绑定vue实例到this的方法

    为了避免this指向出现歧义,有两种方法绑定this。

    使用bind

    showMessage1()可以改为:

    showMessage1:function(){

    setTimeout(function() {

    document.getElementById("id1").innerText = this.message; //this 3

    }.bind(this), 10)

    }

    对setTimeout()里的匿名函数使用bind()绑定到vue实例的this。这样在匿名函数内的this也为vue实例。

    把vue实例的this赋值给另一个变量再使用

    showMessage1()也可以改为

    showMessage1:function(){

    var self = this;

    setTimeout(function() {

    document.getElementById("id1").innerText = self.message; //改为self

    }.bind(this), 10

    }

    展开全文
  • vue中this的指向

    千次阅读 2020-07-25 13:35:00
    vue中this指向 1.在Vue所有生命周期钩子方法   比如在mounted里使用this,this指向调用它Vue实例,如下列子: 2.vue组件生命周期钩子方法里面还有方法使用this   在函数内部使用this时,this会指向window...

    vue中this的指向

    1.在Vue所有的生命周期钩子方法

      比如在mounted里使用this,this指向调用它的Vue实例,如下列子:
    在这里插入图片描述

    2.vue组件生命周期钩子方法里面还有方法使用this

      在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时, 首先需要在最外部,设置一个变量,将其绑定上vue实例。
    在这里插入图片描述

    3.vue普通方法中使用this

      this指向调用它的Vue实例
    在这里插入图片描述

    4.vue箭头方法中使用this

      箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window;

    在这里插入图片描述

      完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
          <button v-on:click="show" >按钮1</button>
          <button v-on:click="show2" >按钮2</button>
          <p>{{date}}</p>
        </div>
        <script src="vue.js"></script>
        <script>
            var name = 'hello';
            var app = new Vue({
                el:'#app',
                data:{name:"你好",date:new Date()},
                methods:{
                    show:function()
                    {
                        console.log('普通方法.............................');
                        console.log(this.name);
                        console.log(this);
                    },
                    // 箭头方法
                    show2 :() =>
                    {
                        console.log('箭头方法.............................');
                        console.log(this.name);
                        console.log(this);
                    }
                },
                mounted:function()
                {
                    console.log('Vue所有的生命周期钩子方法.............................');
                    console.log(this);
                    console.log(this.name);
                    _this = this;
                        this.timer = setInterval(function(){
                       
                            _this.date = new Date();
                            console.log('vue组件生命周期钩子方法里面还有方法使用this.............................');
                            console.log(_this.name);
                            console.log(_this);
                            console.log(this.name);
                            console.log(this);
                        },10000);
    
    
    
                }
            
            })
        </script>
    </body>
    </html>
    
    展开全文
  • vue中this的指向问题

    2020-11-20 09:52:53
    vue中的created、computed等中定义的方法(如A:function)中this指向这个Vue实例,但如果在A方法中又定义了一个B方法,此时B方法中的this不再指向这个Vue实例,而是指向window对象。 解决方法: 此时就需要在A方法...

    问题描述:

    在vue中的created、computed等中定义的方法(如A:function)中this指向这个Vue实例,但如果在A方法中又定义了一个B方法,此时B方法中的this不再指向这个Vue实例,而是指向window对象。

    解决方法:

    此时就需要在A方法里定义var _this = this,用来改变this的指向,然后在B方法里使用_this调用Vue实例

    展开全文
  • vue中的this指向问题 如果方法中没有使用箭头函数,记得把this赋值给另一个变量再使用。 转载于:https://www.cnblogs.com/knuzy/p/9800001.html
  • vue中this的指向问题以及具体实例展示。
  • Vue中this的指向问题

    2020-09-09 21:25:30
    实际项目过程中。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。...箭头函数的this指向的是外层代码块中的this。所以this 当然指向的是vue实例,再用th
  • Vue中组件this指向问题

    2020-06-26 21:40:19
    提到vue的组件化开发,那么肯定会存在着data(){}用来存放数据,而一般使用时候不能直接使用,而是需要用this指向。 var app = new Vue({ el:"#app", data:{ }, components:{ aa:{ template:'#aaa', ...
  • vue 组件中this指向

    千次阅读 2018-08-14 17:01:00
    今天开始学习慕课网的“去哪网”app开发,之前用学了一段...vue提供的改变数据来改变dom中的内容,这样很大程度上提高了性能,组件中方法中的this是当前组件,可以改变当前组件中的data()方法中的数据,进而改变do...
  • vue项目中this指向

    千次阅读 2017-08-02 08:19:27
    实际项目过程。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。then的回调是用es5的写法写的。...而这里我们的this 需要指向vue实例这里需要再继续补充箭头函数
  • methods:{backRenderer(instance, td, row, col, prop, value, cellProperties, t) {// 如何让此处的this指向函数的掉者,也就是下文中的cells,而不是指向vueconsole.log(this);Handsontable.renderers....
  • Vue 方法中this指向 引起祸端

    千次阅读 2018-12-19 11:08:39
    最近在写 vue 项目, 使用 总监封装 好的框架,遇到一个问题: vue 实例 methods 中的 方法在传递后,通过 函数名() 方式调用后, 其内部 this 竟然没有指向 window。当时就不服了,各种 debugger , 无果。 早上...
  • 普通函数中的的this指向取决于运行该函数的作用域,而箭头函数的this是定义时就固定了。然而在vue中有一事不明:惊喜点击惊喜点击1varapp=newVue({el:"#app",data:{},methods:{onSurprise:()=>{...
  • vue函数中this的指向

    2019-08-19 17:44:02
    在下面的例子中可以看出,普通函数的this指向的就是Vue的实例,this.message可以获取到data中的值,而箭头函数的this指向了window,不能获取到值 <script> new Vue({ el : '#app', data : { message : ...
  • Vue中this指向的问题

    千次阅读 2019-05-09 22:43:46
    在下面的例子中可以看出,普通函数的this指向的就是Vue的实例,this.message可以获取到data中的值, 而箭头函数的this指向了window,不能获取到值 <!DOCTYPE html> <html lang="en"> <head> <...
  • Vue axios中this的指向问题

    万次阅读 2017-11-02 21:06:34
    Vue中this始终指向Vue,但axios中this为undefined,例如若需要赋值给变量用以渲染数据,可以通过=>函数,这时this为Vue
  • 主要介绍了详解vue中的computed的this指向问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 826
精华内容 330
关键字:

vue中的this指向

vue 订阅