學習Vue 入門到實戰——學習筆記（三）

時間  2019-11-06
標籤 學習 vue 入門 實戰 筆記 简体版
原文   原文鏈接

目錄：

1.過濾器css

                全局html

                私有vue

2.Vue生命週期bootstrap

               什麼是生命週期api

               主要的生命週期函數分類數組

               圖文助解app

               代碼助解函數

過濾器

先看看官網是怎麼說的：post

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教程