Vue.directive

vue中可以通过使用内置指令例如v-开头的指令,也可以通过自定义指令来进行自定义的指令。使用时使用v-加上自己定义的名字就能调用。参数按照顺序,第一个参数固定为使用自定义指令的被绑定元素(el),剩下的按照调用时给的依次对应。

<script>
//自定义全局指令
    //window.onload=function(){document.getElementById('search').focus()}
    //参数1是名称,参数2是对象,身上有指令相关的函数
    Vue.directive('focus',{
     ? ?bind:function (el) {//每当指令绑定到元素上时,会立即执行一次,只执行一次
     ? ? ? ?//注意在每个函数中第一个参数永远是el,表示被绑定的指令的那个元素,这个el参数是原生的js对象
     ? ? ? ?//el.focus()//无效是因为只是绑定并没有插入渲染
     ?  },//绑定时
     ? ?inserted:function (el) {//表示元素 插入到Dom中执行,只执行一次
     ? ? ? ?el.focus()
     ?  },//插入时
     ? ?update:function () {//当组件VNode更新的时候会执行,可能会出发多次
  
     ?  }//更新时
    })
</script>

Vue.filter

vue中可以通过自定义过滤器对需要的内容进行处理。使用时使用|加上自己定义的过滤器名字就能调用。参数按照顺序,第一个参数固定为使用自定义过滤器的内容,剩下的按照调用时给的依次对应。

<script>
//全局过滤器
    Vue.filter('dataFormat',function (dataStr,text) {
 ? ? ? ?return dataStr+text
 ?  })
</script>

Vue.extend

vue中可以基于Vue构造器创建Vue子类。

<script>
 ? ?var vue2=Vue.extend({
 ? ? ? ?data(){
 ? ? ? ? ? ?return {title:'success'}
 ? ? ?  }
 ?  })
</script>

Vue.set

Vue.set可以向响应式对象添加一个属性。例如下面的例子,我给vm对象中的obj中,使用Vue.set添加了一个b属性,obj.b是能同时在页面上渲染响应的。

<script>
    var vm = new Vue({
 ? ? ?el:'#app',
 ? ? ?data:{
 ? ? ? ?a:'我是根级响应属性a',
 ? ? ? ?obj:{}
 ? ?  },
 ?  })
 ? ?Vue.set(vm.obj,'b','我是Vue.set添加的响应属性obj.b')
</script>

其他

目前还有Vue.set、Vue.mixin等几个没有写,一个是没有完全理解,二十Vue.mixin不推荐在应用代码中使用。

有兴趣可以去官方文档中查看。

最后修改:2020 年 10 月 31 日 04 : 51 PM
如果觉得我的文章对你有用,请随意赞赏