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> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...
随机推荐
- Python学习笔记（3）for循环和while循环
2019-02-25 (1)break语句:终止当前循环,跳出循环体. (2)continue语句:终止本轮循环并开始下一轮循环(在下一轮循环开始前,会先测试循环条件). (3)for循环 ① ran ...
- nmon分析文件各sheet含义
sheet名称sheet含义 SYS_SUMM系统汇总,蓝线为cpu占有率变化情况,粉线为磁盘IO的变化情况: AAA关于操作系统以及nmon本身的一些信息: BBBB系统外挂存储容量以及存储类型: ...
- [Beginning SharePoint Designer 2010]探索SharePoint Designer
本章概要: 1.SharePoint Designer是如何进入到微软的工具集中去的 2.SharePoint Designer的基本特性 3.如何创建SharePoint站点 4.如何打开一个已经存 ...
- Routh-Hurwitz Criterion 劳斯稳定判据
Routh-Hurwitz Criterion 为什么仅仅要有一个极点在右半平面,那么系统就不会稳定? 比如H(s) =( 1/(s+1) ) * ( 1/(s+3) ) * ( 1/(s-2) ) ...
- 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
- validate命令---rman进行备份和回复的验证
rman作为oracle备份与恢复工具,为我们提供了强大的功能.当中包含对数据文件的物理和逻辑检測以及备份文件的有效性检測. 首先.来看一下rman对数据文件的检測. 我们知道,rman在备份数据时, ...
- 【零基础入门学习Python笔记013】元祖：戴上了枷锁的列表
元组:戴上了枷锁的列表 因为和列表是近亲关系.所以元祖和列表在实际使用上是很相似的. 本节主要通过讨论元素和列表究竟有什么不同学习元祖. 元组是不可改变元素的.插入.删除或者排序都不能够.列表能够随意 ...
- 【ASP】在特定的范围内产生N个不同的随机数
ASP产生一个随机数不难.就两条特定语句: <% Randomize x=int(20*rnd+1) %> 以上的两条语句.表示从1~20这个范围内产生随机数,而且这些随机数都是整数. 那 ...
- Struts2概述及与Struts1的对照
Struts2 概述 1,仍然是一个基于请求响应的MVC框架 2,Struts2不是Struts1的升级 3,Struts2与Struts1的体系结构差距非常大 4,Struts2採用了还有一个MVC ...
- 洛谷p3803 FFT入门
洛谷p3803 FFT入门 ps:花了我一天的时间弄懂fft的原理,感觉fft的折半很神奇! 大致谈一谈FFT的基本原理: 对于两个多项式的卷积,可以O(n^2)求出来(妥妥的暴力) 显然一个多项式可 ...