Vue可复用性&组合

最新推荐文章于 2023-06-15 09:22:08 发布

数佳

最新推荐文章于 2023-06-15 09:22:08 发布

阅读量624

点赞数

分类专栏： 1.2 前端类库与框架文章标签： vue 混入自定义指令 render函数过滤器

本文链接：https://blog.csdn.net/yaocong1993/article/details/84109859

版权

1.2 前端类库与框架专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、混入

二、自定义指令

除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令。在Vue2.0中，代码复用和抽象的主要形式是组件，然而有的情况下，你仍然需要对普通DOM元素进行底层操作，这时会用到自定义指令。如当页面加载时，输入框将获得焦点，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。

// 如果不使用指令，就需要操作DOM元素，这是vue不提倡的
document.getElementById('search').focus();

指令的名称：定义时，指令的名称不需要加v-前缀；调用时，必须加v-前缀。

一个对象：包含指令相关的函数，这些函数在特定的阶段执行相关的操作。

注册一个全局自定义指令。

Vue.directive('focus',{
  // 当被绑定的元素插入到DOM中时
  inserted:function(el){
    // 聚焦元素，一个元素只有插入DOM之后，才能获取焦点
    el.focus()
  }
})

注册局部指令，组件中接受一个directives的选项。

directives:{
  focus:{
    inserted:function(el){
      el.focus()
    }
  }
}

然后可以在模板中任何元素上使用新的v-focus属性。

<input v-focus>

1、钩子函数

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

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置，如用于绑定样式，只要通过指令绑定给了元素，不管该元素有没有被插入到页面中去，肯定有了一个内联的样式。

inserted：只调用一次，被绑定元素插入父节点（DOM树中）时调用（仅保证父节点存在，但不一定已被插入文档中）。可绑定和JS行为有关的操作，防止JS行为不生效。

update：可能调用多次，所在组件的VNode更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

2、钩子函数的参数

el：指令所绑定的元素，是一个原生JS对象，可直接操作DOM。

binding：一个对象，包含以下属性：
name：指令名，不包括v-前缀。
value：指令的绑定值，如v-my-directive="1+1"中，绑定值为2。
expression：绑定值的字符串形式，如v-my-directive="1+1"中，表达式为1+1。
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用。
arg：传递指令的参数，如v-my-directive:foo中，参数为foo。
modifiers：一个包含修饰符的对象，如v-my-directive:foo.bar中，修饰符对象为{foo:true,bar:true}。

vnode：Vue编译生成的虚拟节点。

oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用

除了el之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。

3、函数简写

自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数，而不关心其它的钩子。

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

三、渲染函数&JSX

render函数返回一个虚拟节点（Virtual Node），告诉Vue页面上需要渲染的html结构。返回结果会替换el指定的容器。组件树中的所有VNodes必须是唯一的。

createElement是一个函数，参数如下：

参数一：必需，{String | Object | Function}，一个HTML标签字符串，组件选项对象，或者解析上述任何一种的一个async异步函数。

参数二：可选，{Object}，一个包含模板相关属性的数据对象，可以在template中使用这些特性。

参数三：可选，{String | Array}，子虚拟节点，由createElement()或字符串构成。

var login={
  template:'<h1>登录组件</h1>'
}

var vm=new Vue({
  el:'#app',
  render:function(createElement){
    return createElement(login)
  }
});

五、过滤器

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

<!-- 在双花括号中 -->
{{ message | 过滤器的名称 }}
<!-- 在`v-bind`中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器的定义语法：

（1）在一个组件的选项中定义本地的过滤器

filters:{
  过滤器名称:function(data){
    return data+'123';
  }
}

（2）在创建Vue实例之前定义全局过滤器，所有vm实例共享

Vue.filter('过滤器名称',function(data){
  return data+'123';
})

var vm=new Vue({
  // ...
});

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

{{ message | filterA('data', arg1, arg2) }} 过滤器可以有多个参数，第一个参数是过滤器管道符前面传来的数据。

<body>
  <div id="app">
    <p>{{msg | filterA('无敌','可爱') | filterB}}</p>
  </div>
  <script>
    Vue.filter('filterA',function(msg,arg1,arg2){
      return msg.replace(/无情/g,arg1+arg2);
    });

    Vue.filter('filterB',function(msg){
      return '===='+msg+'====';
    })
    
    var vm=new Vue({
      el:'#app',
      data:{
        msg:'你无情，你残酷! 那你就不无情，不残酷!? 我哪里无情，哪里残酷!?'
      },
      filters:{
        filterA:function(msg,arg1,arg2){
          return msg.replace(/残酷/g,arg1+arg2);
        }
      }
    });
  </script>
</body>

当有局部和全局两个名称相同的过滤器时，以就近原则进行调用，即局部过滤器优先于全局过滤器。

数佳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue可复用性&组合

一、混入二、自定义指令除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令。在Vue2.0中，代码复用和抽象的主要形式是组件，然而有的情况下，你仍然需要对普通DOM元素进行底层操作，这时会用到自定义指令。如当页面加载时，输入框将获得焦点，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。// 如果不使用指令，就需要操作...
复制链接

扫一扫

专栏目录