学习Vue 入门到实战——学习笔记（三）

时间  2020-05-25
标签 学习 vue 入门 实战 笔记 繁體版
原文   原文链接

目录：

1.过滤器css

                全局html

                私有vue

2.Vue生命周期bootstrap

               什么是生命周期api

               主要的生命周期函数分类数组

               图文助解app

               代码助解函数

过滤器

先看看官网是怎么说的：学习

Vue.js 容许你自定义过滤器，可被用于一些常见的文本格式化。过滤器能够用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：测试

<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

全局过滤器

全部的vm实例都共享的。

示例：

将字符串中全部的 “单纯”  替换成   ”邪恶“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app"> {{msg | character}} </div>
<script> Vue.filter('character', function (msg) { return msg.replace(/单纯/g, '邪恶'); }); var vm = new Vue({ el: '#app', data: { msg: '魔镜魔镜谁是世界上最单纯的姑娘？魔镜魔镜谁是世界上最单纯的小伙？魔镜魔镜你是否单纯？' }, methods: {} }); </script>
</body>
</html>

过滤器函数总接收表达式的值 (以前的操做链的结果) 做为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值做为第一个参数。

在 调用 过滤器 ：  character    时，能够传参数

<div id="app"> {{msg | character('兔子','可爱')}} </div>
<script> Vue.filter('character', function (msg, arg1, arg2) { return msg.replace(/单纯/g, '邪恶' + arg1 + arg2); }); var vm = new Vue({ el: '#app', data: { msg: '魔镜魔镜谁是世界上最单纯的姑娘？魔镜魔镜谁是世界上最单纯的小伙？魔镜魔镜你是否单纯？' }, methods: {} }); </script>

过滤器可屡次使用

<div id="app"> {{msg | character('兔子','可爱') | ceshi}} </div>
<script> Vue.filter('character', function (msg, arg1, arg2) { return msg.replace(/单纯/g, '邪恶' + arg1 + arg2); }); Vue.filter('ceshi', function (msg) { return msg + '小兔子乖乖,把门开开'; }); var vm = new Vue({ el: '#app', data: { msg: '魔镜魔镜谁是世界上最单纯的姑娘？魔镜魔镜谁是世界上最单纯的小伙？魔镜魔镜你是否单纯？' }, methods: {} }); </script>

 日期格式化：

将昨天小颖写的文章  学习Vue 入门到实战——学习笔记（二）  中的  ctime 格式化为‘yyyy’-'mm'-'dd'形式

过滤器为

Vue.filter('dateFormat', function (dateStr) { var dt = new Date(dateStr), y = dt.getFullYear(), m = dt.getMonth() + 1, d = dt.getDate(); // return y + '-' + m + '-' + d;
        //模板字符串
        if(m.toString().length<2){ m='0'+m; } if(d.toString().length<2){ d='0'+d; } return `${y}-${m}-${d}`; });

强化

