vue.js 之事件、模板、过滤器

最新推荐文章于 2022-08-04 15:04:48 发布

longlong6682

最新推荐文章于 2022-08-04 15:04:48 发布

阅读量257

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/longlong6682/article/details/105595582

版权

Vue.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一. 事件

1、说明

1. 绑定事件的两种方法：

<button @click=“showMsg”>按钮
< bu tton v-on:click=“test(‘123’, true, color, $event)”>新的按钮</b utton>

2. 回调函数在vue的methods属性中定义，如果参数集合()没有定义，回调函数有一个默认参数 this

3. 作用域是vue实例化对象，所以在回调函数中，可以通过this访问vue上的数据

4. 所以methods中定义的方法，可以在methods，以及computed等方法中使用

vue绑定事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <button @click="showMsg">按钮</button>
        <button v-on:click="test('123', true, color, $event)">新的按钮</button>   <!-- $event 传递事件对象 -->
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 定义vue实例化对象
        var app = new Vue({
            el: '#app',
            data: {
                color: 'red'
            },
            // 回调函数定义在methods属性中
            methods: {
                // 每一个属性代表一个方法
                showMsg: function() {
                    console.log(this ,arguments)
                },
                // 定义回调函数
                test: function() {
                    console.log(this, arguments)  // arguments = ["123", true, "red", MouseEvent]
                }
            }
        })
    </script>
</body>
</html>

2、事件冒泡和默认行为

事件冒泡：当内存外层都绑定如点击事件时，只让最内层事件执行
默认行为：如 a 标签点击默认会跳转到 href 地址中，然其点击后不跳转
一次触发：<button @click.once=“print”> 只触发一次 </ button>

