![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
金胜涛
这个作者很懒,什么都没留下…
展开
-
Vue学习之transition实现过渡效果
先来一个简单的栗子如下代码,假设不使用transition,那么我们得到的效果就是一个简单的显示与隐藏之间的切换。在加入了transition之后,这个显示与隐藏就有了“过程”。首先当点击按钮隐藏的时候,会有两个class被附加到transition上并依次执行,分别是.v-leave和.v-leave-to,前者代表“出场前”的状态,后者代表“出场后”的状态。当再次点击按钮显示的时候,同...原创 2019-12-17 11:15:20 · 605 阅读 · 0 评论 -
Vue学习之transition-group列表过渡组件复用
如下代码,本质上就是将transition-group作为根组件,内部使用slot插槽。代码中使用到的Velocity是一个高性能的动画库使用方式为Velocity(元素节点,css样式,配置项)配置项详情可参考Velocity.js中文文档Vue.component('demo-component', { template: ` <transition-group...原创 2019-12-17 10:27:11 · 495 阅读 · 0 评论 -
webpack——输出管理及打包单文件组件
HtmlWebpackPlugin你会发现,当你打包结束的时候,如果index.html在根目录直接运行的话,那么图片资源这些路径就无法访问到了。解决方案是把index.html放入dist目录中,但是dist是打包编译的结果而非源码,所以把index.html放到dist中就不合适,而且你也会发现,我们打包的结果文件名:bundle.js,如果我把这个文件名改了,则index.html也要手动...原创 2019-05-06 21:29:03 · 986 阅读 · 0 评论 -
JavaScript原生实现mvvm
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-05-07 08:31:05 · 334 阅读 · 0 评论 -
vue父子组件传值
1.父组件向子组件传值采用prop down 属性向下传递的方式1.在父组件中通过子组件标签声明属性的方式传递数据2.在子组件中声明props接收父组件传递给自己的数据app.jsconst template= ` <div> <section class="todoapp"> <todo-header v-on:addTodo="addTo...原创 2019-05-07 08:46:28 · 163 阅读 · 0 评论