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）。

<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。

这里箭头函数指向window。

Vue里this指向相关推荐

Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: 参考文章: (1)Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: (2)https://www.cnblogs. ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
Vue 里的$如何理解
如下代码: new Vue({el: '#app',router,store,i18n,test,render: h => h(App) })// 用的时候this.$store.dispatc ...
Vue 里几个重要的指令
Vue 里几个重要的指令 --资源来自黑马程序员 v-text v-html v-on v-show v-if v-bind v-for v-model --资源来自黑马程序员) v-text &l ...
Vue项目实战01: vue里父传子传事件(easy)
vue中的组件通信相信小伙伴们已经达到炉火纯青的地步了提到vue里父子组件通信脑子里第一个想到的是不是使用$emit来传递. 实现肯定是能实现的下面我们一起看一下一种简单的方法父组件: 在父 ...
[vue] 为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？
[vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗? 也可以写为js,jsx,ts,tsx这种个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！
这两个插件我用过好几次,有时候很顺利,不顺利的时候真的很麻烦,一直无法滚动,明明style里已经有样式了,就是滚动不了. 先说下在vue里的三种的引入方式: 在index.html文件里通过scrip ...
html input 的value变颜色,vue里input根据value改变背景色的实例
这篇文章主要为大家详细介绍了vue里input根据value改变背景色的实例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 1.首先定义两个不同 ...
vue-loader无法解析vue里的stylus的style，外部引入styl文件可以解析，引入VueLoaderPlugin也没用
先贴webpack.config.js的配置文件 const path = require('path'); const webpack = require('webpack') const VueL ...

Vue里this指向

Vue里this指向相关推荐

最新文章

热门文章