vue基础part(7-8)
时间:2020-08-08
本文章向大家介绍vue基础part(7-8),主要包括vue基础part(7-8)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
事件处理
绑定监听
<h1>1.绑定监听</h1>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3">test3</button>
<!--等同于<button @click="test3($event)">test3</button>-->
<button @click="test4(123,$event)">test4</button>
<h2>2.事件修饰符</h2>
button 绑定click事件 传入参数 传入$event参数 传入数字参数和$event参数
//以下函数均写在data中
test1(){
alert('test1')
},
test2(msg){
alert(msg)
},
test3(event){
alert(event.target.innerHTML)
},
test4(number,event){
alert(number+ '----'+event.target.innerHTML)
},
事件修饰符
<h2>2.事件修饰符</h2>
<div style="width: 200px;height: 200px;background:red" @click='test5'>
<div style="width: 100px;height: 100px;background:blue" @click.stop='test6'></div>
</div>
<a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
test5(){
alert('outer')
},
test6(){
alert('inner')
},
test7(){
alert('点击超链接')
},
stop阻止事件冒泡
蓝色div在红色div内,当点击蓝色div时,页面弹出 inner,然后弹出outer,这就是事件冒泡,子元素找到父元素的事件。蓝色div @click.stop可以阻止事件冒泡
prevent 阻止事件默认行为 超链接点击后会默认跳转到目的路径,加上prevent后,只执行test7内容,不会实现页面跳转
按键修饰符
<h2>3.按键修饰符</h2>
<input type="text" @keyup.13="test8">
<input type="text" @keyup.enter="test8">
test8(event){
alert('event.target.value' + ' ' + event.keyCode )
}
页面效果 输入内容后按下enter键,会出现
enter对应keycode 是13 可以通过@keyup后跟数字或者enter两种方式来实现
表单数据自动收集
输入框,单选框,下拉框,多选框,多行文本框
特殊 下拉框是从data中遍历address数组,v-model绑定cityid,将所选中address中的id赋值给cityId
如图是vue调试工具的插件
<div id="model">
<form action="###" @submit.prevent="handleSubmit" >
用户名:<input type="text" v-model="username"><br>
密码:<input type="password" v-model="password"><br>
<span>性别</span>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio" value="男" v-model="sex" v-model="sex">
<label for="male">男</label><br>
<span>爱好</span>
<input type="checkbox" id="basket" name="basket" value="basket" v-model="hobby">
<label for="basket">篮球</label>
<input type="checkbox" id="foot" name="foot" value="foot" v-model="hobby">
<label for="foot">足球</label>
<input type="checkbox" id="tabletennies" name="tabletennies" value="tabletennies" v-model="hobby">
<label for="tabletennies">乒乓球</label><br>
<span>城市</span>
<select v-model="cityId">
<option value="">未选择</option>
<option :value="add.id" v-for="(add,index) in address" :key="index">{{add.name}}</option>
</select>
<br>
<span>介绍:</span><br>
<textarea rows="10" v-model="description"></textarea><br><br>
<input type="submit">
</form>
</div>
new Vue({
el:'#model',
data:{
username:'',
password:'',
sex:'女',
hobby:[],
address:[{id:1,name:'BJ'},{id:2,name:'SH'},{id:3,name:'GD'}],
description:'',
cityId:''
},
methods:{
handleSubmit(){
alert('form提交')
}
}
})
原文地址:https://www.cnblogs.com/wuloucha/p/13449708.html
- 温故而知新:查看端口占用情况以及DOS中的管道操作/重定向操作
- Android新手之旅(7) RadioButton的自定义
- Flash/Flex学习笔记(4):如何打开网页及Get/Post数据
- Flash/Flex学习笔记(5):捕获摄像头(续)--在线抓屏并保存到客户端本地
- 分布式监控系统Zabbix--使用Grafana进行图形展示
- Silverlight在线创建PDF(支持中文)
- Flash/Flex学习笔记(3):动态添加组件
- Flash/Flex学习笔记(1):Hello World!
- 数据库常规操作
- 不伦不类的Action Script 3.0
- Asp.Net Mvc中的一些初级问题整理
- Pandas Series笔记
- Asp.Net4.0/VS2010新变化(6):内置的图表控件
- Asp.Net4.0/VS2010新变化(5):可扩展的(分布式)缓存
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现通过二维数组键值获取一维键名操作示例
- laravel 判断查询数据库返回值的例子
- laravel框架数据库配置及操作数据库示例
- laravel 输出最后执行sql 附:whereIn的使用方法
- laravel框架模型、视图与控制器简单操作示例
- Laravel关系模型指定条件查询方法
- 在laravel中使用with实现动态添加where条件
- laravel Model 执行事务的实现
- 在laravel中实现事务回滚的方法
- thinkphp5框架实现数据库读取的数据转换成json格式示例
- phpfpm的作用和用法
- 浅谈PHP5.6 与 PHP7.0 区别
- laravel执行php artisan migrate报错的解决方法
- Laravel统计一段时间间隔的数据方法
- laravel withCount 统计关联数量的方法