Vue过滤器、自定义按键修饰符、自定义指令、生命周期知识点

最新推荐文章于 2024-10-10 13:13:22 发布

魔仙堡捏泥巴

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量138

点赞数

分类专栏： vue基础文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_40507158/article/details/108284079

版权

vue基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue知识点Day02

1.过滤器
2.自定义按键修饰符
3.自定义指令
- 3.1自定义指令
- 3.2自定义局部指令
4.vue生命周期

1.过滤器

1.定义语法

function里面的第一个参数是固定死的，永远都是过滤器管道符前面传递过来的参数

//function里面的第一个参数是固定死的，永远都是过滤器管道符前面传递过来的参数
 Vue.filter("msgmat", function(msg) {
            return msg.replace("大美女", "小仙女");
        })

2.调用格式

 <p>{{msg|过滤器名称}}  </p>

3.全局过滤器

所有的Vm实例都是共享的

4.私有过滤器

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2.自定义按键修饰符

2.1全局按键别名

.enter
.teb
.delete 捕捉删除和退格键
.esc
.space
.up
.down
.left
.right

//只要按下enter键，就会执行add（）方法
   <input type="text" class="form-control" v-model="name" @keyup.enter="add">

2.2自定义全局按键修饰符

通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：


Vue.config.keyCodes.f2 = 113;

2.3自定义按键修饰符


<input type="text" v-model="name" @keyup.f2="add">

3.自定义指令

3.1自定义指令

自定义全局指令 v-focus，为绑定的元素自动获取焦点：
参数一：指令的名称，不用v-前缀
参数二：对象，这个对象身上有一些相关的函数，在特定的阶段执行相关的操作
全局自定义的指令要写在Vm实例前，否则会报错

    // 自定义全局指令 v-focus，为绑定的元素自动获取焦点：
//参数一：指令的名称，不用v-前缀
//参数二：对象，这个对象身上有一些相关的函数，在特定的阶段执行相关的操作
    Vue.directive('focus', {
    //每当指定绑定到元素上的时候，会执行bind函数，只执行一次
    bind:function(el){
     el.focus();
    }
      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();
      },
      updated:function(){
      //当VNode更新时，会执行updated函数（触发多次）
              el.focus();
      }

    });

3.2自定义局部指令

写在vm实例中

<body>
    <div id="app">
        <input type="text" v-focus v-color="'red'" v-font-weight="900">
    </div>
    <script>
        // 自定义全局指令 v-focus，为绑定的元素自动获取焦点：
        Vue.directive('focus', {
           inserted: function(el) { // inserted 表示被绑定元素插入父节点时调用
                el.focus();
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            //自定义私有指令
            directives: {
                color: { // 为元素设置指定的字体颜色
                    bind(el, binding) {
                       el.style.color = binding.value;
                    }
                },
                'font-weight': function(el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
                    el.style.fontWeight = binding2.value;
                }
            }
        });
    </script>
</body>

4.vue生命周期

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类：

1. 创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
2.运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
3.销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。