03: vuejs 事件、模板、过滤器

目录：Vue其他篇

1.2 模板返回顶部

　　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.3 自定义过滤器返回顶部

　　1、说明

　　　　　　1. 在vue升级之后，vue不建议使用过滤器，而是用插值表达式，或者动态数据绑定替换

　　　　　　2. 使用过滤器的目的是为了在组件间复用处理数据的业务逻辑

　　　　　　3. Vue类中存在一个静态方法filter方法，用来定义过滤器

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

　　　　　　1. 语法 {{数据 | 过滤器名称参数1 参数2 参数3 | 过滤器2 参数2}}

　　　　　　2. 可以使用多个过滤器，前一个过滤器的输出将作为后一个过滤器的输入

　　　　　　3. 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. 在元素切换状态的时候（例如：元素的显隐），我们可以为元素添加动画
　　　　　　2. Transition属性：Vue会根据属性值自动创建三个css类，例如 transition=“demo”
　　　　　　　　　　demo-transition：定义过渡的
　　　　　　　　　　demo-enter 进入样式
　　　　　　　　　　demo-leave 移出样式
　　　　　　3. 注意：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>

过度

1.5 支付宝注册返回顶部

<!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>

支付宝注册