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