目录
Vue中的事件修饰符：
1、prevent:阻止默认事件；
2、stop:阻止事件冒泡；
3、once：事件只触发一次；
4、capture：使用事件的捕获模式；
5、self：只有event.target是当前操作的元素时才触发事件；（只有和当前事件触发的标签一致时才会触发）
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
点完之后不会发生默认事件
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="root">
<!-- .prevent阻止默认行为-->
<a :href="url" @click.prevent="show">点击去百度</a>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
url:"http://baidu.com"
}
}
</script>点完超链接不会发生跳转，因为prevent阻止了a标签的默认事件（跳转）
div和button都有show事件，当点击按钮时，button会触发show，执行完成后，冒泡到外层，div的show也会触发
<!-- .stop阻止事件冒泡-->
<div @click="show">
<button @click.stop="show">小按钮</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
methods:{
show(e){
console.log(e.target)
alert("hello")
}
}
<script>加上了stop,阻止了button的冒泡，所以div不会触发show事件。
<div id="root">
<!-- .once只执行一次-->
<button @click.once="show">一次按钮</button>
<div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
url:"http://baidu.com"
},
methods:{
show(e){
console.log(e.target)
alert("hello")
}
}
</script>
默认是点一次触发一次事件，但是加上了once后只会触发一次，（页面加载完后点击n次只触发第一次）
<head>
<meta charset="UTF-8">
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<style>
*{
margin-top: 5px;
}
.div1{
padding: 5px;
background-color: deepskyblue;
}
.div2{
padding: 5px;
background-color: orange;
}
</style>
</head>
<div id="root">
<!-- .capture 使用捕获模式，捕获是从外向内，冒泡是从内向外-->
<div class="div1" @click.capture="div1">
div1
<div class="div2" @click="div2">
div2
</div >
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
methods:{
div1(){
console.log(1)
},
div2(){
console.log(2)
}
</script>
正常情况下是先进行事件的捕获，这个过程是有外到内的，捕获完成后，该事件触发，在冒泡到外层。
没加capture时，点击div2,会打印出2 1，这个是冒泡产生的结果
加上capture后
.self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发
冒泡冒上去的还是button对象，而不会变成div
<div id="root">
<!-- .self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发-->
<!-- 冒泡冒上去的还是button对象，而不会变成div-->
<div @click.self="show">
<button @click="show">self按钮</button>
</div>
</div>上面的加上.self，show事件只会触发一次，层的div不会被触发。
passive立即执行，不会等到回调函数执行完毕才执行，默认情况是回调函数执行完后才会执行事件的行为。
<style>
ul{
background-color: gold;
height: 200px;
width: 200px;
/*位置不够时，自动滚动*/
overflow: auto;
}
li{
height: 100px;
width:100px;
}
</style>
<div id="root">
<!--scroll只要发生了滑动就会执行，滚条鼠标和上下键 当到达底部继续滑动不会继续执行-->
<!-- wheel属性 只有当鼠标滑动才会执行 当到达底部继续滑动鼠标还会继续执行-->
<!-- .passive无须等待回调函数执行完毕，立即执行这个属性，这里为滑动，则立即滑动-->
<ul @wheel.passive="flow">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
url:"http://baidu.com"
},
methods:{
flow(){
for( i=0;i<10000;i++) {
console.log("滑动..")
}
}
}
});
scroll只要发生了滑动就会执行，滚条鼠标和上下键 当到达底部继续滑动不会继续执行
wheel属性 只有当鼠标滑动才会执行 当到达底部继续滑动鼠标还会继续执行
.passive无须等待回调函数执行完毕，立即执行这个属性，这里为滑动，则立即滑动单独的scroll也有passive效果
1、Vue中常见的按键别名：
2、Vue未提供的别名按键，可以使用按键原始的值去绑定，但注意要为kebab-case(短线命名，如大小写切换的按键CapsLock,要绑定就为caps-lock)
3、系统修饰键(用法特殊):ctrl、alt、shift、meta(win键)
4、也可以使用keyCode指定具体的按键(如:@keydown.13="xxx")，但是不推荐，因为有些键盘的keyCode值不一值
5、Vue.config.keyCodes.自定义键名=键码
<div id="root">
<input type="text" placeholder="输入并回车" @keydown.kc="kdown" >
</div>
<script type="text/javascript">
Vue.config.keyCodes.kc=13//给回车定义了一个别名kc<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<div id="root">
<input type="text" placeholder="输入并回车" @keydown.enter="kdown" @keydown="keydown">
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {},
methods:{
kdown(e){
console.log(e.target.value)
},
keydown(e){
//打印键的名和键的值
console.log(e.key,e.keyCode)
}
}
});
console.log(vm)
</script>
</html>
事件总结
可以在一个绑定事件中设置多个属性，如： <button @click.stop.prevent="show">小按钮</button>
我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).
这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什
例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果
我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几
我有一个帖子属于城市的关系，城市又属于一个州，例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子，但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型，我们在StackOverflow上找到一个类似的问
我觉得我错过了什么。我正在编写一个rubygem，它允许与事件记录进行交互，作为其主要功能的附加功能。在为其编写测试用例时，我需要能够指定虚拟事件记录模型来测试此功能。如果我可以获得一个事件记录模型的实例，它不需要与数据库的任何连接，可以有关系，所有这些东西，但不需要我在数据库中设置表，那就太棒了。我对测试还很陌生，在Rails测试之外我也很陌生，但似乎我应该能够相当轻松地完成类似的事情，但我什么也没找到。谁能告诉我我错过了什么？我看过工厂、制造商、固定装置，所有这些似乎都想达到目标。人们如何在您只需要AR对象进行测试的地方测试gem？ 最佳答案
我想创建一个模块，为从事件记录库继承的类提供一些通用方法。以下是我们可以实现的两种方式。1)moduleCommentabledefself.extended(base)base.class_evaldoincludeInstanceMethodsextendClassMethodsendendmoduleClassMethodsdeftest_commentable_classmethodputs'testclassmethod'endendmoduleInstanceMethodsdeftest_commentable_instance_methodputs'testinstanc