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> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...
随机推荐
- 【Codeforces Round #493 (Div. 2) B】Cutting
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然只有在前i个位置奇数偶数出现次数都相同的地方才能切. (且不管前面怎么切,这里都能切的. 那么就相当于有n个物品,每个物品的代价 ...
- Java基础学习总结（35）——Java正则表达式详解
在Sun的Java JDK 1.40版本中,Java自带了支持正则表达式的包,本文就抛砖引玉地介绍了如何使用java.util.regex包. 可粗略估计一下,除了偶尔用Linux的外,其他Linu ...
- 利用LoadRunner来进行文件下载的测试
小强创立的“三级火箭”学习方式 1.参加培训班,即报名缴纳学费后,拉入专属QQ群,由老师亲自上课进行讲解,课后仍提供视频 性能测试培训班招生中,报名与咨询QQ:2083503238 python自动化 ...
- Android开发之使用BroadcastReceiver实现开机自己主动启动（源码分享）
上一节已经介绍过BroadcastReceiver实现实时监听电量的功能,这节就来介绍一下假设实现开机自己主动启动的功能.这个比监听电量还简单不少 (1)在清单文件注冊权限 <uses-perm ...
- Qunie——自我生成程序
Qunie是一段没有输入.但输出和它本身源代码同样的程序.本文无不论什么高深技术,纯属娱乐! 近期看到wikipedia的一个词条--Quine,简单介绍部分摘录于此,并简要翻译: A quine i ...
- UML中的序列图（时序图）
序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸. 横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线表示,当对象的过程处于激活状态时.生命 ...
- js+ canvas 实现人物走动
在网上看了一篇管道工玛利亚走动的图片,感觉人物走动的太生涩了,就写了一下代码改动一下: js 代码: //定义数组图片集合 var marios = new Array("image/QQ截 ...
- android 检測右滑的WebView
今天产品出新花样非得要右滑....检測到右滑手势后事件不做处理放在Activity中做对应的处理即可了. import android.app.Activity; import android.con ...
- ios Button
展现效果例如以下: 功能说明: 1加入来图片背景, 2动态展现百度网页, 3动态加入button. 4展现提示框.展现你点击提示框得index 我成功来你也快来试试. 1 详细得项目创建与拖动but ...
- USACO 2.1 Hamming Codes
Hamming CodesRob Kolstad Given N, B, and D: Find a set of N codewords (1 <= N <= 64), each of ...