Vue的slot transition 动态组件 过滤器
2019-05-28 21:10
477 查看
Vue的slot transition 动态组件 过滤器
slot
- 普通插槽
<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() }` } } })
相关文章推荐
- Vue的slot,transition ,动态组件 和 过滤器
- vue组件(父子组件传值、非props特性、作用域插槽、动态组件、v-once)
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- Vue 2.0 动态组件
- vue动态组件和slot插槽
- Vue--动态组件与v-once指令
- 使用form-create动态生成vue自定义组件和嵌套表单组件
- vue-router2.0 组件之间传参及获取动态参数的方法
- vue组件(全局,局部,动态加载组件)
- vue.js之动态组件
- 解决vue中无法动态修改jqgrid组件 url地址的问题
- Vuejs——(12)组件——动态组件
- 浅谈vue 动态加载、注册组件
- vue中用动态组件实现选项卡切换效果
- 6 vue动态组件
- vue组件(全局,局部,动态加载组件)
- Vue动态组件
- vue组件中watch props根据v-if动态判断并挂载DOM的问题
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- vue-router2.0 组件之间传参及获取动态参数