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> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...
随机推荐
- RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第三篇【实例】
http://blog.csdn.net/deadgrape/article/details/50579565 在这一篇里我先让大家看一下RF+APPIUM这个框架的实际运行时什么样子的,给大家一个直 ...
- 洛谷—— P3353 在你窗外闪耀的星星
https://www.luogu.org/problem/show?pid=3353 题目描述 飞逝的的时光不会模糊我对你的记忆.难以相信从我第一次见到你以来已经过去了3年.我仍然还生动地记得,3年 ...
- HDU TIANKENG’s rice shop(模拟)
HDU 4884 TIANKENG's rice shop 题目链接 题意:模拟题.转一篇题意 思路:就模拟就可以.注意每次炒完之后就能够接单 代码: #include <cstdio> ...
- 微软ASP.NET网站部署指南（3）：使用Web.Config文件的Transformations
1. 综述 大多数程序里都会在Web.config里设置參数,而且在部署的时候须要更改. 每次都手工更改这些配置非常乏味,也easy出错. 该章节将会告诉你假设通过自己主动化更新Web.config文 ...
- 《深入理解Android 卷III》第六章 深入理解控件（ViewRoot）系统
<深入理解Android 卷III>即将公布,作者是张大伟.此书填补了深入理解Android Framework卷中的一个主要空白,即Android Framework中和UI相关的部分. ...
- 2015.04.24,外语,读书笔记-《Word Power Made Easy》 12 “如何奉承朋友” SESSION 34
1.no fatigue indefatigable([indi'fætigәb(ә)l] adj. 不知疲倦的)来自faigue,in-是反义词缀:后缀-able表示able to be,因此ind ...
- idea使用技巧资料篇
基本使用:https://my.oschina.net/lujianing/blog/177042#OSC_h1_2 解决idea卡顿问题:http://www.cnblogs.com/ae6623/ ...
- USACO 2.1 Ordered Fractions
Ordered Fractions Consider the set of all reduced fractions between 0 and 1 inclusive with denominat ...
- 第七章 用户输入和while 循环
7.1 创建多行字符串的方式: 01 prompt="if you tell me who you are, we can personalize the message you see.& ...
- 在eclipse环境下使用maven install 命令碰到native2ascii-utf8问题解决方案
报错语句:Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin:1.0-beta-1:native2ascii (nat ...