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 ...
随机推荐
- ubuntu set/unset proxy
export http_proxy export https_proxy unset http_proxy unset https_proxy
- 【DDD】业务建模实践 —— 发布帖子
本文是基于上一篇‘业务建模战术’的实践,主要讲解‘发表帖子’场景的业务建模,包括:业务建模.业务模型.示例代码:示例代码会使用java编写,文末附有github地址.相比于<领域驱动设计> ...
- Python_Xlrd&Xlwt
import xlrd # \U 开始的字符被编译器认为是八进制 解决方法 r objWB = xlrd.open_workbook(r'C:\Users\IBM\Desktop\S1\7月下旬入库表 ...
- B1014. 福尔摩斯的约会
14/20 #include<bits/stdc++.h> using namespace std; map<char,string> day; int main(){ day ...
- 【SE】Week3 : 个人博客作业（必应词典）
关于 微软必应词典客户端 的案例分析 [第一部分] 调研,评测 一.用户采访 1) 介绍采访对象的背景和需求: 被采访同学是马来西亚华裔叶能端同学,由于此前在马来西亚英语是第二语言,因此经常需要 ...
- Hamburger
Bread: 我觉得舒婷解决问题的思路还是很不错的,对于java 的窗口框架也是很熟悉,打码速度也快了很多. Meat:但是我发现你在命名的时候会出现随意的现象,如果命名只有你自己看得懂的话,那么会增 ...
- ns3的输入输出奥秘（二） 命令行参数
命令行参数 (1) UdpEchoClientHelper echoClient (interfaces.GetAddress (1), 9); echoClient.SetAttribute (&q ...
- Mybatis：Eclipse引入dtd约束文件使得xml文件有提示
https://blog.csdn.net/lsx2017/article/details/82558135
- extjs几个奇怪的错误
在用Extjs进行网页开发的时候,遇见了一下两个错误,这两个错误的位置用firebug调试显示在extjs-all.js Ext.resetElement is undefined g.el is n ...
- IIS错误提示：另一个程序正在使用此文件 进程无法访问
在IIS管理中,启动一个配置好的网站时,提示:另一个程序正在使用此文件 进程无法访问 原因:网站绑定端口被占用 解决办法:更换绑定端口或者将占用此端口的程序关掉即可