一天带你入门到放弃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(一)》
相关文章: