美文网首页
VUE-2:自定义指令、事件

VUE-2:自定义指令、事件

作者: kino2046 | 来源:发表于2020-03-04 16:04 被阅读0次

directive 自定义指令

        我们还可以通过 `Vue` 提供的directive方法来自定义指令


注册指令

        `vue` 提供了两种指令注册方式

                - 全局指令

                - 局部指令

全局指令

注册在外部

局部指令

注册在组件内部

        在使用指令的时候,需要使用 `v-指令名称` 的方式来调用

ref    获取组件

        属性,vue提供的一种用于获取标签(组件)实例对象的简便方式


指令生命周期(钩子函数)


输入框光标案例:

输入框自动获得焦点 点击按钮后再获取焦点

拖拽功能案例:


.limit(修饰符,限定范围)


v-on 绑定事件

        缩写@

methods        (组件的方法集)

        在组件选项中,提供了一个 `methods` 选项,用来存放组件中使用的函数方法,且存放在 `methods` 中的函数方法可以通过组件

        实例(this)进行访问

通过内联方式绑定事件处理函数

        事件绑定函数中的 `this` 指向组件实例

事件绑定函数中的第一个参数默认为 `event` 对象

也可以在事件绑定中直接调用函数(并不会立即执行,也是通过事件触发执行的)

        事件对象需要手动传入,名称为 `$event`


事件修饰符

`vue` 还提供了许多按键修饰符


computed(计算属性,不支持异步,异步要用下面的watch)

        在实际的应用中,我们会有一些原始数据,同时在应用中又会有一些数据是根据某些原始数据派生出来的,针对这样的一种情况,

        `vue` 定义了一个专门用来处理这种派生数据的选项:`computed`

                1.计算属性类似 `getter` 和 `setter` ,当访问某个计算属性的时候,就会调用 `computed` 中同名的函数,函数的返回值将作为该计                       算属性的值

                2.计算属性的值依赖计算函数中依赖的其它响应式数据

                3.计算属性的值可以缓存,如果依赖的其它响应式数据没有发生变化,但多次访问该计算属性,得到结果是最近一次变化产生的值

                  (相对于调用方法得到结果在某些时候性能要好一些)

简写形式,get、set变体 获取时间案例 男、女、全选

计算属性的 `getter` 与 `setter`

        默认情况下,计算属性函数是一个 `getter` 函数,如果计算属性只有 get 需求,则可以简写


computed区别于method的两个核心

        1.computed是属性调用,而methods是函数调用

        2.computed带有缓存功能,而methods不是

        computed当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值。


watch

        有的时候,我们需要的派生数据是通过异步的方式处理的,这个时候,计算属性就不太好用了(不能处理异步)。

        我们可以使用另外一个选项:`watch`

不支持promise

延迟输入用watch:


多层监听

        对于多层数据的监听,可以使用字符串+点语法

深度监听

        默认情况下,`watch` 只对当前指定的值进行一层监听,如果需要对对象进行深度监听。

        深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用


过滤器

注册过滤器

    全局过滤器

    局部过滤器

案例:


相关文章

  • VUE-2:自定义指令、事件

    directive自定义指令 我们还可以通过`Vue`提供的directive方法来自定义指令 注册指令 `vue...

  • angular6.x--其它

    EventEmitter实现自定义事件 通常,指令使用 Angular EventEmitter 来触发自定义事件...

  • Vue div节点滚动事件-加载更多

    使用Vue.directive注册全局指令 绑定事件 对于Vue自定义指令不明白的同学请移步: Vue自定义指令 ...

  • 第二十节:Vue组件传参:Vue子组件向父组件传参(事件传参)

    1. 自定义事件 除了可以处理原生的DOM事件, v-on指令也可以处理组件内部触发的自定义的事件,调用this....

  • Vue.js

    MVC VueJS 声明周期钩子 自定义指令 事件深入玩法 自定义建码 过滤器

  • Angular基本指令与语法

    循环指令 选择指令 注意事项 多重分支判断 事件绑定 属性绑定 双向数据绑定 自定义指令 创建组件 使用组件 过滤...

  • Angular 5 自定义指令(二)

    接上篇文章 《Angular 5 自定义指令(一)》 这篇文章我将介绍一下使用自定义指令来监听元素的事件。 首先,...

  • Vue.js 自定义事件

    自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。指令 v-on 除了监听 DOM 事件外,还可以用...

  • vue 有自定义指令

    vue 的自定义指令,分为全局自定义指令和局部自定义指令,局部自定义指令等价于局部组件。 自定义指令可以对DOM进...

  • vue-$emit

    绑定自定义事件 格式:在父组件组件中用v-on指令绑定一个自定义事件(代码如下:)注意:v-on:click、v-...

网友评论

      本文标题:VUE-2:自定义指令、事件

      本文链接:https://www.haomeiwen.com/subject/ydsllhtx.html