可以用v-on指令监听DOM事件，并在触发时运行一些js代码。
举个简单的例子：实现每次点击按钮counter加1的效果
<div id="app"><p>{{counter}}</p><button v-on:click="counter++">点击+1</button></div><script>Vue.config.productionTip = false;new Vue({el: "#app",data: {counter: 1,},});</script></body>
许多事件处理逻辑会更复杂，所以直接把js代码写在v-on指令中是不可行的，因此v-on还可以接收一个需要调用的方法名称。
实现步骤：
在标签v-on指令后定义方法名
在methods对象中定义方法
示例：
<div id="app"><p>{{name}}</p><button v-on:click="showName">显示名称</button></div><script>Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。new Vue({el: "#app",data: {name: "zhangsan",},methods: {showName(event) {// this在方法里指向当前Vue实例console.log(this.name);// event是原生DOM事件if(event){console.log(event.target.tagName)}},},});</script>
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联js语句中调用方法
<div id="app"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button></div><script>new Vue({el: '#app',methods: {say: function (message) {alert(message)}}})</script>
有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量$event把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button><script>new Vue({el: '#app',methods: {warn: function (message, event) {// 现在我们可以访问原生事件对象if (event) {event.preventDefault()}alert(message)}}})</script>
使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数！否则this指向的是window对象，就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。在编写事件代理的时候，用e.currentTarget引用绑定事件代理的元素，e.target引用事件目标元素。
@click="demo"或@click="demo($event)"效果一致，但后者可以传参
【vue框架升级了写法：】
<body>
<div>
<p>第一种</p>
</div>
</body>
<div>
<p>第二种</p>
</div>
<view>
<p>第三种</p>
</view>
<body><div id="app"><button v-on:click="showInfo">点击显示详细信息(不传参)</button><button @click="showInfo1(1,$event)">点击可传入参数</button></div><script>Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。new Vue({el: "#app",data: {name: "zhangsan",},methods: {showInfo(e) {console.log(this.name, e.target.innerText);},showInfo1(number, e) {console.log(number, e.target.innerText);},},});</script></body>
二、事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop
阻止单击事件冒泡（常用）
<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a>
.prevent
阻止事件默认行为（常用）
<!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form>
.once
事件只触发一次（常用）
<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>
注：不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上
.capture
使用事件的捕获模式
<!-- 添加事件监听器时使用事件捕获模式 --><!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">1<p v-on:click="showInfo">2</p></div><!--当我们点击p标签时，会先执行doThis，再执行showInfo-->
.self
只有event.target是当前操作的元素时才能触发事件
<!-- 只有 event.target 是当前操作的元素时才会触发函数 --><!-- 当我们点击p标签的时候，不会触发div标签的执行，只有点击div才会触发div的执行 --><div v-on:click.self="doThis" id="app">1<p v-on:click="showInfo">2</p></div><script>const vm = new Vue({el: "#app",methods: {doThis() {console.log(1);},showInfo() {console.log(2);},},});</script>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
.passive
事件的默认行为立即执行，移动端项目常用
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成 --><div v-on:scroll.passive="onScroll">...</div>
三、按键修饰符
在监听键盘事件时，Vue允许为v-on添加按键修饰符
1、vue中常用的按键别名如下：
.enter
"回车"键
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.showInfo()` --><input v-on:keyup.enter="showInfo">
.delete
"删除"和"退格"键
<input v-on:keyup.delete="showInfo">.esc
"退出"键
<input v-on:keyup.esc="showInfo">.space
"空格"键
<input v-on:keyup.space="showInfo">.tab
（特殊）会把按键从当前位置切走，必须配合keydown去使用
<input v-on:keydown.tab="showInfo">.up
"上"键
<input v-on:keyup.up="showInfo">.down
"下"键
<input v-on:keyup.down="showInfo">.left
"左"键
<input v-on:keyup.left="showInfo">.right
"右"键
<input v-on:keyup.right="showInfo">2、Vue未提供别名的按键，可以使用按键原始的key值绑定，但注意要转为kebab-case（短横线命名）比如：大写锁定键（CapsLock）
<input v-on:keyup.caps-lock="showInfo">3、系统修饰符（用法特殊）：ctrl、alt、shift、meta
配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发（比如ctrl，按下ctrl再按y，释放y后才会触发事件）
<!-- 此方法按下ctrl再按(x,y,q等)其他键，释放其他键后才会触发事件 --><input v-on:keyup.ctrl="showInfo"><!-- 此方法按下ctrl再按y键，释放y键后才会触发事件 --><input v-on:keyup.ctrl.y="showInfo">
配合keydown使用：正常触发事件。
4、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不推荐）
Vue.config.keyCodes.huiche = 13;<input v-on:keyup.huiche="showInfo">
是否有简单的方法来更改默认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上找到一个类似的问
我想在每次访问url/code时运行一个脚本(code.rb)。如何运行脚本？require'sinatra'get'/'do#runthescriptend 最佳答案 要么fork另一个进程:system('rubycode.rb')...或者简单地将脚本加载到当前上下文中:load'code.rb'#*not*require 关于ruby-Sinatra:点击URL时运行ruby代码，我们在StackOverflow上找到一个类似的问题： https:
我觉得我错过了什么。我正在编写一个rubygem，它允许与事件记录进行交互，作为其主要功能的附加功能。在为其编写测试用例时，我需要能够指定虚拟事件记录模型来测试此功能。如果我可以获得一个事件记录模型的实例，它不需要与数据库的任何连接，可以有关系，所有这些东西，但不需要我在数据库中设置表，那就太棒了。我对测试还很陌生，在Rails测试之外我也很陌生，但似乎我应该能够相当轻松地完成类似的事情，但我什么也没找到。谁能告诉我我错过了什么？我看过工厂、制造商、固定装置，所有这些似乎都想达到目标。人们如何在您只需要AR对象进行测试的地方测试gem？ 最佳答案
我想创建一个模块，为从事件记录库继承的类提供一些通用方法。以下是我们可以实现的两种方式。1)moduleCommentabledefself.extended(base)base.class_evaldoincludeInstanceMethodsextendClassMethodsendendmoduleClassMethodsdeftest_commentable_classmethodputs'testclassmethod'endendmoduleInstanceMethodsdeftest_commentable_instance_methodputs'testinstanc