<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">添加、删除、查询</div>
        <div class="panel-body form-inline">
            <div class="form-group">
                <label for="exampleInputId">Id：</label>
                <input type="text" class="form-control" id="exampleInputId" v-model="id">
            </div>
            <div class="form-group">
                <label for="exampleInputName">Name：</label>
                <input type="text" class="form-control" id="exampleInputName" v-model="name">
            </div>
            <button type="submit" class="btn btn-primary" @click="add">添加</button>
            <div class="form-group">
                <label for="searchName">搜索名称关键字：</label>
                <input type="text" class="form-control" id="searchName" v-model="keywords">
            </div>
        </div>
    </div>

    <div class="table-content">
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>operation</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in search(keywords)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime | dateFormat('')}}</td>
                <td><a @click.prevent="del(item.id)">删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script> Vue.filter('dateFormat', function (dateStr, pattern) { var dt = new Date(dateStr), y = dt.getFullYear(), m = dt.getMonth() + 1, d = dt.getDate(); // return y + '-' + m + '-' + d;
        //模板字符串
        if (m.toString().length < 2) { m = '0' + m; } if (d.toString().length < 2) { d = '0' + d; } // return `${y}-${m}-${d}`;
        if (pattern.toLowerCase() == 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { var hh = dt.getHours(), mm = dt.getMinutes(), ss = dt.getSeconds(); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } }); </script>

私有

过滤器调用的时候采用就近原则，若是私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/vue.js"></script>
    <style> .table-content { padding-top: 20px;
        } .table-content a, .table-content a:hover { cursor: default; text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">添加、删除、查询</div>
        <div class="panel-body form-inline">
            <div class="form-group">
                <label for="exampleInputId">Id：</label>
                <input type="text" class="form-control" id="exampleInputId" v-model="id">
            </div>
            <div class="form-group">
                <label for="exampleInputName">Name：</label>
                <input type="text" class="form-control" id="exampleInputName" v-model="name">
            </div>
            <button type="submit" class="btn btn-primary" @click="add">添加</button>
            <div class="form-group">
                <label for="searchName">搜索名称关键字：</label>
                <input type="text" class="form-control" id="searchName" v-model="keywords">
            </div>
        </div>
    </div>

    <div class="table-content">
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>operation</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in search(keywords)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime | dateFormat}}</td>
                <td><a @click.prevent="del(item.id)">删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="app2"> {{dt | dateFormat}} </div>
<script> Vue.filter('dateFormat', function (dateStr, pattern) { var dt = new Date(dateStr), y = dt.getFullYear(), m = dt.getMonth() + 1, d = dt.getDate(); // return y + '-' + m + '-' + d;
        //模板字符串
        if (m.toString().length < 2) { m = '0' + m; } if (d.toString().length < 2) { d = '0' + d; } // return `${y}-${m}-${d}`;
        if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { var hh = dt.getHours(), mm = dt.getMinutes(), ss = dt.getSeconds(); if (hh.toString().length < 2) { hh = '0' + hh; } if (mm.toString().length < 2) { mm = '0' + mm; } if (ss.toString().length < 2) { ss = '0' + ss; } return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } }); var vm = new Vue({ el: '#app', data: { id: '', name: '', keywords: '', user: [{ id: '1', name: '李琪琪', ctime: new Date() }, { id: '2', name: '小颖颖', ctime: new Date() }, { id: '3', name: '大黑熊', ctime: new Date() }] }, methods: { add() { this.user.push({id: this.id, name: this.name, ctime: new Date()}); this.id = ''; this.name = ''; }, del(id) { //在数组的some方法中，若是return true,就会当即终止对这个歌数组的循环。
                // this.user.some((item, i) => {
                // if (item.id == id) {
                // this.user.splice(i, 1);
                // return true;
                // }
                // });
                var index = this.user.findIndex(item => { if (item.id == id) { return true; } }); this.user.splice(index, 1); }, search(keywords) { // var newList = [];
                // this.user.forEach(item => {
                // if (item.name.indexOf(keywords) != -1) {
                // newList.push(item);
                // }
                // });
                // return newList;
                return this.user.filter(item => { if (item.name.includes(keywords)) { return item; } }) } } }); var vm = new Vue({ el: '#app2', data: { dt: new Date() }, methods: {}, filters: { dateFormat: function (dateStr, pattern) { var dt = new Date(dateStr), y = dt.getFullYear(), m = dt.getMonth() + 1, d = dt.getDate(); // return y + '-' + m + '-' + d;
                //模板字符串
                if (m.toString().length < 2) { m = '0' + m; } if (d.toString().length < 2) { d = '0' + d; } // return `${y}-${m}-${d}`;
                if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { var hh = dt.getHours(), mm = dt.getMinutes(), ss = dt.getSeconds(); if (hh.toString().length < 2) { hh = '0' + hh; } if (mm.toString().length < 2) { mm = '0' + mm; } if (ss.toString().length < 2) { ss = '0' + ss; } return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } } } }); </script>
