• 一天带你入门到放弃vue.js(三)


    自定义指令

    在上面学习了自定义组件接下来看一下自定义指令

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,for等是指令的名字!接下来看一下如何创造一个属于自己的指令吧!

    全局指令,指令名称focus

      

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })

    当然这个和自定义组件一样也是拥有局部指令的,在新建的实例种添加directives属性就行

      

    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }
    指令配置以及修饰符

    看下简单自定义指令

    
    
    <div v-test:true.bottom.right="hw">

    main.js

      

    Vue.directive("test",function(el,binding){
        //el是指令所处的元素
        //binding是指令参数的对象集合
        //上述中:true是参数(arg)
        var arg=binding.arg;
        //以.为名的修饰符.bottom.right等是修饰符,获取到是一个数组
        var modifiers=binding.modifiers
        //而这个指定的值通过value获取
        var val= binding.value
    })

    过滤器

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。

    html

    
    
    <!-- 在双花括号中 -->
    {{ message | capitalize }}
    
    <!-- 在 `v-bind` 中 -->
    <div v-bind:id="rawId | formatId"></div>

    在main.sj中使用filter建立自己的过滤器(使用这个mm转换m 小demo)

    单位换算
    <br><br><br>
    <input type="text" v-model="length">mm = {{length | meter}}
     

    main.js

      

    Vue.filter('meter',function(val,arg){
        val =val || 0;
        arg=arg || "m"
        return (val/1000).toFixed(2) +arg;
    })
    //实例化Vue
    new Vue({
        el:"#app",
        data:{
            length:10
        }
    })

    修改参数

    {{length | meter('m')}}
    mixins(混合)

    比如在定义组件或者新建实例时候需要用到大量重复的methods,data,可以用这个minxins替代

      

    var base={
         data:function(){
            return{
                visiable:false
            }
        },
        methods:{
            toggle:function(){
                this.visiable= !this.visiable
            },
            show:function(){
                console.log(11)
                this.visiable=true
            },
            hide:function(){
                this.visiable=false
    
            }
        }
    }
    //在新建组件时可以直接使用base的对象,mixins:['base'],存储的value要和上面存储的保存一致
    
    Vue.component('show',{
        template:`<div>
            <button @click="toggle">点击</button>
            <p v-if="visiable">干哈啊时代光华的规划过圣诞节的胳膊上价格多少噶啥的</p>
    </div>`,
        mixins:[base]
    })
    slot(插槽)

    有时候我们一个组件由多部分组成,我们需要去改别其内容则需要插槽去改变

      

    //组件模板
    <template id="panel-tpl">
        <div>
            <div>标题</div>
            <div>content></div>
            <div>footer</div>
        </div>
    </template>
    //main.js新建一个panel组件
    Vue.component("panel",{
        template:"#panel-tpl"
    })
    new Vue({
        el:"#app"
    })

    html页面中我们可以调用这个panel调取

    <panel></panel>
    <panel></panel>
    <panel></panel>

    但是我们需要去改变panel模板的内容如何做呢

    <template id="panel-tpl">
        <div>
            <div>标题</div>
            <div><slot></slot></div>
            <div>footer</div>
        </div>
    </template>

    修改内容

    <panel>我是新内容</panel>

    这样content的内容就修改了,那么想去修改这个title,和footerne,欧这样的方法是不支持哪,Vue这么笨,你还浪费我一天时间学这个干嘛!早点放弃吧!诶,别着急慢慢看!实现这个这功能我们需要给每个部分的插槽(slot)指定一个name

    <template id="panel-tpl">
        <div>
            <div><slot name="header"></slot></div>
            <div><slot name="content"></slot></div>
            <div><slot name="footer"></slot></div>
        </div>
    </template>

    执行使用

    <panel>
     <div slot="header">这是新的头部</div>
     <div slot="content">内容区域</div>
     <div slot="footer"></div>
    </panel>

    那么你会发现头部中间内容改了,底部没有指定是空白的,那么你可能就是又有需求了,怎么让底部保存一个默认的,人就是这么JIAN(详见程序员与产品经理间的风波!手动滑稽!!!) 底部取一个默认值,在不指定时候是默认值,指定的时候是自己的定义内容!

    
    
    <template id="panel-tpl">
        <div>
            <div><slot name="header"></slot></div>
            <div><slot name="content"></slot></div>
            <div><slot name="footer">我是一个默认的底部</slot></div>
        </div>
    </template>

    把默认内容写在插槽中,这样保持了默认情况!

    好了!一看写了5000多字了,一天带你从入门到放弃Vue.js系列结束!如有疑问可以下方留言!!!

    转自 十月梦想博客 。
    原文地址《一天带你入门到放弃vue.js(一)

    相关文章:

    一天带你入门到放弃vue.js(一)

    一天带你入门到放弃vue.js(二)

    一天带你入门到放弃vue.js(三)

  • 相关阅读:
    委托和事件的区别和联系(转载
    Captcha验证码识别走向3D化
    3DCaptcha for .net
    委托之异步(转自http://www.cnblogs.com/inforasc/archive/2009/10/21/1587756.html
    static的初始化顺序
    各式各样的验证码
    [SQL优化工具]SQL Tuning for SQL Server(转)
    浅析C#深拷贝与浅拷贝 (转载)
    [orcle] oracle截取字符串的函数substr
    struts2.0的工作原理
  • 原文地址:https://www.cnblogs.com/IT-study/p/9592233.html
Copyright © 2020-2023  润新知