Vue 事件与表单处理

Devil
832 阅读4分钟

事件处理 v-on指令

  • 用于进行元素的事件绑定

书写方式

  • Vue.js还为v-on指令提供了简写方式。
  • 事件程序代码较 多时，可以在methods中设置函数，并设置为事件处理程序。
  • 设置事件处理程序后，可以从参数中接收事件对象。
// vue.js会自动找到event传递
fn(event){
    console.log(event); // MouseEvent
    this.content = '这是按钮3设置的内容';
}
  • 在视图中可以通过$event访问事件对象
<button @click="fn2(200,$event)">按钮4</button>

v-on:click

  • 代码演示
<button v-on:click="content='新的内容'">按钮1</button>

@click=""(简写方式)

<button @click="content='这是另一个内容'">按钮2</button>
<!-- 将数据逻辑和视图层分离开 -->
<button @click="fn">按钮3</button>
<button @click="fn2(200,$event)">按钮4</button>

整体代码演示

<body>
    <div id="app">
        <p>{{content}}</p>
        <button v-on:click="content='新的内容'">按钮1</button>
        <button @click="content='这是另一个内容'">按钮2</button>
        <!-- 将数据逻辑和视图层分离开 -->
        <button @click="fn">按钮3</button>
        <button @click="fn2(200,$event)">按钮4</button>
    </div>
    <script src="lib/vue.js"></script>
    <!-- v-on:click事件 -->
    <script>
        new Vue({
            el:'#app',
            data: {
                content:'原本的内容'
            },methods: {
                // vue.js会自动找到event传递
                fn(event){
                    console.log(event); // MouseEvent
                    this.content = '这是按钮3设置的内容';
                },
                fn2(value,event){
                    console.log(value,event);
                    this.content = value;
                }
            }
        });
    </script>
</body>

表单输入绑定 v-model指令

通过v-model给不同的表单元素进行双向数据绑定

输入框绑定

  • 针对单行输入框(input) 和 多行输入框(textarea)的双向数据绑定
  • 代码演示
<body>
    <div id="app">
        <p>input 输入框的内容：{{value1}}</p>
        <input type="text" v-model="value1">

        <p>textarea 输入框的内容：{{value2}}</p>
        <textarea v-model="value2"></textarea>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
                value1:'',
                value2:''
            }
        });
    </script>
</body>

单选按钮绑定

  • 只能多个元素里面选一个
<body>
    <div id="app">
        <p>{{value3}}</p>
        <input type="radio" id="one" value="1" v-model="value3">
        <label for="one">选项1</label>
        <input type="radio" id="two" value="2" v-model="value3">
        <label for="two">选项2</label>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data: {
                value3: ''
            }
        });
    </script>
</body>

复选框绑定

  • 元素：可勾选，可取消
  • 单个复选框绑定时，是boolean值，不是value
  • 多个复选框绑定的数据，需要存储在数组中，值就是当前选项的value
<body>
    <div id="app">
        <p>{{value4}}</p>
        <!-- 复选框：单个选项情况 -->
        <input type="checkbox" id="item" value="选择内容" v-model="value4">
        <label for="item">已阅读</label>

        <!-- 复选框：多个选项情况 -->
        <p>{{value5}}</p>
        <input type="checkbox" id="one" value="选项一内容" v-model="value5">
        <label for="one">选项一</label>
        <input type="checkbox" id="two" value="选项二内容" v-model="value5">
        <label for="two">选项二</label>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                value4: '',
                value5:[]
            }
        });
    </script>
</body>

选择框绑定

  • 单选绑定
  • 多选绑定
<body>
    <div id="app">
        <!-- 单选 -->
        <p>{{value6}}</p>
        <select v-model="value6">
            <option value="">请选择</option>
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
        </select>
        <!-- 多选 -->
        <p>{{value7}}</p>
        <select v-model="value7" multiple>
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
        </select>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                value6: '',
                value7:[]
            }
        });
    </script>
</body>

v-model指令总结

  • input输入框：绑定字符值 value
  • textarea输入框：绑定字符值 value
  • radio: 绑定字符串值 value
  • checkbox: 单个绑定布尔值(checked)，多个绑定数组(value)
  • select: 单选绑定字符串，多选绑定数组(value\selected)
  • 题目：无论哪种表单元素，v-model绑定的都是value属性。（x）

修饰符

  • 修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作。

事件修饰符

.prevent修饰符

  • 用来阻止标签的默认行为，相当于event.preventDefault()
  • 代码演示
<body>
    <div id="app">
        <!-- 两种写法都可以 -->
        <a v-on:click.prevent href="https://www.ctrip.com/">链接</a>
        <a @click.prevent href="https://www.ctrip.com/">链接</a>
    </div>
    <script>
        // 一定要写vue实例绑定了app，不然v-on:click没有办法识别出来
        new Vue({
            el: "#app",
            data: {

            },methods:{

            }
        });
    </script>
</body>
  • 去掉默认行为，自定义执行事件
<body>
    <div id="app">
        <a v-on:click.prevent="fn" href="https://www.ctrip.com/">链接</a>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {

            },methods:{
                fn(){
                    alert('这是a的点击事件');
                }
            }
        });
    </script>
</body>

.stop修饰符

  • 实际案例：阻止默认行为后，在阻止事件传播
  • 多个修饰符连写，实现多个功能
