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

2. vm实例挂载

• beforeMount
  页面呈现未经vue编译的dom结构
  所有对dom操作最终均无效（会被编译后的dom覆盖）
• mouted
  页面呈现经过vue编译的dom
  对dom操作有效
  一般在此：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作

3. 数据更新

• beforeUpdate
  数据已经更新但页面还未更新，页面与数据不同步
• updated
  页面已经根据数据更新，页面和数据保持同步

4. vm实例销毁

• beforeDestroy
  当vm.$destroy被调用时触发
  data,methods,指令等都可用，但是不会再执行beforeUpdate/updated/更新页面
  一般在此：关闭定时器，取消订阅消息，解绑自定义事件等收尾操作
• destroyed
  注destroy只会解绑自定义事件不会解绑dom原生事件回调