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

时间 2020-05-22

标签 vuejs 事件模板过滤器繁體版

原文原文链接

目录：Vue其余篇

01: vue.js安装javascript

02: vue.js经常使用指令css

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

1.2 模板返回顶部

　　一、简介

　　　　　　Vue.js使用基于HTML的模板语法，能够将DOM绑定到Vue实例中的数据

　　　　　　模板就是{{}}，用来进行数据绑定，显示在页面中，也称为Mustache语法

　　二、数据绑定的方式

　　　　　　a.双向绑定

　　　　　　　　v-model

　　　　　　b.单向绑定

　　　　　　　　方式1：使用两对大括号{{}}，可能会出现闪烁的问题，能够使用v-cloak解决

　　　　　　　　方式2：使用v-text、v-html

　　三、其余指令

　　　　　　v-once 数据只绑定一次

　　　　　　v-pre 不编译，直接原样显示

　　　　　　官网指令： https://cn.vuejs.org/v2/api/#v-once

1.3 自定义过滤器返回顶部

　　一、说明

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

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

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

　　二、使用过滤器(过滤器定义必须在实例化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>

支付宝注册

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

目录：Vue其余篇

目录：

1.1 事件返回顶部

1.2 模板返回顶部

1.3 自定义过滤器返回顶部

1.4 过分返回顶部

1.5 支付宝注册返回顶部

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

目录：Vue其余篇

目录：

1.1 事件 返回顶部

1.2 模板 返回顶部

1.3 自定义过滤器 返回顶部

1.4 过分 返回顶部

1.5 支付宝注册 返回顶部

1.1 事件返回顶部

1.2 模板返回顶部

1.3 自定义过滤器返回顶部

1.4 过分返回顶部

1.5 支付宝注册返回顶部