[vue] @click 不同写法调用对象中函数时影响 this 指向，this.__ob__.dep.sub

最新推荐文章于 2024-08-16 07:34:20 发布
最新推荐文章于 2024-08-16 07:34:20 发布
阅读量473 收藏
点赞数
分类专栏： 吐槽 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011091701/article/details/109696321
版权

Vue.js 组件 data对象 共享数据 JavaScript
关键词由CSDN通过智能技术生成
吐槽 同时被 2 个专栏收录
58 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

看例子

https://codepen.io/q962_/full/pobGdJv

这样是可以的，因为 object 通常时直接写在 data 里的，不纯在多个 vm 共用

提及
关注
专栏目录
进阶vue面试题总结
bb_xiaxia1998的博客
10-19 727
在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一般需要对DOM元素进行底层操作时使用，尽量只用来操作 DOM展示，不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新；如必须修改可以在自定义指令中使用keydown事件，在vue组件中使用 change事件，回调中修改vue数据;（1）自定义指令基本内容钩子函数：指令定义对象提供钩子函数。
前端高频vue面试题合集
bb_xiaxia1998的博客
10-27 3244
Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。简介： hash模式是开发中默认的模式，它的URL带着一个#特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。原理： hash模式的主要原理就是onhashchange()事件： 使用onhashchange()事
vue @click传参时this问题
weixin_43900888的博客
05-07 6059
vue中，当button的@click函数传递data中数据作为函数参数时，不可使用this.xxx，因为此时this指向button自身，而不是数据。 例如，下列为错误示范： <el-button type="primary" round @click="exchange(this.tableDatae)">兑换</el-button> export default{ data(){ return { tableData:'k' } } } 正确示范： &l
关于vue的@click传递
qq_40088443的博客
03-22 3626
新手做项目碰到了需要操作点击的这个元素的问题。在Jquery里可以直接$(this)就能解决了，但是在vue里，this被赋予了特殊的含义，这样做并不可以。所以当碰上需要传递点击的这个元素时，可以用事件传递。在@click后面加上事件event。示例如下： <div @click="test($event)"> </div> 然后Vue部分： methods:{ t...
Vue.js 中的 @click 事件详解
最新发布
weixin_63490470的博客
08-16 1908
除了使用@click指令监听原生 DOM 事件，Vue.js 还允许我们自定义事件，并在组件之间进行通信。-- 父组件 --> < template > < div > < ChildComponent @custom-event = " handleCustomEvent " /> < script > import ChildComponent from './ChildComponent.vue';
vue调函数时参数this的写法
Queen-Shir的博客
07-25 1318
js写法：@click="switchChecked(this)" Vue写法：@click="switchChecked($event)"
vue事件绑定(事件修饰符)、事件处理中的this
CIA的博客
10-25 918
事件绑定(修饰符) 1.事件绑定修饰符 @click.stop 停止事件冒泡 @click.self 停止向下传递 @click.prevent 阻止默认行为 @click.capture 捕获模式修饰符 @click.once 事件只绑定一次 @scroll.passive 提升滚动性能 2.按键绑定修饰符 @keydown 按键就可以触发事件 @keydown.enter 按下回车键时触发 @keydown.tab 按下tab键时触发 @keydo
点击事件中的this|click事件与change事件|v-model
随便写写
12-18 1714
js <input type="radio" value="xxx" name="sex" onclick="ccc(this)" />男 <input type="radio" value="yyy" name="sex" onclick="ccc(this)" />女 <script> function ccc(_this) { console.log(_this); console.log(_this.value); } </scr
前端知识点——一口气看完Vue源码
AeoRus的博客
06-27 377
写在前面 因为拉勾教育大前端高薪训练营的关系开始接触到 Vue 的源码。 回想这三年半的前端生涯中只有最近的几个月代码中才会有让我真的去查看源码的场景。 比如使用 uni-app 开发组件时会想到去看看 ElementUI 中是怎么实现的。 比如使用 EggJS 做文件上传下载时苦于文档写的不够清晰，会想到去看看 egg-multipart 是怎么实现的。 但对于 Vue 的原理认识还一直还停留在 Object.defineProperty 响应式处理 和 document.createDocumentFr
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2777
09Vue中使用样式---class.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;09Vue中使用样式----class&lt;/title&gt; &lt;script type="text/javascript
Vue 指令函数的简写形式
mqingo的博客
01-07 4826
  10指令函数的简写形式.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=
vue中的怎么绑定事件以及this指向哪里
weixin_48047636的博客
05-18 403
<body> <div id="b"> <!-- <button v-on:click='c'>我是vue1</button> --> <button @click="c">我是vue2</button> <button @click="e">我是语法糖</button> </div> <script src="
Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）
我是一只蘑菇17的博客
11-26 3535
1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）   v-on:click="fun"   @click="fun"   @click="fun(参数)" <button @click="test1">test1</button>  <button @click="test2('abc')">test2&...
javascript里面关于绑定click的this和onclick触发this的区别
a413883127的专栏
05-24 2202
之前在做项目的时候，有时候会直接
Vue.js源码逐行代码注解src下core下observer
程序员哆啦A梦，蓝胖子
02-22 232
直播敲Vue吗哈哈哈哈，参加吗array.js/* *nottypecheckingthisfilebecauseflowdoesn'tplaywellwith *dynamicallyaccessingmethodsonArrayprototype */ /** *定义arrayMethods对象，用于增强Array.prototype *当...
关于click事件this的指向问题
前端一线搬运工的博客
12-11 3395
我的需求是页面内容是新增的,但是要在新增的内容里面点击其中一些内容发生事件,可是在事件中的this指向不对,即 $("div").click("p",function () { console.log(this) // //这里的this始终指向div }) 此时我需要指向我点击的内容p ,则使用event.target替换this,即 $("div").click("p",fun...
vue——@click的事件命令以及修饰符
chunchun1230的博客
09-29 1万+
1、@click.stop 阻止事件冒泡 //只弹出“noclick” <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", .
javascript中onclick(this)用法和onclick(this.value)用法介绍
热门推荐
只在朝暮间的博客
06-14 5万+
onclick(this.value)代码详解 <html> <head> <script language="javascript"> function test(value){ if(value=='1') { alert("11111111"); }else{ alert
Vue源码解析：双向绑定原理
weixin_34062469的博客
01-21 650
通过对 Vue2.0 源码阅读，想写一写自己的理解，能力有限故从尤大佬2016.4.11第一次提交开始读，准备陆续写： 模版字符串转AST语法树 AST语法树转render函数 Vue双向绑定原理 Vue虚拟dom比较原理 其中包含自己的理解和源码的分析，尽量通俗易懂！由于是2.0的最早提交，所以和最新版本有很多差异、bug，后续将...
this._.merge(initialOption.value, option) 转换vue3写法
06-13
在 Vue 3 中，我们可以使用 `reactive()` 函数来创建响应式的对象。因此，可以将 `this._.merge(initialOption.value, option)` 改为以下 Vue 3 的写法： ```javascript import { reactive } from 'vue' // 创建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值