vue事件代理

最新推荐文章于 2024-04-29 11:52:08 发布
最新推荐文章于 2024-04-29 11:52:08 发布
阅读量777 收藏 27
点赞数 26
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libingjiedd/article/details/137398868
版权

数据代理

Object.defineProperty

常见属性值

get和set函数

理解数据代理

Vue中的数据代理

Vue中的数据代理小结

事件处理

v-bind

事件处理小结

数据代理

Object.defineProperty

常见属性值
<body>
<script type="text/javascript">
let person={
    name:"kc",
    sex:"男"
}
Object.defineProperty(person,'age',{
    value:18,
    enumerable:true,//控制属性是否可以枚举（遍历），默认是false
    writable:true,//控制属性是否可以修改，默认是false
    configurable:true//控制属性是否可以删除，默认是false
    }
)
console.log(Object.keys(person))//遍历
    // console.log(person)
</script>

</body>

get和set函数 
<body>
<script type="text/javascript">
    let num=20;
let person={
    name:"kc",
    sex:"男"
}
Object.defineProperty(person,'age',{

//当有人读取person的age属性时get函数&#xff08;getter&#xff09;就会被调用&#xff0c;且返回值就会age的值
   //原始写法 get:function(){}  ----&gt;  简写  get(){}

get() {
console.log("age属性被访问了")
return num
},

//当有人修改age属性的值时&#xff0c;set函数就会被调用
set(value) {
    console.log(&#34;age的值被修改了&#xff0c;值为&#34;&#43;value)
    num&#61;value
}
}

)
console.log(Object.keys(person))//遍历
// console.log(person)
</script>

</body>

访问页面

理解数据代理

<script type="text/javascript">
//数据代理 ：通过一个数据的对象对另一个数据的属性进行操作(读取)

let obj&#61;{x:10}
let obj2&#61;{y:20}

Object.defineProperty(obj2,"x",{

 get() {
     return obj.x
 },
 set(value) {
    obj.x &#61;value
 }

})

console.log(obj2)
</script>

Vue中的数据代理

在Vue中的data数据，在其对象中以_data形式存在

存在数据代理，所以可以通过vm直接操作data中的值，_data中的值会跟着变化

Vue中的数据代理小结

1、Vue中的数据代理：

  • 通过vm对象来代理data对象中的属性的操作（读/写）

2、Vue中数据代理的好处：

  • 更加方便的操作data中的数据(如 { { _data.name}}----->{ {name}} ）

3、基本原理：

  • 通过Object.defineProperty()吧data对象中所有属性添加到vm上。
  • 为每一个添加到vm上的属性，都指定一个getter/setter。
  • 在getter/setter内部去操作（读/写）data中对应的属性

事件处理

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

</head>

<div id="root">
<h1>欢迎{ {name}}</h1>
<button v-on:click="info()" v-bind:title="buttonValue">点击提示信息</button>
<button @click="info1(123,$event)" v-bind:title="buttonValue">提示的按钮</button>
</div>

<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name:"孔超",
buttonValue:"这是一个按钮哦"
},
methods:{
info(){
console.log(event.target.innerText)//获取值
alert(vm.name+"hello")
},

        info1(number,event){
            console.log(number)
            alert(vm.name&#43;&#34;hello&#34;)
        }
    }


});

</script>

<body>

</body>
</html>

v-bind

v-bind:title=“xxx”，绑定一个属性，让鼠标移动到上面有提示信息

页面效果

事件处理小结

事件的基本使用：

1、使用v-on:xxx或者@xxx 绑定事件，其中xxx是事件名

2、事件的回调需要配置在methods对象中，配置在data中也可以，但是Vue会给data中的数据做代理，而我们的回调不需要做代理，这就增加了Vue的负担。

3、methods中配置的函数，不要用箭头函数！否则this就不是vm对象了，而是window

4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm，或者组件实例对象；

5、@click="test"和@click="test($event)"效果一致，但是后面的可以传如参数