事件冒泡和默认行为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和默认行为</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                methods:{ 
                    show(){
                        console.log(111);
                        // e.stopPropagation();
                    },
                    print(){
                        console.log(222);
                    },
                    write(){
                        console.log(333);
                    },
                    study(){
                        console.log(444);
                        // e.preventDefault();
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <div @click="write">
            <p @click="print">
                <!-- <button @click="show($event)">点我</button> -->
                <button @click.stop="show">点我</button>
            </p>
        </div>
        <hr>

        <!-- <a href="#" @click="study($event)">俺是链接</a> -->
        <a href="#" @click.prevent="study">俺是链接</a>
    </div>
</body>
</html>

3、事件修饰符(监控enter、up、down等键盘)

绑定键盘事件的时候，经常会判断按键，通过 e.keyCode
事件修饰符语法 v-on:keyup.修饰符=”回调函数()”，表示，当按下的键是修饰符的时候才会触发
在vue中常见的有9个 esc， tab， space， enter， delete， up，down，left，right

监控enter键事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="showValue">
        <h1>{{msg}}</h1>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 定义vue实例化对象
        var app = new Vue({
            el: "#app",
            data: {
                msg: ''
            },
            methods: {
                showValue: function(e) {
                    // console.log(e.target.value)
                    // 判断点击回车键
                    // if (e.keyCode === 13) {
                    //     // 作用域是vue实例化对象
                    //     this.msg = e.target.value
                    // }
                    console.log(1111);
                    this.msg = e.target.value;    // e.target.value 获取的是输入框的值

                }
            }
        })
    </script>
</body>
</html>

自定义键位别名:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="js/vue.js"></script>
    <script>
        /**
         * 自定义键位别名
         */
        Vue.config.keyCodes={
            a:65,
            f1:112
        }

        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                methods:{ 
                    show(e){
                        console.log(e.keyCode);
                        if(e.keyCode==13){
                            console.log('您按了回车');
                        }
                    },
                    print(){
                        // console.log('您按了回车');
                        // console.log('您按了方向键上');
                        console.log('11111');
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- 键盘事件：@keydown、@keypress、@keyup -->
        <!-- 用户名：<input type="text" @keydown="show($event)"> -->
        
        <!-- 简化按键的判断 -->
        <!-- 用户名：<input type="text" @keydown="show($event)"> -->
        <!-- 用户名：<input type="text" @keydown.13="print"> -->
        <!-- 用户名：<input type="text" @keydown.enter="print"> -->
        <!-- 用户名：<input type="text" @keydown.up="print"> -->
        用户名：<input type="text" @keydown.f1="print">
        
        <!-- 事件修饰符 -->
        <button @click.once="print">只触发一次</button>
    </div>
</body>
</html>

4、事件修饰符

　　　　　　.stop - 调用 event.stopPropagation()。

　　　　　　.prevent - 调用 event.preventDefault()。

　　　　　　.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

　　　　　　.native - 监听组件根元素的原生事件。

　　　　　　.once - 只触发一次回调。

防止多次提交:

<template>
  <button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
  export default {
    name: 'TestButton',
    data: function () {
      return {
        isDisable: false
      }
    },
    methods: {
      submit() {
        this.isDisable = true
        setTimeout(() => {
          this.isDisable = false
        }, 1000)
      }
    },
  }
</script>

5、事件绑定常用方法

事件绑定常用方法:

'''一：鼠标事件'''
# click 当用户点击某个对象时调用的事件句柄。
# contextmenu 在用户点击鼠标右键打开上下文菜单时触发
# dblclick 当用户双击某个对象时调用的事件句柄。
# mousedown 鼠标按钮被按下。
# mouseenter 当鼠标指针移动到元素上时触发。
# mouseleave 当鼠标指针移出元素时触发
# mousemove 鼠标被移动。
# mouseover 鼠标移到某元素之上。
# mouseout 鼠标从某元素移开。
# mouseup 鼠标按键被松开。

'''二：键盘事件'''
# keydown 某个键盘按键被按下。
# keypress 某个键盘按键被按下并松开。
# keyup 某个键盘按键被松开。

二. 模板

1、简介

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中，也称为Mustache语法

2、数据绑定的方式

a.双向绑定
- v-model
b.单向绑定
- 方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
- 方式2：使用v-text、v-html

3、其他指令

v-once 数据只绑定一次
v-pre 不编译，直接原样显示
官网指令： https://cn.vuejs.org/v2/api/#v-once

三. 自定义过滤器

1、说明

在vue升级之后，vue不建议使用过滤器，而是用插值表达式，或者动态数据绑定替换
使用过滤器的目的是为了在组件间复用处理数据的业务逻辑
Vue类中存在一个静态方法filter方法，用来定义过滤器

2、使用过滤器(过滤器定义必须在实例化vue对象前)

语法 {{数据 | 过滤器名称参数1 参数2 参数3 | 过滤器2 参数2}}
可以使用多个过滤器，前一个过滤器的输出将作为后一个过滤器的输入
2.0版本的改动 {{数据 | 过滤器(参数1, 参数2)}} （2.0版本对过滤器的传参做了改动）

自定义过滤器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p> price: 数据   currency: 过滤器名称    ￥和3：表示传递的参数 </p>
        <h1>{{price | currency('￥', 3)}}</h1>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        /**
         * 自定义过滤器
         * currency  过滤器名称
         * @price     价格
         * @sign     价格标志
         * @len     小数位保留的长度
         **/
        Vue.filter('currency', function(price, sign, len) {    // 从第二个开始才是传递的参数
            price =  Math.abs(price);            // 保证是正数
            sign = sign || '￥';                 // 默认为人命币标志
            len = len || 2;                      // 默认保留两位小数
            var arr = String(parseInt(price)).split('');            // arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
            for (var i = arr.length - 3; i > 0; i -= 3) {          // 添加了成员后面的位置变了，所以从后向前遍历，首位不能添加
                arr.splice(i, 0, ',')                               // i(插入的索引位置)；0（删除0个字符串）； ','(添加的符合)
            }                                                       // for循环后 arr =  [1, 2, ',', 3, 4, 5, ',', 6, 7, 8]
            return sign + arr.join('') + (price - parseInt(price)).toFixed(len).slice(1)

            // 转化成小数 原数字减去整数 保留len位小数，去掉整数部分
            // toFixed(len) 保留len位小数（得到结果是字符串）
            // 0.23456.toFixed(3) = "0.235"       "'0.235'.slice(1) = ".235"
        });
        new Vue({
            el: '#app',
            data: {
                price: 1234567891.1234567,
                msg: 'a hot day'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

四. 过度

1、说明

在元素切换状态的时候（例如：元素的显隐），我们可以为元素添加动画
Transition属性：Vue会根据属性值自动创建三个css类，例如 transition=“demo”
- demo-transition：定义过渡的
- demo-enter 进入样式
- demo-leave 移出样式
注意：2.0类的名称变了
- .demo-transition => .demo-enter-active, .demo-leave-active
- .demo-enter => .demo-enter
- .demo-leave => .demo-leave-to
- Transition属性变成了 transition组件了，通过name定义过渡名称

过度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .demo {
            width: 100px;
            height: 100px;
            margin-top: 20px;
            background: green;
        }
        /*定义过渡*/
        .demo-enter-active,
        .demo-leave-active {
            transition: all 1s;
        }
        /*定义进场动画和出场动画*/
        .demo-enter,
        .demo-leave-to {
            width: 0;
            height: 0;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-on:click="toggle">切换显隐</button>
        <transition name="demo">
            <div class="demo" transition="demo" v-if="isShow">这是内容</div>
        </transition>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 定义vue实例化对象
        var app = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                toggle: function() {
                    // 切换isShow
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

五. 支付宝注册

支付宝注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background: #ccc;
        }
        #app {
            width: 800px;
            margin: 50px auto;
            border: 1px solid #ccc;
            background: #fff;
            height: 600px;
            padding-top: 80px;
        }
        label {
            margin-left: 100px;
            margin-right: 20px;
        }
        input {
            padding: 8px 15px;
            width: 300px;
        }
        ul {
            width: 330px;
            margin-left: 176px;
            border: 2px solid #ccc;
            margin-top: -1px;
        }
        ul li {
            padding: 0 15px;
            height: 26px;
            line-height: 26px;
        }
        ul li:hover,
        ul li.hover {
            background: #efefef;
        }
    </style>
</head>
<body>
    <div id="app">
        <label>账户名</label>
        <input 
            type="text" 
            v-model="msg"
            @keydown.up="showPrevLi"
            @keyup.down="showNextLi"
            @keyup.enter="chooseLi"
        >
        <!-- ul的显示与msg有关 -->
        <ul v-show="msg">
            <li v-for="item in dealMail" v-on:click="chooseCurrentLi">{{dealMsg}}@{{item}}.<template v-if="item == 189">cn</template><template v-else>com</template></li>
        </ul>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 创建vue实例化对象
        var app = new Vue({
            el: '#app',
            data: {                // 定义绑定的数据
                msg: '',
                num: -1,
                isFirst: true,     // 是否是第一次
                email: ['qq', 163, 126, 189, 'sina', 'hotmail', 'gmail', 'sohu', '21cn']
            },

            // 动态数据绑定
            computed: {
                dealMsg: function(vue) {                            // 处理msg, 截取@符号之前的
                    if (this.msg.indexOf('@') >= 0){                // 是否存在@
                        // 截取@符号之前的，不包括@, slice, substring, substr, 哪个参数表示长度，出现负数，第一个参数大于第二个参数怎么办，李鹏涛
                        return this.msg.slice(0, this.msg.indexOf('@'))
                    }
                    return this.msg                         // 否则返回msg
                },

                // 过滤mail集合
                dealMail: function() {
                    if (this.msg.indexOf('@') > 0) {         // 判断是否包含@, 包含@，根据@符号后面的内容过滤
                        var str = this.msg.slice(this.msg.indexOf('@') + 1);       // 截取@后面的内容
                        var result = [];                                            // 过滤email集合
                        for (var i = 0; i < this.email.length; i++) {              // 遍历email找到符号条件的
                            var mail = this.email[i] + (this.email[i] == 189 ? '.c' : '.co');  // 每一个成员要带上后缀，例如sina => sina.co
                            if (mail.indexOf(str) === 0) {                            // 什么成员符合条件：以str开头,
                                result.push(this.email[i])                            // 存储这个成员
                            }
                        }
                        return result;            // 返回过滤的结果
                    }else {
                        return this.email         // 不包含，直接返回email
                    }
                }
            },

            // 定义事件回调函数
            methods: {
                chooseCurrentLi: function(e) {           // 点击li，然后选中li
                    var val = e.target.innerHTML;       // 获取li的内容
                    this.msg = val;                      // 更新msg
                },

                // 点击向上键，显示前一个li
                showPrevLi: function(e) {
                    e.preventDefault(e);                  // 阻止默认行为
                    if (this.isFirst) {                   // 如果是第一次，不用减了
                        this.isFirst = false;            // 这次过去了，就不是第一次了
                    } else {
                        this.num--;
                    }
                    this.changeCurrentLiStyle();          // 更新li的样式
                },

                // 点击向下键，显示后一个li
                showNextLi: function() {
                    this.num++;                           // 更改num
                    this.changeCurrentLiStyle();          // 更新li的样式
                    this.isFirst = false;                // 第一次已经过去了
                },

                getNum: function(len) {                  // 获取num对应的li的索引值
                    // 对于任意一个数（正数和负数）
                    // 对len取余之后，保证在-len到len之间
                    // var num = this.num % len;
                    // // 此时加上len，保证是0到2*len之间，一定是正数了
                    // num += len;
                    // // 此时再取余，就保证是0到len之间了
                    // num %= len
                    return (this.num % len + len) % len;
                },

                // 改变当前li的样式
                changeCurrentLiStyle: function() {
                    var lis = this.$el.getElementsByTagName('li');       // 获取所有的li
                    if (lis.length === 0) {                                 // 判断li是否存在
                        return;
                    }
                    var num = this.getNum(lis.length);                     // 获取索引值
                    for (var i = 0; i < lis.length; i++) {                 // 排他法设置类
                        lis[i].className = '';
                    }
                    lis[num].className = 'hover';                          // 当前li选中
                },

                // 点击enter键，显示当前li
                chooseLi: function() {
                    var lis = this.$el.getElementsByTagName('li');       // 获取对应的li
                    if (lis.length === 0) {                                // 判断li是否存在
                        return;
                    }
                    var num = this.getNum(lis.length);                    // 获取索引值
                    var value = lis[num].innerHTML;                       // 获取li的值
                    this.msg = value;
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

longlong6682

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 之事件、模板、过滤器

目录：1. 事件2. 模板3. 自定义过滤器4. 过度5. 支付宝注册一. 事件1、说明1. 绑定事件的两种方法：<button @click=“showMsg”>按钮< bu tton v-on:click=“test(‘123’, true, color, $event)”>新的按钮</b utton>2. 回调函数在vu...
复制链接

扫一扫