vue2筆記3 過濾器 指令 生命周期

過濾器

<div id="root">
    <div>{{new Date() | year}}-{{new Date() | month('arg1Value')}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    // 全局過濾器
    Vue.filter('month', function (value, arg1) {
        return value.getMonth() + 1;
    });
    let vm = new Vue({
        // 局部過濾器
        filters: {
            year(value) {
                return value.getFullYear();
            }
        }
    }).$mount('#root');
</script>           

複制

指令

v-text 向标簽插入文本，不支援html标簽解析

v-html 向标簽插入html，支援結構解析，注意XSS攻擊

v-clock 保持在元素上直到關聯Vue執行個體結束編譯，可用于隐藏未編譯的标簽

<style>
[v-cloak] {
	display: none;
}
</style>
<div v-cloak>
  {{ message }}
</div>           

複制

v-once 初次動态渲染後視為靜态内容（例如顯示資料初始值，加快渲染速度）

v-pre 跳過标記的标簽，加快靜态内容渲染速度

自定義指令

注：使用全小寫

注：指令函數内this==window而非vm

<div id="root">
    <div v-upper-case="name"></div>
    <input type="text" v-lower-case="name"/>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    let vm = new Vue({
        data() {
            return {
                name: 'abc'
            }
        },
        directives: {
            // 調用時機 1.元素與指令綁定時 2. 指令所在模闆重新解析時調用
            'upper-case': function(el, binding) {
                el.innerText = binding.value.toUpperCase()
            },
            'lower-case': {
                bind(el, binding) {
                    // 元素與指令綁定時
                    el.value = binding.value.toLowerCase()
                },
                inserted(el, binding) {
                    // 指令所在元素插入頁面時
                    el.focus()
                },
                update(el, binding) {
                    // 指令所在模闆被沖洗解析時
                    el.value = binding.value.toLowerCase()
                }
            }
        }
    }).$mount('#root');
    // 全局指令
    Vue.directive('my-directive', function (el, binding) {});
</script>           

複制

生命周期

生命周期函數的this都是vue執行個體

1. 資料代理和資料偵測建立

• beforeCreate

  無法通路data,methods

• created

  可以通路data,methods

1. vm執行個體挂載

• beforeMount

  頁面呈現未經vue編譯的dom結構

  所有對dom操作最終均無效（會被編譯後的dom覆寫）

• mouted

  頁面呈現經過vue編譯的dom

  對dom操作有效

  一般在此：開啟定時器，發送網絡請求，訂閱消息，綁定自定義事件等初始化操作

1. 資料更新

• beforeUpdate

  資料已經更新但頁面還未更新，頁面與資料不同步

• updated

  頁面已經根據資料更新，頁面和資料保持同步

1. vm執行個體銷毀

• beforeDestroy

  當vm.$destroy被調用時觸發

  data,methods,指令等都可用，但是不會再執行beforeUpdate/updated/更新頁面

  一般在此：關閉定時器，取消訂閱消息，解綁自定義事件等收尾操作

• destroyed

  注destroy隻會解綁自定義事件不會解綁dom原生事件回調