一天带入门到放弃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系列结束!如有疑问可以下方留言!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客编程

Cheerio,服务端的JQuery。

cheerio 是nodejs特别为服务端定制的,能够快速灵活的对JQuery核心进行实现。它工作于DOM模型上,且解析、操作、呈送都很高效。

1091
来自专栏智能算法

微信小程序,开发大起底

作者简介:张智超,北京微函工坊开发工程师,CSDN微信开发知识库特邀编辑。微信小程序爱好者。 感谢@翟东平 @qq_31383345 @nigelyq 等热情参...

57214
来自专栏GIS讲堂

Arcgis for javascript不同的状态下自定义鼠标样式

俗话说:爱美之心,人皆有之。是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点。在本文,给大家讲讲在Arcgis for javascrip...

1763
来自专栏互联网杂技

React数据流和组件间的通信总结

首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

3797
来自专栏HaHack

学习 React Native for Android:React 基础

1292
来自专栏IMWeb前端团队

React + Redux 组件化方案

React + Redux 组件化方案 在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。 Why React 理想中的组件化,第一步应该...

2258
来自专栏我和我大前端的故事

Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)

当我们在书写 vue 组件的时候,也许可能会用到数据传递;将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件;

2363
来自专栏技术墨客

React学习(11)—— 高阶应用:Web组件

从概念上说,React 和 Web组件 分别用于解决不同的问题。Web组件提供了强大的封装特性来支持其可重复使用性,而React提供了一系列声明性(declar...

842
来自专栏技术墨客

React——Flow代码静态检查 转

Flow是Facebook开源的静态代码检查工具,他的作用是在运行代码之前对React组件以及Jsx语法进行静态代码的检查以发现一些可能存在的问题。Flow可以...

1131
来自专栏nice_每一天

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

自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

1521

扫码关注云+社区

领取腾讯云代金券