冰糖雪梨dd
关注
Vue数据代理，事件处理，计算属性，监视属性
嘤嘤鸭的博客
07-28 313
Vue数据代理，事件处理，计算属性，监视属性
vue中事件代理的使用
qq_33404590的博客
01-05 1766
vue事件代理
Vue的事件代理
qq_42715869的博客
01-05 2396
vue事件代理使用场景与作用： 将事件代理的程序代理到父节点，比如此时要v-for 1w个span标签，不使用代理每个标签都绑定一个click事件，使用代理只在父节点设置点击事件（循环数据量少其实不影响） ...
vue中事件代理
weixin_34232363的博客
08-26 2706
由于在vue实例内部，this指向了实例本身，所以在编写事件代理的时候，用e.currentTarget引用绑定事件代理的元素，e.target引用事件目标元素。刚刚不注意想用this引用代理元素报错，羞愧~~ 转载于:https://www.cnblogs.com/alan2kat/p/7435051.html...
Vue 事件代理 【记录备忘】
weixin_43867432的博客
02-24 205
@click.native="OpenWebSizeDrawer($event)" //父容器加入代理事件 native 表示所有的子事件 // 需要代理的元素 加入 data-index index 可以随意取值 :data-index ="value" // 也可以加入属性 id 之类的 :id = "value" // 函数中 方法名(e) { let dom = e.target ; let index = dom.dataset.index ; let id = do
Vue中数据代理与事件处理
weixin_60719453的博客
11-30 1700
2、事件的回调需要配置在methods对象中，配置在data中也可以，但是Vue会给data中的数据做代理，而我们的回调不需要做代理，这就增加了Vue的负担。5、@click="test"和@click="test($event)"效果一致，但是后面的可以传如参数。4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm，或者组件实例对象；存在数据代理，所以可以通过vm直接操作data中的值，_data中的值会跟着变化。在Vue中的data数据，在其对象中以_data形式存在。
vue cli3 配置proxy代理无效的解决
10-16
在Vue CLI 3中，开发过程中常常需要配置代理来解决跨域问题，使得前端应用能够与后端API接口进行通信。然而，有时按照常规方法配置`proxy`后，可能会遇到代理无效的情况。本文将详细解释如何正确配置Vue CLI 3的`...
vue（2.x，3.0）配置跨域代理
10-15
最后，文章通过示例代码的形式，详细介绍了在Vue 2.x和Vue 3.0版本中配置跨域代理的方法和步骤，这对于前端开发人员来说具有重要的参考价值。通过理解同源策略和掌握配置代理的方法，可以更加灵活地解决开发中的跨域...
vue配置代理
xiaomingzi_12345的博客
07-25 2278
'/api'表示需要代理的接口路径，target属性表示代理的目标服务器地址，changeOrigin属性表示是否改变请求的源地址，pathRewrite属性用于重写请求的路径。上述代码中，我们通过修改axios的默认配置来配置代理。axios.defaults.baseURL表示请求的基础路径，axios.defaults.proxy表示代理的配置，包括代理服务器的地址、端口和协议。需要注意的是，配置代理服务器时需要注意跨域问题，并且在开发环境中生效，在生产环境中需要使用其他方式进行代理配置。
VueEventProxy让Vuejs支持全局事件
08-10
Vue Event Proxy：让Vue.js支持全局事件
深入解析：JS与Vue中事件委托（事件代理）的高效实现方法
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
02-28 4729
事件委托是一种利用事件冒泡的特性，在父节点上响应事件，而不是在子节点上响应事件的技术。它能够改善性能，因为只需要在父元素上设置一次事件监听器，就可以管理同一类型的所有子元素的事件。在日常开发中，很经常我们会遇到个问题，就是在长列表数据较多的时候，而又需要对子元素注册一些事件（如onClick）,就会造成比较大的内存开支，很耗费性能，也可能会造成页面卡顿等等；例如，可以在父元素上设置一个click事件监听器，然后在子元素上绑定一个click事件，通过事件委托实现父元素对子元素事件的响应。
Vue --事件委托
我的博客
07-01 1307
前端代码 简述： if(event.target.title == “edit”){ //如果点击到了edit let id = evenr.target.dataset.id; //拿着id参数执行着相关的操作 } 利用target获取相关参数传递给一个方法进行执行 好像和后端的有点区别，不是很懂先记下了 <ul> <li v-for="(item, index) in da...
Vue事件委托优化
友人C君的博客
02-16 829
虽然Vue不提倡也很少需要手动生成DOM，但是有时难免需要手动生成新的标签，此时，手动生成的新标签也像原生JS操作DOM一样，不会绑定事件，如以下例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue事件委托</title> ...
Vue —— 基础（一）（数据代理、事件处理、键盘事件）
HuoZhiyan 的博客
05-09 904
文章目录一、数据代理1. 回顾 Object.defineProperty 方法2. 数据代理3. vue 中的数据代理二、事件处理1. 事件的基本使用2. 事件修饰符3. prevent: 阻止默认事件（常用）4. stop：阻止事件冒泡（常用）5. once：事件只触发一次(从内到外)（常用）6. capture：使用事件的捕获模式（从外到内）7. self：只有 event.target 是当前操作的元素时才触发事件8. passive：事件的默认行为立即执行，无需等待事件回调执行完毕三、键盘事件1.
【vue系列-02】vue的核心属性，数据代理，事件
zhenghuishengq的博客
12-23 6279
深入理解vue的数据代理和事件
Vue的数据代理+事件处理+事件修饰符+键盘事件
Pig-pig-pig的博客
03-30 213
一、回顾Object.defineProperty()方法 1、几个属性 2、getter和setter（get函数和set函数） 二、初识Vue 三、数据代理 1、数据代理的定义 通过obj2去操作x 2、vue中的数据代理 1、概览 2、验证setter 3、数据代理图示 四、vue中的事件处理 1、点击事件 2、事件修饰符 五、键盘事件 1、常用按键 2、短横线 3、tab的用法 tab适用于keydown，不适用与keyup 4、定制按键别名 六、事件总结
vue跟jQuery中的事件冒泡、事件捕获、事件委托（事件代理）
最新发布
weixin_45392204的博客
04-29 1649
鼠标点击或者触发了dom事件，浏览器会从根节点（Document 对象）流向目标元素，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标元素。在捕获完成后，与事件捕获相反，事件会从目标元素流向文档根节点，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。在网页中，有时我们需要动态增加或移除页面中的元素，使用事件委托不需要再为新增的元素绑定事件，也不需要为删除的元素解绑事件。一直向下到目标元素后，从目标元素开始向上执行冒泡元素。
Vue项目--使用事件代理解决v-html 点击事件无效
你就是我的世界
10-20 5771
最近刚开始学习vue，正好就接到一个需要将原来的老项目改成vue。一路学习，一路踩坑。 言归正传，背景是这样的：项目是个后台管理系统，左侧有目录导航栏，如下图。 在之前的项目中，后台返回的是一段拼接好的html字符串，直接放上去完事了。但在现在vue项目里这样却很不方便，我是打算做成一个单页应用。这就要在导航目录上添加路由，以及存在二级目录如何打开的问题。之前是通过jquery操作...
vue2和vue3的事件代理
08-29
Vue 2和Vue 3在事件代理方面有一些细微的差异。让我来为你解释一下。 在Vue 2中，事件代理是通过子组件中的事件侦听器实现的。父组件可以使用`v-on`指令（或简写`@`）来监听子组件派发的事件。子组件需要使用`$emit`方法来触发事件，并传递相应的参数。父组件中的事件处理函数会接收到这些参数。 例如，在父组件中监听子组件派发的事件可以这样写： ```vue <template> <div> <child-component @custom-event="handleEvent"></child-component> </div> </template> <script> export default { methods: { handleEvent(payload) { // 处理事件 } } } </script> ``` 而在Vue 3中，事件代理的语法略有不同。现在，父组件可以直接在子组件上使用原生的事件监听器，就像在普通的HTML元素上一样。你可以使用`v-on`指令（或简写`@`）来监听子组件派发的事件，而不需要在子组件中显式地定义一个事件侦听器。 以下是在Vue 3中监听子组件事件的示例： ```vue <template> <div> <child-component @custom-event="handleEvent"></child-component> </div> </template> <script> export default { methods: { handleEvent(payload) { // 处理事件 } } } </script> ``` 需要注意的是，Vue 3中的事件代理语法更贴近于原生浏览器事件的处理方式，而Vue 2中的事件代理则是通过子组件自己实现事件的派发和侦听。这是Vue 3对事件系统进行了一些改进的一部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值