VUE(template标签 事件绑定与监听)
2019-03-17 23:09
2306 查看
一、template标签
Vue.js提供了template标签,可以将指令作用到这个标签上,对其子元素进行渲染,但最后渲染的结果里不会有它。
二、事件绑定与监听
1.方法与内联语句处理器
1)Vue.js中通过v-on可以绑定实例选项属性methods中的方法作为事件的处理器,v-on:后参数可以接受所有原生的事件名称。
2)v-on:的简写形式,用@代替;除了直接绑定methods函数外,v-on也支持内联的JavaScript语句,但仅限一个。
3)在直接绑定methods函数和内联JavaScript语句时,都有可能需要获取原生的DOM事件对象,Vue.js中提供了两种写法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src = "vue.js"></script> </head> <body> <div id="app"> <p>这是一段文字</p> <template v-for = "n in 3"> <p>template文本{{n}}</p> <span>这是span</span> <a href="#">这是一个链接</a> </template> </div> <script> var vm = new Vue({ el:"#app" }) </script> <div id="app1"> <input type="button" value = "按钮" v-on:click = "showInfo"> <input type="button" value = "又一个按钮" @click = "showAgain"> <input type="button" value = "第三个按钮" @click = "count++"> <p>{{count}}</p> <input type="button" value = "获取对象" @click = "event"> <input type="button" value = "再获取一次对象" @click = "event1($event)"> <input type="button" value = "对象" @click = "event2()"> <!-- 这里获取不到event对象 --> </div> <script> var vm1= new Vue({ el:"#app1", data:{ count : 1 }, methods:{ showInfo:function(){ console.log("我被点击了"); }, showAgain:function(){ console.log("我又被点击了"); }, event:function(event){ console.log(event); }, event1:function(event){ console.log(event); }, event2:function(event){ console.log(event); } } }) </script> </body> </html>
相关文章推荐
- vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件
- 使用jquery动态生成的标签,需要在代码当中绑定才可以实现事件的监听
- jquery同一标签绑定多个事件的几种方式 && js实时监听input中值变化
- 基于监听的事件处理——直接绑定到标签
- Vue------第四天(事件处理:事件监听、修饰符等;表单输入绑定:基础用法、值绑定)
- 在input元素上用非绑定的方式监听回车事件并传递参数
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
- vue动态生成dom并且自动绑定事件
- JS 事件绑定、事件监听、事件委托详细介绍
- button 需要加上type="button" 才能绑定ajax事件 只用<button>标签会出
- JavaScript:事件绑定与监听
- .vue文件中监听input输入事件-oninput
- Vue.js学习系列(三十五)-- Vue.js事件监听
- vue1.0和vue2.0的watch监听事件写法
- Vue组件绑定自定义事件(子向父传递事件)
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
- vue中的watch监听事件机制
- Android include标签的监听事件处理
- 详解.vue文件中监听input输入事件(oninput)
- 【DOM操作】实时监听input[type='text']和HTML标签中属性改变事件