vue中的this指向问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
</head>
<div id="app" style="width: 100%;height: auto;font-size:20px;">
<p id="id1"></p>
<p id="id2"></p>
</div>
<script type="text/javascript">
var message = "Hello!";
var app = new Vue({
el:"#app",
data:{
message: "你好！"
},
created: function() {
this.showMessage1(); //this 1
this.showMessage2(); //this 2
},
methods:{
showMessage1:function(){
setTimeout(function() {
document.getElementById("id1").innerText = this.message; //this 3
}, 10)
},
showMessage2:function() {
setTimeout(() => {
document.getElementById("id2").innerText = this.message; //this 4
}, 10)
}
}
});
</script>
</html>
第一个输出英文"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指向问题的更多相关文章
- Vue中关于this指向的问题
由Vue管理的函数 例如: computed 计算属性 watch 监视属性 filters (Vue3中已弃用且不再支持) 过滤器 .... 上述属性里配置的函数不要采用箭头函数写法,因为箭头函数没 ...
- vue 中this指向遇到的坑
vue中的this指向问题 如果方法中没有使用箭头函数,记得把this赋值给另一个变量再使用.
- vue中使用定时器时this指向问题
在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...
- (vue.js)vue中引用了别的组件 ，如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
- vue中使用Ajax(axios)、vue函数中this指向问题
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...
- vue中使用定时器时this指向
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- Vue中ajax返回的结果赋值
这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...
随机推荐
- 设计模式 笔记 单例模式 Singleton
//---------------------------15/04/09---------------------------- //Singleton 单例模式-----对象创建型模式 /* 1: ...
- [转载] 相机越贵画质越好？聊聊CMOS设计
似乎在很多人心目中,个位数机身就代表了品牌最强成像素质,这或许有“人不识货钱识货”的道理在作祟,但事实上如佳能1DX2或尼康D5,又或是索尼A9这种旗舰机真的就一定能代表本家的画质巅峰么?这一切都得从 ...
- docker之compose 编排项目
一.docker-compose 的介绍 docker-compose是一种容器编排工具,可以将多个docker容器关联部署.通过yaml文件,可以描述应用的架构,如使用什么镜像.数据卷.网络.绑定服 ...
- 外网主机访问虚拟机下的web服务器（NAT端口转发）-----端口映射
主机:系统win7,ip地址172.18.186.210 虚拟机:VMware Workstation 7,虚拟机下安装了Centos操作系统,ip地址是192.168.202.128,部署了LAMP ...
- Intellij IDEA 2017 debug断点调试技巧与总结详解篇
转载自csdn----------------------------------------------------------------------https://blog.csdn.net/q ...
- 网易云易盾朱星星：最容易被驳回的10大APP过检项
本文由 网易云发布. 1月20日,“走进网易:移动测试与安全实践”公开活动在杭州西湖区颐高创业大厦4F楼友会创业咖啡厅举行.本次活动的议题聚焦在如何实现应用的高效开发.安全过检.开发功耗降到最低等热 ...
- 《Linux内核分析》第二周学习小结 操作系统是如何工作的？
郝智宇 无转载 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一．函数调用堆栈: 1.计算机是 ...
- C# 7中函数多值返回_转自InfoQ
本文要点 应遵循<.NET设计规范:.NET约定惯用法与模式>一书.和十年前第一版出版时一样,书中给出的原则在当前依然有指导意义. API设计是最重要的.设计不好的API会在极大地增加软件 ...
- Alpha冲刺——测试随笔
写在前面 作业链接 测试工作安排 测试模块 用户登录 日常管理模块 项目展示模块 测试计划 用户登录 测试功能 测试项 输入/操作 检验点 预期效果 用户登录 登录动作 点击登录 报错提示 无法登录, ...
- Git从零开始（二）
前面提交了一个test1.txt文件,接下来看看这个文件接下来的命运. 一.继续修改并提交 在test1.txt中修改后, git status 查看git的状态, 会提示我们文件test1.txt被 ...