前端学习(2485):vue里面的this指向

一、普通函数中的this 

 

这是vue文档里的原话:

All lifecycle hooks are called with their 'this' context pointing to the Vue instance invoking it.

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

 
  1. <div id="app">

  2.     <button class="btn btn-primary" v-on:click="on()">点击添加并查看this</button>

  3.     <ul class="list-group" v-for="item in list">

  4.         <li class="list-group-item">{{item}}</li>

  5.     </ul>

  6. </div>

  7. <script>

  8.     new Vue({

  9.         el: "#app",

  10.         data: {

  11.             list: ["banner", "orange", "apple"]

  12.         },

  13.         methods: {

  14.             on: function() {

  15.             alert(this.list);

  16.             this.list.push("Potato")

  17.         }

  18. })

  19. </script>

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

 

 

二、箭头函数中的this

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

这里箭头函数指向window。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416415.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 单元测试用例_Java单元测试和JUnit

**********************单元测试和JUnit********************************为什么要使用单元测试1.底层代码没问题,上一层才不会出现问题.. 就像盖楼一样2.提高士气&#xff0c;明确知道我的东西是没问题的, 保证你不被开3.加大测试的力度可以降低后期维护的成本一.什么是JUnitJ…

5专题总结-数据结构

专题5-数据结构 2017-07-13 C Primer P329好好研读&#xff0c;stack,queue,priority_queue都是顺序容器适配器adaptor。&#xff08;接受一种已有的容器类型&#xff0c;使其行为看起来像另一种事物一样&#xff09; 适配器的底层容器&#xff08;array和forward_list都不行&a…

mysql8.0创建属性_MySQL8.0新特性——资源管理

MySQL8.0——资源管理&#xff1a;参考官方文档&#xff1a;https://dev.mysql.com/doc/refman/8.0/en/resource-groups.htmlMySQL支持资源组的创建和管理&#xff0c;并允许将服务器内运行的线程分配给特定组&#xff0c;以便线程根据组可用的资源执行。组属性可以控制其资源&…

Ribbon自带负载均衡策略比较

Ribbon自带负载均衡策略比较 策略名策略声明策略描述实现说明BestAvailableRulepublic class BestAvailableRule extends ClientConfigEnabledRoundRobinRule选择一个最小的并发请求的server逐个考察Server&#xff0c;如果Server被tripped了&#xff0c;则忽略&#xff0c;在选…

java byte数组转int数组_Java任意长度byte数组转换为int数组的方法

前言嗯。最近工程上遇到一个byte数组转换为int的问题&#xff0c;解决过程中遇到了几个坑&#xff0c;经过各种查资料终于还是解决了。撒花。Java的位运算以及byte数组与其他类型数据的转换比c/c感觉麻烦一些。这里简单说明一下byte数组和int的转换吧。总所周知&#xff0c;int…

newcondition java_Java并发Condition接口

全屏java.util.concurrent.locks.Condition接口提供一个线程挂起执行的能力&#xff0c;直到给定的条件为真。 Condition对象必须绑定到Lock&#xff0c;并使用newCondition()方法获取对象。Condition类的方法以下是Condition类中可用的重要方法的列表。序号方法名称描述1publi…

前端学习(2486):$emit

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn&#xff1b; 例如&#xff1a;子组件&#xff1a; <template><di…

葡萄城报表介绍:B/S 报表软件

葡萄城报表介绍&#xff1a;B/S 报表软件 B/S 报表软件定义 B/S&#xff08;Browser/Server&#xff0c;浏览器/服务器模式&#xff09;也称 B/S 结构&#xff0c;是 WEB 兴起后的一种网络结构模式。B/S 模式是由最开始的 C/S&#xff08;Client/Server&#xff0c;客户机/服务…

java接口与集合_【总结】Java常用集合接口与集合类

目录常见集合接口概述CollectionMapCollection接口Map接口补充内容常见集合接口概述Java中包含许多集合接口。其中比较常见的主要是Collection接口和Map接口&#xff1a;1.1 Collection由单元素组成的集合。其比较常见的直接子接口是List、Set和Queue接口。表1.1 Collection接口…

Hexo自定义页面的方法

原文转自&#xff1a;http://refined-x.com/2017/07/10/Hexo%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%B9%E6%B3%95/ Hexo是静态页博客生成利器&#xff0c;同很多博主一样&#xff0c;前端路上原创技术博客也是使用Hexo生成并托管在Github Page上的&…

java 图形绘制_Java Graphics 图形绘制

Graphics类提供基本绘图方法&#xff0c;Graphics类提供基本的几何图形绘制方法&#xff0c;主要有&#xff1a;画线段、画矩形、画圆、画带颜色的图形、画椭圆、画圆弧、画多边形、画字符串等。画线段drawLinepublic abstract void drawLine(int x1,int y1,int x2,int y2)在此…

woodcut

http://www.lintcode.com/en/problem/wood-cut/# 二分答案&#xff0c;贪心验证&#xff0c;具有单调性 class Solution { public:/***param L: Given n pieces of wood with length L[i]*param k: An integer*return: The maximum length of the small pieces.*/int woodCut(v…

java web应用程序_如何构建Java Web 应用程序 - Spring Boot?

Spring Framework 是可以帮助 Java 开发人员创建企业级应用程序的开源解决方案。构建在该平台基础之上的较热门项目之一是 Spring Boot&#xff0c;它提供一种简化的方法来创建独立的 Java 应用程序。本教程将逐步讲解如何创建示例 Spring Boot 入门 Web 应用&#xff0c;并将其…

工作59:常见报错

常见报错解决 1. 页面显示没有数据 页面显示没有数据的时候&#xff08;三级联动&#xff09;&#xff0c;注意去mounted里面看一下&#xff0c;获取数据的方法如getAddress()&#xff1b;有没有执行&#xff0c;是否将数据渲染到了页面&#xff1b; 2.404 状态码 第一次&a…