Vue經常使用特性-過濾器和生命週期

時間 2020-11-30

標籤 javascript vue java app 函數測試 this spa 插件 code 欄目 JavaScript 简体版

原文原文鏈接

1.過濾器

1.1過濾器的做用是什麼？javascript

格式化數據，好比將字符串格式化爲首字母大寫，將日期格式化爲指定的格式等vue

1.2自定義過濾器java

1.3過濾器的使用app

1.4局部過濾器函數

1.5帶參數的過濾器測試

1.6過濾器的使用this

Vue.js容許自定義過濾器，可被用於一些常見的文本格式化。spa
過濾器能夠用在兩個地方：雙花括號插值和v-bind表達式。插件
過濾器應該被添加在JavaScript表達式的尾部，由「管道」符號指示code
支持級聯操做
過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾後的版本
全局註冊時是filter，沒有s的。而局部過濾器是filters，是有s的

<div id="app">
    <input type="text" v-model='msg'>
      <!-- upper 被定義爲接收單個參數的過濾器函數，表達式  msg  的值將做爲參數傳入到函數中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持級聯操做
      upper  被定義爲接收單個參數的過濾器函數，表達式msg 的值將做爲參數傳入到函數中。
      而後繼續調用一樣被定義爲接收單個參數的過濾器 lower ，將upper 的結果傳遞到lower中
    -->
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>測試數據</div>
  </div>

<script type="text/javascript">
   //  lower  爲全局過濾器     
   Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
       //filters  屬性 定義 和 data 已經 methods 平級 
       //  定義filters 中的過濾器爲局部過濾器 
      filters: {
        //   upper  自定義的過濾器名字 
        //    upper 被定義爲接收單個參數的過濾器函數，表達式  msg  的值將做爲參數傳入到函數中
        upper: function(val) {
         //  過濾器中必定要有返回值 這樣外界使用過濾器的時候才能拿到結果
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>

過濾器中傳遞參數

<div id="box">
        <!--
            filterA 被定義爲接收三個參數的過濾器函數。
            其中 message 的值做爲第一個參數，
            普通字符串 'arg1' 做爲第二個參數，表達式 arg2 的值做爲第三個參數。
        -->
        {{ message | filterA('arg1', 'arg2') }}
    </div>
    <script>
        // 在過濾器中 第一個參數 對應的是  管道符前面的數據   n  此時對應 message
        // 第2個參數  a 對應 實參  arg1 字符串
        // 第3個參數  b 對應 實參  arg2 字符串
        Vue.filter('filterA',function(n,a,b){
            if(n<10){
                return n+a;
            }else{
                return n+b;
            }
        });
        
        new Vue({
            el:"#box",
            data:{
                message: "哈哈哈"
            }
        })

    </script>

案例：使用過濾器格式化日期

<body>
    <div id="app">
        <div>{{times | format('yyyy-MM-dd hh:mm:ss')}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.filter('format', function (value, arg) {
            function dateFormat(date, format) {
                if (typeof date === "string") {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                        date = parseInt(mts[2]);
                    }
                }
                date = new Date(date);
                if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
                }
                var map = {
                    "M": date.getMonth() + 1, //月份 
                    "d": date.getDate(), //日 
                    "h": date.getHours(), //小時 
                    "m": date.getMinutes(), //分 
                    "s": date.getSeconds(), //秒 
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                    "S": date.getMilliseconds() //毫秒 
                };

                format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                        if (all.length > 1) {
                            v = '0' + v;
                            v = v.substr(v.length - 2);
                        }
                        return v;
                    } else if (t === 'y') {
                        return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                });
                return format;
            }
            return dateFormat(value, arg);
        })
        var vm = new Vue({
            el: '#app',
            data: {
                times: new Date
            },
            methods: {

            }
        })
    </script>
</body>

2.生命週期

1.主要階段

掛載（初始化相關屬性）

① beforeCreate

② created

③ beforeMount

④ mounted
更新（元素或組件的變動操做）

① beforeUpdate

② updated
銷燬（銷燬相關屬性）

① beforeDestroy

② destroyed

2.Vue實例的產生過程
事物從出生到死亡的過程
Vue實例從建立到銷燬的過程，這些過程當中會伴隨着一些函數的自調用。咱們稱這些函數爲鉤子函數

經常使用的鉤子函數

beforeCreate	在實例初始化以後，數據觀測和事件配置以前被調用此時data 和 methods 以及頁面的DOM結構都沒有初始化什麼都作不了
created	在實例建立完成後被當即調用此時data 和 methods已經可使用可是頁面尚未渲染出來
beforeMount	在掛載開始以前被調用此時頁面上還看不到真實數據只是一個模板頁面而已
mounted	el被新建立的vm.$el替換，並掛載到實例上去以後調用該鉤子。數據已經真實渲染到頁面上在這個鉤子函數裏面咱們可使用一些第三方的插件
beforeUpdate	數據更新時調用，發生在虛擬DOM打補丁以前。頁面上數據仍是舊的
updated	因爲數據更改致使的虛擬DOM從新渲染和打補丁，在這以後會調用該鉤子。頁面上數據已經替換成最新的
beforeDestroy	實例銷燬以前調用
destroyed	實例銷燬後調用

<body>
    <div id="app">
        <div>{{msg}}</div>
        <button v-on:click='red'>更新</button>
        <button @click='destroy'>銷燬</button>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '生命週期'
            },
            methods: {
                red: function () {
                    this.msg = 'hello生命週期'
                },
                destroy: function () {
                    this.$destroy();
                }
            },
            // 掛載（初始化相關屬性）
            beforeCreate: function () {
                console.log('beforeCreate');
            },
            created: function () {
                console.log('created');
            },
            beforeMount: function () {
                console.log('beforeMount');
            },
            mounted: function () {
                console.log('mounted');
            },
            // 更新（元素或組件的變動操做）
            beforeUpdate: function () {
                console.log('beforeUpdate');
            },
            updated: function () {
                console.log('updated');
            },
            // 銷燬（銷燬相關屬性）
            beforeDestroy: function () {
                console.log('beforeDestroy');
            },
            destroyed: function () {
                console.log('destroyed');
            }

        })
    </script>
</body>