事件处理

<!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：事件处理和表单输入绑定的更多相关文章

  1. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  2. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  3. Vue表单输入绑定（文本框和复选框）

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

  4. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  5. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  6. Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  7. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  8. Vue（10）表单输入绑定v-model

    v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...

  9. 前端框架之Vue(8)-表单输入绑定

    基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...

随机推荐

  1. RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第一篇【安装】

    文章来源http://blog.csdn.net/deadgrape/article/details/50563119 前言:关于RobotFrameWork+APPIUM实现对安卓APK的自动化测试 ...

  2. HDU5130 Signal Interference

    /* HDU5130 Signal Interference http://acm.hdu.edu.cn/showproblem.php?pid=5130 计算几何 圆与多边形面积交 * */ #in ...

  3. Vijos——T 1016 北京2008的挂钟 || 洛谷—— P1213 时钟

    https://www.luogu.org/problem/show?pid=1213 题目描述 考虑将如此安排在一个 3 x 3 行列中的九个时钟: 目标要找一个最小的移动顺序将所有的指针指向12点 ...

  4. 60款开源云应用【Part 3】(60 Open Source Apps You Can Use in the Cloud)

    60款开源云应用[Part 3](60 Open Source Apps You Can Use in the Cloud) 本篇翻译自http://www.datamation.com/open-s ...

  5. Java进化? Kotlin初探与集成Android项目

    欢迎Follow我的GitHub, 关注我的CSDN. Kotlin是基于JVM的编程语言, 由JetBrains公司开发, 眼下已经开源. IntelliJ IDEA, PyCharm, Andro ...

  6. string转utf8后解决TTS识别中文的问题

    今天遇到string字符编码的问题,由于遇到了用TTS将文本转语音的一个API,里面的中文必须是utf8的,我传了一个uncode编码的中文进去,就一直不能正常读出来.后来才发现是编码的问题.这里在网 ...

  7. USACO 1.2 Transformations (模拟）

    模拟题目,依照题目给定的要求变换图形就可以,变换的优先级依次减小. 这个题目我写的非常乱.只是最还还是勉强能够执行 /* ID:twd30651 PROG:transform LANG:C++ */ ...

  8. 线程基础：JDK1.5+（8）——线程新特性（上）

    1.概要 假设您阅读JAVA的源码.出现最多的代码作者包含:Doug Lea.Mark Reinhold.Josh Bloch.Arthur van Hoff.Neal Gafter.Pavani D ...

  9. Python+Django+SAE系列教程16-----cookie&amp;session

    本章我们来解说cookie和session ,这两个东西相信大家一定不陌生,概念就不多讲了,我们直接来看其使用方法,首先是cookie,我们在view中加入三个视图,一个是显示cookie的,一个是设 ...

  10. Beginning Python From Novice to Professional (9) － Socket

    Socket 小型server: #!/usr/bin/env python import socket s = socket.socket() host = socket.gethostname() ...