<body>
    <div id="app">
        <!-- <a v-on:click.prevent href="https://www.ctrip.com/">链接</a>
        <a v-on:click.prevent="fn" href="https://www.ctrip.com/">链接</a> -->
        <div @click="fn1">
            <!-- 使用.stop，阻止事件传播 -->
            <!-- <button @click.stop="fn">按钮</button> -->
            <!-- 多个修饰符一起使用 -->
            <a @click.prevent.stop="fn" href="https://www.ctrip.com/">链接</a>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {

            },methods:{
                // fn(){
                //     alert('这是a的点击事件');
                // }
                fn(){
                    console.log("按钮 的点击事件");
                },
                fn1(){
                    console.log("div 的点击事件");
                }
            }
        });
    </script>
</body>

.once修饰符

  • 设置事件只会触发一次

总结

  • 可以去Vue官网去学习更多的修饰符

按键修饰符

  • 按键码指的是：将按键的按键码作为修饰符使用以标识按键的操作。
  • 无论使用的是数字按键还是字母按键，都可以通过keycode来操作
  • 回顾
    • 完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。
    • 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上
    • 当按钮被按下时，发生 keydown 事件。keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

数字按键（内容按键）

<!-- 数字1按键：追加keycode -->
<input type="text" @keyup.49="fn">

字母按键（内容按键）

  • keycode
<!-- 字母a按键：追加keycode -->
<input type="text" @keyup.65="fn">
  • 字母本身（更简洁、直观）
<!-- 字母a按键：追加keycode -->
<input type="text" @keyup.f="fn">
  • 连续打点调用
<!-- 打点使用，含义：点击 f 或 a 或 c 的时候，会触发事件 -->
<input type="text" @keyup.f.a.c="fn">

特殊按键（功能按键）

  • 特殊按键指的是：键盘中类似esc、enter、delete等功能按键
  • 为了更好的兼容性（有些浏览器中对应的keycode不同），应首选内置别名。
    • 有一些按键（.esc以及所有的方向键）在IE9中有不同的key值，如果想支持IE9，别名首选。
<!-- 其他按键：.enter .tab .delete .esc .space .up .down .left .right -->
<input type="text" @keyup.left="fn">

系统修饰符

  • 指的是：ctrl、alt、shift等按键。
  • 不像内容按键（数字按键、字母按键），直接按一次，就会生效。系统按键单独点击无效。
  • 系统按键通常与其他按键结合使用（同时按）。
  • 使用组合按键执行特定的事件
<body>
    <div id="app">
        <!-- 系统按键: 按特定的组合，执行特定的事件 -->
        <input type="text" @keyup.alt.c="fn" v-model="testValue">
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                testValue:''
            },methods: {
                fn(event){
                    // console.log(event);
                    this.testValue = '';
                }
            }
        });
    </script>
</body>

.ctrl修饰符

<!-- 系统按键: 单独点击无效，需要与其他按键结合使用 -->
<input type="text" @keyup.ctrl="fn">

.alt修饰符

<!-- 系统按键: 单独点击无效，需要与其他按键结合使用 -->
<input type="text" @keyup.alt="fn">

.shift修饰符

  • 同上

鼠标修饰符

  • 用于设置点击事件由鼠标哪个按键来完成

.left修饰符

<!-- 鼠标修饰符 -->
<button @click.left="fn">按钮</button>

.right修饰符

<!-- 鼠标修饰符 -->
<button @click.right="fn">按钮</button>

.middle修饰符

<!-- 鼠标修饰符 -->
<button @click.middle="fn">按钮</button>

v-model修饰符

.trim修饰符

<body>
    <div id="app">
        <!-- trim 查看elements 发现确实去掉了首尾空格 -->
        <input type="text" v-model.trim="value">
        <p>{{value}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                value: ''
            },
            methods: {

            }
        });
    </script>
</body>

.lazy修饰符

  • 可以改变v-model双向数据绑定的触发时机
    • 从input触发形式改成change触发形式
  • 失去焦点以后，新的内容和原有的内容不相同，则更新给数据
<body>
    <div id="app">
        <!-- 失去焦点之后，现有的内容和原有的内容不同，才进行更新 -->
        <input type="text" v-model.lazy="value">
        <p>{{value}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                value: ''
            },
            methods: {

            }
        });
    </script>
</body>

.number修饰符

  • 自动进行数据转换的数值修饰符
    • 可转换，将数据更新给数据
    • 不可转换NAN，将原始的数据给数据
  • 适用于：纯数值
  • 转换方式：parseFloat
  • 举例：
    • 文本框输入123,value="123",转换后：123
    • 文本框输入123abc,value="123",转换后：123
    • 文本框输入abc,value="abc",无法进行转换，保留原有值:abc
<body>
    <div id="app">
        <!-- 不添加.number时，value为字符串形式；添加后转换为数字形式 -->
        <input type="text" v-model.number="value">
        <p>{{value}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                value: ''
            },
            methods: {

            }
        });
    </script>
</body>

总结

  • trim修饰符
    • 用于自动过滤用户输入内容首尾两端的空格。
  • lazy修饰符
    • 用于将v-model的触发方式由input事件触发更改为change事件触发。
  • number修饰符
    • 用于自动将用户输入的值转换为数值类型，如无法被parseFloat()转换，则返回原始内容。
avatar
文章
阅读
粉丝