VUE：事件处理和表单输入绑定
事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07_事件处理</title>
</head>
<body>
<!--
1.绑定监听：
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参：event
隐含属性对象：$event
2.事件修饰符
.prevent：阻止事件的默认行为 event.preventDefault()
.stop：停止事件冒泡 event.stopPropagation()
3.按键修饰符
.keycode：操作的是某个keycode值的键
.enter：操作的是enter键
-->
<div id="example">
<h2>1.绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('taosir')">test2</button>
<!-- 没有其他参数，$event不写也可以-->
<button @click="test3($event)">test3</button>
<button @click="test4(123,$event)">test4</button> <h2>2.事件修饰符</h2>
<div style="width: 200px;height: 200px;background: red" @click="test5">
<!-- @click.stop停止事件冒泡 -->
<div style="width: 100px;height: 100px;background: blue;" @click.stop="test6"></div>
</div>
<a href="http://www.baidu.com" @click.prevent="test7">去百度</a> <h3>3.按键修饰符</h3>
<input type="text" @keyup.13="test8" />
<input type="text" @keyup.enter="test8" />
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el:'#example',
data:{
test1(){
alert('test1')
},
test2(msg){
alert('test2：'+msg)
},
test3(evnet){
alert(event.target.innerHTML)
},
test4(number,event){
alert(number+'：'+event.target.innerHTML)
},
test5(){
alert('out')
},
test6(){
//event.stopPropagation()
alert('inner')
},
test7(){
//event.preventDefault()
alert('test点击了')
},
test8(){
// if(event.keyCode===13){
// //通过event.keyCode查询keyCode
// alert(event.target.value+' '+event.keyCode)
// }
alert(event.target.value+' '+event.keyCode)
}
}
})
</script>
</body>
</html>
表单输入绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08_表单输入绑定</title>
</head>
<body>
<!--
1.使用v-model（双向数据绑定）自动手机数据
text/textarea
checkbox
radio
select
-->
<div id="demo">
<form action="/xxx" @submit.prevent="handleSubmit">
<span>用户名：</span>
<input v-model="username"/><br /> <span>密码：</span>
<input type="password" v-model="pwd"/><br /> <span>性别：</span>
<input type="radio" id="female" value="女" v-model="sex"/>
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex"/>
<label for="male">男</label><br /> <span>爱好：</span>
<input type="checkbox" id="basket" value="篮球" v-model="likes"/>
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="足球" v-model="likes" />
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="乒乓" v-model="likes" />
<label for="pingpang">乒乓</label><br /> <span>城市：</span>
<select v-model="cityId">
<option value="">未选择</option>
<option :value="city.id" v-for="(city,index) in allCitys">{{city.name}}</option>
</select><br /> <span>介绍</span>
<textarea rows="10" v-model="desc"></textarea><br /> <input type="submit" value="注册" />
</form>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el:"#demo",
data:{
username:'',
pwd:'',
sex:'女',
likes:['足球'],
allCitys:[{id:1,name:'taosir'},{id:2,name:'moer'},{id:3,name:'vue'}],
cityId:'3',
desc:'请输入描述'
},
methods:{
handleSubmit(){
console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.desc)
}
}
})
</script>
</body>
</html>
VUE：事件处理和表单输入绑定的更多相关文章
- Vue.js教程--基础2(事件处理 表单输入绑定
事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- Vue表单输入绑定（文本框和复选框）
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- 前端MVC Vue2学习总结（五）——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Vue（10）表单输入绑定v-model
v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...
- 前端框架之Vue(8)-表单输入绑定
基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...
随机推荐
- node+express框架中连接使用mysql经验总结
最近在学习node.js,做了一个练手项目,使用node.js+express框架,配合mysql数据库和前端vue框架开发一个多人文档编辑系统. koa,express,node 通用方法连接MyS ...
- 把Dev的excel表格用clientdataset保存到数据库中。
网上很多,如何把图片.word.excel等保存到数据库中.可是自己就是死活出现异常,百思不得其解.原因找到了,为什么没有去弄明白: 在sql server字段类型中,我把存储字段设成binary,结 ...
- （7）JPA - Hibernate【从零开始学Spring Boot】
在说具体如何在spring boot 使用Hibernate前,先抛装引玉些知识点?什么是JPA呢? JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象- ...
- pandas深入理解
Pandas是一个Python库,旨在通过“标记”和“关系”数据以完成数据整理工作,库中有两个主要的数据结构Series和DataFrame In [1]: import numpy as np In ...
- Unity特殊目录和脚本编译顺序
特殊目录和脚本编译顺序 大多数情况下,您能够选择不论什么你喜欢的目录在您的项目的名称.但unity储备一些名称以指示内容有一个特殊的用途.这些目录中有些会影响脚本编译的顺序.从根本上说,有四个单 ...
- VS2015--win32project配置的一些想法之在 Visual Studio 2015 中进行调试的同一时候分析性能
出处: https://msdn.microsoft.com/zh-cn/magazine/dn973013(en-us).aspx 很多开发商花了绝大多数时间获取应用程序才干正常发挥作用.更少的时间 ...
- gridview in webform
How to: Enable Default Paging in the GridView Web Server Control https://msdn.microsoft.com/en-us/li ...
- 机器学习 数据量不足问题----1 做好特征工程 2 不要用太多的特征 3 做好交叉验证 使用线性svm
来自:https://www.zhihu.com/question/35649122 其实这里所说的数据量不足,可以换一种方式去理解:在维度高的情况下,数据相对少.举一个特例,比如只有一维,和1万个数 ...
- lightoj--1410--Consistent Verdicts(技巧)
Consistent Verdicts Time Limit: 5000MS Memory Limit: 32768KB 64bit IO Format: %lld & %llu Su ...
- word2010无法显示endnote x7插件及破解endnote x7
最近本人由于要写文章需要使用endnotex7,相比于mendeley和noteexpress,文献管理和引用我喜欢endnote x7,阅读喜欢mendeley.可是由于之前用的正版30天到期了,破 ...