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> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...
随机推荐
- PHP学习总结（6）——PHP入门篇之PHP语句结束符
PHP语句结束符 有的小伙伴们是不是已经注意在每一条PHP代码行结尾处都会有一个分号:.对的,这点注意,在PHP编程中需要在每条语句的末尾加入分号:.但要注意,分号:一定在半角状态下输入噢.
- BA-siemens-insight时间表设置
时间表问题汇总: 如果遇到这种问题,显示"unable to locate databse object",就使用database transfer上传一边所有的模块信息,然后在操 ...
- JAVA程序设计(11)-----面对对象0基础设计 麻将 创建麻将牌 然后洗牌 发牌~ 恩 就这样
zzzzZZZZ 1.開始还想贴图的 实在太懒了-- 这是一张麻将 package com.lovo; import java.awt.Graphics; import java.awt.Image; ...
- Ural 1152 False Mirrors（状压DP）
题目地址:space=1&num=1152">Ural 1152 初学状压DP,原来状压仅仅是用到了个位运算.. 非常水的状压DP.注意四则运算的优先级是高于位运算的..也就是 ...
- ShareREC for iOS v1.0.4 已经公布
ShareREC for iOS v1.0.4 已经公布 版本号:v1.0.4 2015-3-13 1.新增视频列表的筛选排序功能 2.修复在開始录制后,没有调用结束录制直接进入社区崩溃问题 3.优化 ...
- [寒江孤叶丶的Cocos2d-x之旅_33]RichTextEx一款通过HTML标签控制文字样式的富文本控件
RichTextEx一款通过HTML标签控制文字样式的富文本控件 原创文章,欢迎转载.转载请注明:文章来自[寒江孤叶丶的Cocos2d-x之旅系列] 博客地址:http://blog.csdn.net ...
- cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第一步---開始界面&关卡选择
/* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏,这里用3.0重写并做下笔记 **2.我也问过木头本人啦.他说:随便写,第一别全然照搬代码:第二能够说 ...
- 【POJ 3273】 Monthly Expense (二分)
[POJ 3273] Monthly Expense (二分) 一个农民有块地 他列了个计划表 每天要花多少钱管理 但他想用m个月来管理 就想把这个计划表切割成m个月来完毕 想知道每一个月最少花费多少 ...
- 英语发音规则---S字母
英语发音规则---S字母 一.总结 一句话总结: 1.S 在音节开头或清辅音前 /s/? sit /sɪt/ vt.& vi.坐 seat /si:t/ n.席位 sell /sel/ vt. ...
- Java基础之关键字
一.Java关键字总览 基本数据类型(9):boolean.char.byte.short.int.long.float.double.null 变量引用(2):super.this 类.方法.变量修 ...