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
如果觉得我的文章对你有用,请随意赞赏