Vue的slot transition 动态组件 过滤器
slot
普通插槽
< body>
< div id = " app" >
< Hello>
< header> 头部 </ header>
< section> 内容 </ section>
< footer> 底部 </ footer>
</ Hello>
</ div>
< template id = " hello" >
< div>
hello
< slot> </ slot>
</ div>
</ template>
</ body>
Vue. component ( 'Hello' , {
template: '#hello'
} )
new Vue ( {
el: '#app'
} )
具名插槽:
< div id = " app" >
< Hello>
<header slot = "header"> 头部 </ header>
<section slot = "content"> 内容 </ section>
<footer slot = "footer"> 底部 </ footer>
</ Hello>
</ div>
< template id = " hello" >
< div>
<slot name = "header"></ slot>
<slot name = "content"></ slot>
hello
<slot name = "footer"></ slot>
</ div>
</ template>
Vue. component ( 'Hello' , {
template: '#hello'
} )
new Vue ( {
el: '#app'
} )
transition
vue中实现过渡或是动画一共提供了这样四种形式:
在 CSS 过渡和动画中自动应用 class — 自己写css3动画 可以配合使用第三方 CSS 动画库,如 Animate.css – 别人写好了类名,我们用 一般用这种
< div id = " app" >
<button @click = 'flag = !flag'> 切换 </ button>
<transition
name="fade" mode="out-in"
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-show = 'flag'> 切换的内容 </ p>
</ transition>
<transition
name="fade" mode="in-out"
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-show = '!flag'> 切换的内容 </ p>
</ transition>
</ div>
new Vue ( {
el: '#app' ,
data: {
flag: true
}
} )
在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画 可以配合使用第三方 JavaScript 动画库,如 Velocity.js – 用别人写好的动画库 vue只要一使用transition组件就会自动添加6个类名 和 8 个钩子函数 transition组件如果有name选项,就可以将类名 v- 换成 ‘name’- 类名 使用第三方的css过渡库 animate.css
动态组件
动态组件是vue内部提供了一个叫做component的组件,这个组件身上可以通过绑定is属性来进行 组件的切换 keep-alive组件可以进行组件的内容缓存,将组件的内容存入浏览器缓存中,这样可以大大的节省街切换的事件 keep-alive 和 component动态组件两者常常一起搭配使用
< div id = " app" >
<button @click = " name = name === 'Aa'?'Bb':'Aa'"> 切换 </ button>
< keep-alive include = " " >
<component :is = "name"></ component>
</ keep-alive>
</ div>
Vue. component ( 'Aa' , {
template: '<h3> AA </h3>'
} )
Vue. component ( 'Bb' , {
template: '<h3> BB </h3>'
} )
new Vue ( {
el: '#app' ,
data: {
name: 'Aa'
}
} )
过滤器
vue 1.x内部提供提供了 10 个过滤器, 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化 什么叫过滤器?
格式化数据的一个工具 举例: 12.22225 —> 12.2 Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28 过滤器一样也有两种声明形式
全局声明 Vue.filter(过滤器名称,回调函数) 回调函数中有一个参数value value值就表示的是格式化数据的值
局部声明 new Vue({ filters: { '过滤器名称': function( value ){ return } } })
过滤器的回调函数必须有返回值 如何使用使用过滤器?
我们用一个叫做管道符的来使用过滤器 举例: 数据 | 过滤器名称
< div id = " app" >
< p> {{ time | date('*') }} </ p>
< p> {{ time | time('*') }} </ p>
</ div>
Vue. filter ( 'date' , function ( val, type ) {
var date = new Date ( val )
return ` ${ date. getFullYear ( ) } ${ type } ${ date. getMonth ( ) + 1 } ${ type } ${ date. getDate ( ) } `
} )
new Vue ( {
el: '#app' ,
data: {
time: Date. now ( )
} ,
filters: {
'time' : function ( val, type ) {
var date = new Date ( val )
return ` ${ date. getFullYear ( ) } ${ type } ${ date. getMonth ( ) + 1 } ${ type } ${ date. getDate ( ) } `
}
}
} )