Vue里this指向

Vue里this指向一 普通函数中的 this nbsp 这是 vue 文档里的原话 All nbsp lifecycle nbsp hooks nbsp are nbsp called nbsp with nbsp their nbsp this nbsp context nbsp pointing nbsp to nbsp the nbsp Vue nbsp instance nbsp invoking nbsp it 意思是 在 Vue 所有的生命周期钩子方法 如 created mounted nbsp updated 以及 destroyed 里使用 this this 指向调用它的 Vu

一、普通函数中的this 

这是vue文档里的原话:

意思是:在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,this指向调用它的Vue实例,即(new Vue)。 

<div id="app">     <button class="btn btn-primary" v-on:click="on()">点击添加并查看this</button>     <ul class="list-group" v-for="item in list">         <li class="list-group-item">{ 
  {item}}</li>     </ul> </div> <script>     new Vue({         el: "#app",         data: {             list: ["banner", "orange", "apple"]         },         methods: {             on: function() {             alert(this.list);             this.list.push("Potato")         } }) </script>

实例:这里的this指向的是new Vue这个对象。new Vue也可以写成var C=new Vue({}).所以这里的this指向的是C。


 

二、箭头函数中的this

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。

Vue里this指向

这里箭头函数指向window。


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/231173.html原文链接:https://javaforall.net

(0)
上一篇 2026年1月23日 下午8:01
下一篇 2026年1月23日 下午8:22


相关推荐

  • pycharm代码运行快捷键

    pycharm代码运行快捷键shift F10

    2026年3月27日
    1
  • POJ 3280 Cheapest Palindrome (DP)

    POJ 3280 Cheapest Palindrome (DP)

    2022年1月5日
    47
  • Linux下rpm包x86、i386、i486、i586、i686和x86_64这些后缀含义

    Linux下rpm包x86、i386、i486、i586、i686和x86_64这些后缀含义iamlaosong评:虽然rpm包版本很多,不过目前的新机器都可以使用x86_64版本,而且也应该使用这个版本,除非一些特殊场合,比如为了使用一些老版程序。有些功能没有x86_64版本,那也只好用i386了。现在的发行包,一般也就提供i386和x86_64两个版本,即32位版本和64位版本,有些甚至已经不提供i386版本了。1、i386、i586、i686与Noarchi386—几乎所有的X…

    2022年6月6日
    140
  • 微信小程序轮播图(详细)「建议收藏」

    微信小程序轮播图(详细)「建议收藏」微信小程序轮播图效果图wxml:<swiperindicator-dots=”{{indicatorDots}}”autoplay=”{{autoplay}}”interval=”{{interval}}”duration=”{{duration}}”><blockwx:for=”{{imgUrls}}”><swiper-item><imagesrc=”{{item}}”class=”slide-image”/></sw

    2022年5月22日
    43
  • 浅谈幅度调制(Amplitude Modulation)

    浅谈幅度调制(Amplitude Modulation)1 实现调制的具体过程 之前以为只是简单的将载波与调制信号相乘 但现在并不是这样的 在这个基础上还加上了载波信号 那么这个是有必要的吗 2 载波信号的限制 一个方面是频率的限制 另一方面是振幅的限制 但貌似对载波的波形也有限制 如果不是单纯的稳定的波形 调制后的波形很难直观体现需要传递信息的特征 那么使用其他特征的载波波形 是否可以 对提取难度有着多大的影响

    2026年3月19日
    2
  • Rubymine 无法Debug的方法

    Rubymine 无法Debug的方法有时 MacOS 下 Rubymine5 无法 Debug ruby debug ide 总是报这个错误 Cannotconnec 折腾了好久 按照 stackoverflo 试着改了主机名 终于 Ok 原因是有些 wifi 的主机名是 localhost 通过下面命令 改成新的主机名

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号