vue之过滤器、自定义指令和生命周期

最新推荐文章于 2022-04-26 20:29:18 发布

lipeiwen1998

最新推荐文章于 2022-04-26 20:29:18 发布

阅读量312

点赞数

本文链接：https://blog.csdn.net/lipeiwen1998/article/details/108097891

版权

文章目录

Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

注册或获取全局指令Vue.directive( id, [definition] )

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

1.注册全局自定义指令
实例：

<div id="app1">
    <input v-focus type="text" name="" id="">//获取焦点
    <h3 v-style="'red'">{{msg}}</h3>
</div>

<script>
// 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus',{
    // 当被绑定的元素插入到 DOM 中时立即执行此函数
        inserted:function(el){
        // 聚焦元素
            el.focus();
        }
    })
// 注册一个全局自定义指令 `v-style`
    Vue.directive('style',{
        inserted:function(el,styles){
        //元素字体颜色         字体颜色可在指令中传入
            el.style.color = styles.value;
        }
    })
    var app1 = new Vue({
        el:'#app1',
        data:{
            msg:'全局指令'
        }
    })
</script>

1.注册局部自定义指令
实例：

<div id="app2">
    <input v-focus type="text" name="" id="">
    <h3 v-style="'楷体'">{{msg}}</h3>
</div>

<script>
    var app2 = new Vue({
        el:'#app2',
        data:{
            msg:'局部指令'
        },
        directives:{
        //指令名称
            focus:{
            // 指令的定义
                inserted:function(el){
                    el.focus();
                }
            },
            style:{
                inserted:function(el,styles){
                    el.style.fontFamily = styles.value;
                }
            }
        }
    })
</script>

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode
更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
2.1. name：指令名，不包括 v- 前缀。
2.2. value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
2.3. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
2.4. expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
2.5. arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
2.6. modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

//  在双花括号中
{{ message | capitalize }}

//  在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。
注：当全局过滤器和局部过滤器重名时，会采用局部过滤器。

<body>
    <div id="app">
        <p>{{msg | msgFormat('疯狂') | test}}</p>
    </div>
    <div id="app2">
        <p>{{msg | msgFormat('疯狂') | test}}</p>
    </div>
    <script>
        // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
        // 全局过滤器，所有的Vue实例都能共享
        Vue.filter('msgFormat',function(msg,data){
            return msg.replace(/单纯/g, data);
        })

        Vue.filter('test', function(msg){
        return msg + "=========";
        })
        var app = new Vue({
            el:'#app',
            data:{
                msg: '曾经，我也是个单纯的少年，单纯的问谁是世界上最单纯的人',
            },
            methods: {},
        })

        var app2 = new Vue({
            el:'#app2',
            data:{
                msg: '曾经，我也是个单纯的少年，单纯的问谁是世界上最单纯的人',
            },
            methods: {},
            filters:{
                // 定义私有过滤器，过滤器有两个条件，【过滤器名称和处理函数】
          // 过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
                msgFormat:function(msg){
                    return msg.replace(/单纯/g, '幼稚');
                }
            }
        })
    </script>

全局过滤器语法：Vue.filter(‘过滤器的名称’,
function(data){})，第一个参数永远都是过滤器管道符前面传递过来的数据。
可以设置多个参数由前台传入，Vue.filter(‘msgFormat’, function (msg, data, data2)
全局过滤器，所有的Vue实例都能共享
可以使用多个过滤器
在Vue实例中，使用filters属性定义私有过滤器，定义私有过滤器有两个条件，【过滤器名称和处理函数】
过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器

vue的生命周期

一、vue的生命周期是什么

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:
beforeCreate

created

beforeMount

mounted

(

    beforeUpdate

    updated

)

beforeDestroy

destroyed

在这里插入图片描述

二、vue生命周期的在项目中的执行顺序

…

data () {

    return {

    rendered: false,

}

}

…
1.

beforeCeate(){

    console.log(this.rendered);    // undefined  


}

created() {

    console.log(this.$el);//undefined

    console.log(this.rendered);  // false

}

beforeMount() {

    console.log(this.$el)；//undefined

}

mounted() {

    console.log(this.$el);

}

beforeDestroty(){

    console.log(this.$el);

    console.log(this.rendered); 

}

destroyed() {

    console.log(this.$el);

    console.log(this.rendered);

}

三、vue中内置的方法属性和vue生命周期的运行顺序（methods、computed、data、watch、props)

从第一二点可知道data的初始化是在created时已经完成数据观测(data observer)，并且诸如methods、computed属性 props等已经初始化；那问题来了，

data props computed watch methods他们之间的生成顺序是什么呢？

props => methods =>data => computed => watch;

四、自己构造的方法与vue生命周期的运行顺序如show这些

往往我们在开发项目时都经常用到 $refs 来直接访问子组件的方法，但是这样调用的时候可能会导致数据的延迟滞后的问题，则会出现bug。

解决方法则是推荐采取异步回调的方法，然后传参进去，严格遵守vue的生命周期就可以解决推荐 es6 的promise。

lipeiwen1998

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue之过滤器、自定义指令和生命周期

文章目录Vue.js 自定义指令注册或获取全局指令Vue.directive( id, [definition] )Vue.js 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。注册或获取全局指令Vue.directive( id, [definition] )实例<div id="app1"> <input v-focus type="text" name="" id=""> <h3 v-st
复制链接

扫一扫