vue2笔记3 过滤器指令生命周期

路过君

发布于 2022-04-13 13:36:39

5230

发布于 2022-04-13 13:36:39

过滤器

<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实例

数据代理和数据侦测创建

beforeCreate 无法访问data,methods
created 可以访问data,methods

vm实例挂载

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

数据更新

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

vm实例销毁

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