</body>
</html>

 附带提下：ES2017 引入了字符串补全长度的功能。若是某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

则过滤器代码可修改成：

Vue.filter('dateFormat', function (dateStr, pattern) { var dt = new Date(dateStr), y = dt.getFullYear(), m = (dt.getMonth() + 1).toString().padStart(2, '0'), d = dt.getDate().toString().padStart(2, '0'); // return y + '-' + m + '-' + d;
        //模板字符串
        // return `${y}-${m}-${d}`;
        if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { var hh = dt.getHours().toString().padStart(2, '0'), mm = dt.getMinutes().toString().padStart(2, '0'), ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } });

2.Vue生命周期

什么是生命周期：

从Vue实例建立、运行、到销毁期间，老是伴随着各类各样的事件，这些事件，统称为生命周期。（Vue实例从建立到销毁的过程）

生命周期钩子：就是生命周期事件的别名而已。

生命周期钩子 = 生命周期函数 = 生命周期事件。

主要的生命周期函数分类：

      建立期间：

             beforeCreate：实例刚在内存中被建立出来，此时，尚未初始化好 data 和 methods 属性。

             created：实例已经在内存中建立ok，此时data 和 methods 已经建立ok，此时尚未开始编译模板。

             beforeMount：此时已经完成了模板的编译，可是尚未挂载到页面中。

             mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。

      运行期间：

             beforeUpdate：状态更新以前执行此函数，此时 data 中的状态值是最新的，可是界面上显示的数据仍是旧的，由于此时尚未开始从新渲染DOM节点。

             update：实例更新完毕以后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被从新渲染好了。

      销毁期间：

             beforeDestroy：实例销毁以前调用，在这一步，实例仍然彻底可用。

             destroyed：Vue实例销毁后调用，调用后Vue实例指示的全部东西都会被解除绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

图文助解

代码助解

公用代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p id="testP">{{msg}}</p>
</div>
<script>
    var vm = new Vue({ el: '#app', data: { msg:'hello world' }, methods: { show(){ console.log('执行了show方法'); } } }); </script>
</body>
</html>

beforeCreate

beforeCreate(){//表示实例彻底被建立出来以前，会执行它
            console.log(this.msg); this.show(); //注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据尚未初始化
        }

created

 created() { console.log(this.msg); this.show(); // 在create中，data和methods已经初始化好了
        // 若是要调用methods中的方法或操做data中的数据，最先只能在crate中操做。
        }

beforeMount

beforeMount() {//模板已经在内存中编译好，但还没有把模板渲染到页面中
            console.log(document.getElementById('testP').innerText); //在beforeMount执行时，页面中的元素尚未真正被替换过来，只是以前写的模板字符串（{{msg}}）
        }

mounted

mounted(){//表示内存中的模板，已经真实的挂载到了页面中，用户已经能够看到渲染好的页面了。
            console.log(document.getElementById('testP').innerText); //注意：mounted是实例建立期间的最后一个生命周期函数了，当执行完mounted就表示，实例已经被彻底建立好了，此时若是
            // 没有其余操做的话，这个实例就静静的躺在咱们内存中，一动不动。
        }

beforeUpdate

beforeUpdate() {//这时候页面数据没有更新，可是data中的数据已经更新了
            console.log('界面上的元素内容：' + document.getElementById('testP').innerText); console.log('data中的msg数据是：' + this.msg); //得出结论：当执行beforeUpdate时，界面中显示的数据仍是旧的，此时data数据是最新的，，页面数据还没有和最新的数据同步。
        }

点击按钮后：

update

 updated(){ console.log('界面上的元素内容：' + document.getElementById('testP').innerText); console.log('data中的msg数据是：' + this.msg); // update事件执行的时候，页面和data数据已经保持同步了，都是最新的数据
        }

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程