事件处理

<!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. 轻量级Java EE开发框架设计系统应用架构

    首先来说一下Java EE 概述 其中常说的三大框架即是:ssh Spring:功能强大的组件粘合济,能够将你的所有的java功能模块用配置文件的方式组合起来(还让你感觉不到spring的存在)成为一 ...

  2. Oracle中Cursor介绍和使用

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MyDreamNeverstop/article/details/78604033 一  概念  游标 ...

  3. Oracle 高水位(HWM: High Water Mark)

    http://blog.itpub.net/31397003/viewspace-2137246/ http://blog.itpub.net/12778571/viewspace-582695/ h ...

  4. （十进制高速幂+矩阵优化）BZOJ 3240 3240: [Noi2013]矩阵游戏

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=3240 3240: [Noi2013]矩阵游戏 Time Limit: 10 Sec  M ...

  5. openssl之BIO系列之24---SSL类型的BIO

    SSL类型的BIO ---依据openssl doc\crypto\bio_f_ssl.pod翻译和自己的理解写成 (作者:DragonKing, Mail: wzhah@263.net ,公布于:h ...

  6. php利用反射真正实现多继承（非接口模拟）

    昨天我在写PHP程序的时候,无意发现在PHP的::操作符非常强大,不仅仅是只用在访问parent,sel,静态成员属性.常量上面,其实他的功能强大了去了 . 这个符号在PHP中实际上叫做范围解析符,这 ...

  7. 4.QList

    #include "mainwindow.h" #include <QApplication> #include <QLabel> #include < ...

  8. 迭代Iterator的用法

    迭代→遍历: 一个标准化遍历各类容器里面的所有对象的方法类(典型的设计模式) 把访问逻辑从不同类型的集合类中抽象出来,从而避免向客户端暴露集合的内部结构 迭代(Iterator)与枚举(Enumera ...

  9. Makefile经典教程（转）

    转自:http://blog.csdn.net/ruglcc/article/details/7814546/ makefile很重要 什么是makefile?或许很多Winodws的程序员都不知道这 ...

  10. TimSort学习资料

    深入理解 timsort 算法(1):自适应归并排序 如何找出Timsort算法和玉兔月球车中的Bug? Java TimSort算法 源码 笔记 Timsort https://en.wikiped ...