事件处理

<!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. POJ2389 Bull Math

    /* POJ2389 Bull Math http://poj.org/problem?id=2389 高精度乘法 * */ #include <cstring> #include < ...

  2. html5 过程解决问题收集

    1.使用画布时报错误: Uncaught TypeError: Object [object Object] has no method 'getContext' . 解决方法: $(function ...

  3. 绘图-CAD-改快捷键

    CAD的快捷键应该在左手边,左手不离开键盘,右手不离开鼠标,这样的操作才有效率. arc 圆弧命令原命令是ARC Q 圆(CIRCLE) C 原快捷键C被定义为COPY,Q的形状类似圆,只是多了一个尾 ...

  4. JavaWeb应用中的身份验证（声明式）——基于表单的身份认证

    容器管理安全最普遍的类型建立在基于表单的身份验证方式上. 通过这样的方式,server自己主动将尚未验证的用户重定向到一个HTML表单.检查他们的username和password,决定他们属于哪个角 ...

  5. 上机题目（中级）- 两个超级大的整数相加相减 （Java）

    代码例如以下: public class AddSub { public static void main(String[] args) { String a="46328648326846 ...

  6. xcodeproj cannot be opened because the project file cannot be parsed.

    解决方法:    1.对.xcodeproj文件右键,显示包内容 2.双击打开 project.pbxproj 文件 3.找到以上类似的冲突信息(能够用commad + f搜索) 4.删除<&l ...

  7. [Android 性能优化系列]内存之基础篇--Android怎样管理内存

    大家假设喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处(http://blog.csdn.net/kifile),再次感谢 原文地 ...

  8. kentico7中设置网站的主页

    打开SiteManager,选择Settings,然后左上角选择具体的网站,Content,Web Site Content,Default alias path

  9. Usaco 滑雪比赛 Bobsledding, 2009 Dec(dp）

    Description 滑雪比赛bobsled 贝西参加了一场高山急速滑雪比赛,滑道总长度为 L.出发时,她的初速度为 1,贝西可以加速 或减速,每过 1 米,她能将速度增加 1.减少 1 或保持不变 ...

  10. javascript中缓存

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...