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 ...
随机推荐
- python中的and和or用法
在python中and和or返回的值并不是True和false这么简单.虽然他们看上去和c++中的&&和||有些相似.在了解and和or之前,我们先要了解python中的True和Fa ...
- mvc5.0-路由
:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...
- 给Android Studio 设置背景图片
初用Android Studio的我 看见这么帅的事情,肯定自己要设置试试(又可以边看女神边打代码了,想想都刺激)由于这不是AS的原始功能所以需要下载插件 先看看效果图吧: 1.下载插件 Sexy E ...
- Docker-安装(CentOS7)
1.安装需要的软件包:yum-util提供yum-config-manager功能 yum install -y yum-utils device-mapper-persistent-data lvm ...
- 【容器魔方解读】AWS Re:Invent 2018大会
每年云计算领域技术与商业风向标之一的AWS Re:Invent大会上周在美国拉斯维加斯召开,如往届一样,AWS密集发布了上百项的新产品或新技术.随着国内近两年云计算尤其是公有云的普及度越来越高,国内各 ...
- 微软职位内部推荐-Principal Software Eng Mgr
微软近期Open的职位: Job Title:   Principal Software Eng Mgr Work Location: Shanghai, China Job Desc ...
- highcharts多个Y轴
http://blog.sina.com.cn/s/blog_6a53599101019qax.html 多个Y轴的实现方法在于把yAxis设置成一个数组,里面的一个对象代表一条Y轴,利用opposi ...
- js执行问题
金三银四搞事季,前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 boy 转述一下. 以下是我一个朋友的故事,真的不是我. f ...
- input 清空值。（转载）
ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识.作为组件的属性,其属性值可以是一个字符串也可以是一个函数. 其实,ref的使用不是必须的.即使是在其适用的场景中也不是非 ...
- Android控件第1类——TextView
Android提供TextView,它不能被编辑,它的子类EditText可以编辑.TextView有很多子类. 1.EditText,继承自TextView EditText可以编辑. 可以设置in ...