上一篇文章 Vue学习——【第四弹】 中学到了数据代理，这篇文章接着学习 Vue中的事件处理。
我们在学习JavaScript时就经常接触事件处理，比如在进行表单、按钮、列表折叠等操作时，我们就经常用到 click（点击）事件。在JS中我们经常把事件处理看作一个DOM事件。
在Vue中，事件处理是控制数据变化的控制器，是连接视图与数据的桥梁。
事件处理的语法是：
v-on：事件名="处理事件的函数名" 或者是 @事件名="处理事件的函数名"
通常情况下，我们选择后者的写法
在这里，处理事件的函数名一定要写在 methods配置项中，以便让当前的组件实例访问。
Vue先通过v-on指令将事件绑定到DOM元素上；
当触发事件时（如点击按钮、输入文本等），DOM元素会检测到，并向Vue实例传递事件对象；
Vue实例通过事件响应函数来处理这个事件对象，并执行相应的操作，如调用方法、更新数据等；
如果需要修改数据，Vue会自动重新渲染组件来更新DOM中的数据。
比如我们给最常见的按钮绑定一个click事件，实现数据处理：
<body>
<div id="demo1">
<h3>{{message}}</h3>
<button v-on:click="show">了解更多</button> <!--给按钮添加点击事件，当点击按钮时就执行回调函数；下面是简写形式-->
<!-- <button @click="show">了解更多</button> -->
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#demo1',
data:{
message:'hello Vue',
},
// 使用一个配置项叫做 methods 将回调函数show添加到Vue实例中
methods:{ //将show函数作为一个方法放到 methods对象中
show(){
alert('欢迎学习Vue')
}
}
})
</script>
运行效果：
Vue先通过v-on指令将click事件绑定到DOM元素 button上；
当点击按钮时，DOM元素会检测到事件被触发，开始向Vue实例传递事件对象；
而Vue实例就会通过事件响应函数来处理这个click事件，并开始调用show()函数。
另外我们可以看下在methods配置项中函数的this指向问题，我们在控制台打印出methods配置项中函数中的this：
<script type="text/javascript">
new Vue({
el:"#demo1",
data:{
message:"hello Vue"
},
methods:{
show(){
console.log("这是show函数中的this",this)
}
}
})
</script>
我们通过控制台打印的结果看出，这里的this指向的是Vue实例对象
当然在配置项中我们写的是普通函数，如果是换成箭头函数，它的this还会指向Vue实例对象吗？
<script type="text/javascript">
new Vue({
el:'#demo1',
data:{
message:'hello Vue'
},
methods:{
show:(event)=>{
console.log("show函数改为箭头函数后的this",this) //写成箭头函数后就不会有指向Vue实例的this，就会调用到全局的window；因此我们在Vue实例中写回调函数时最好写成普通函数
}
}
})
</script>
我们看到，如果是换成箭头函数，此时的this指向是全局window
因为箭头函数是没有自己的this值的，它继承的是父级作用域中的this值；因此 如果把箭头函数写在methods配置项中，此时this指向的是Vue实例之外的对象，而一个普通函数的“this”则指的是当前的Vue实例。
也就是说，当我们在书写事件处理函数时，或者说methods配置项中的函数，要尽量写成普通函数，原因有如下几点：
1：使用箭头函数定义Vue的methods函数，this指向的是Window，而不是组件实例，需要用普通函数来定义methods函数，才能正确地访问组件实例的属性和方法。
2：如果在methods中包含了异步函数，那么箭头函数的“this”值将会是undefined，这会导致代码无法正常工作。
在进行事件绑定时我们可以给调用的函数进行传递实参的，它的语法是
@事件名=“事件函数(实参1，实参2,…实参n)”
如果是不给调用的函数传递参数的话，它会默认传递event
<div id="demo">
{{message}}
<button @click="show">了解更多</button> <!--没有给show函数传递实参-->
</div>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
message:"hello Vue"
},
methods:{
show(a){ //这里的show中传递的是形参
console.log("这是默认传递的参数",a)
}
}
})
</script>
运行结果：
这是在不给show函数传递实参的情况下，Vue会默认我们传递了一个参数，并且这个参数是一个事件对象。
如果我们给它传递一个实参会发生什么呢？
如图，我们给show函数传递了一个数值 1024，通过控制台运行的结果可以看出，当我们点击按钮时，就会调用show，并将传递的参数 1024打印出来，但是原来Vue给我们默认传递的event怎么没有显示出来呢？
在Vue中，如果我们需要在传递实参的同时也保留事件对象，此时可以用$event占位符来解决：
我们尝试将methods配置项中的方法放到data中，看会出现什么结果：
<body>
<div id="demo1">
{{message}}
<button @click="show1($event,1024)">放进data中</button>
<button @click="show2($event,1010)">在data外</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#demo1",
data:{
message:"hello Vue",
show1(event,number){
console.log(event,number)
} //这里将show放到了data中，此时Vue会将show做一次数据代理，但是show本身是不需要进行数据代理的，这种做法会让Vue变得冗余
},
methods:{
show2(event,number){
console.log(event,number)
}
}
})
</script>
在最后控制台的最下面我们看到show1的确是进行了数据代理，但是这对于show1来说是毫无意义的。
在Vue中，data用于存储组件的数据状态，而methods用于存储组件的函数方法。
事件处理需要调用组件的函数方法来处理，而data只用于存储数据状态而不是函数方法。并且在Vue中有针对组件生命周期的函数调用，如果将函数写在methods中，可以很方便地调用这些函数来实现组件的生命周期。
1：Vue中的事件处理的语法：
v-on：事件名=“处理事件的函数名”
简写形式为 @事件名=“处理事件的函数名”。
2：处理事件的函数名一定要写在 methods配置项中，以便让当前的组件实例访问。
3：当我们在书写事件处理函数时，或者说methods配置项中的函数，要尽量写成普通函数。
4：将事件处理的函数写在methods中是Vue的推荐做法，这也符合Vue的设计原则和响应式数据的特性。
目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称
最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总
深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or
如何学习ruby的正则表达式？(对于假人) 最佳答案 http://www.rubular.com/在Ruby中使用正则表达式时是一个很棒的工具，因为它可以立即将结果可视化。 关于ruby-我如何学习ruby的正则表达式？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1881231/
深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG（VisualGeometryGroup）是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军，定位竞赛冠军；VGG网络采用连续的小卷积核（3x3）和池化层构建深度神经网络，网络深度可以达到16层或19层，其中VGG16和VGG
文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式：ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk=Var(yt)Cov(yt,yt−k)其中分子用于求协方差矩阵，分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型，求出其滞
写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍 介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。 内容有： ①：Hub模型的方法介绍 ②：服务器端代码介绍 ③：前端vue3安装并调用后端方法 ④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on