2019年12月20日
在Vue中同时使用过渡和动画
摘要： 在Vue中同时使用过渡和动画 1.在需要设置过渡动画的元素外包裹<transition>标签，然后再设置对应的样式即可（v-enter,v-enter-active,v-leave-to,v-leave-active） 2.如果不想用默认的类，可以自定义类如，enter-active-class=" 阅读全文
posted @ 2019-12-20 18:54 嘘，在学习呢 阅读(271) 评论(0) 推荐(0) 编辑
在Vue中使用animate.css
摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在Vue中使用animate.css</title> <script src="./vue.js"></script> <link rel="stylesheet" type="t 阅读全文
posted @ 2019-12-20 10:58 嘘，在学习呢 阅读(540) 评论(0) 推荐(0) 编辑
Vue中的css动画
摘要： 在需要设置动画的标签部分用transition包裹起来。可添加name属性。Vue自动给标签在某个时间点上添加类名。 没有name值，css默认前缀名为"v" 隐藏到展示 开始有fade-enter,fade-enter-active,(第0帧未动)——第1帧fade-enter 去除，新增v-en 阅读全文
posted @ 2019-12-20 10:43 嘘，在学习呢 阅读(722) 评论(0) 推荐(0) 编辑
动态组件与v-once指令
摘要： 动态组件 Vue内置<component :is="name"></component>根据is属性绑定Vue实例中data里面对应的数据名，动态切换组件，然后自动加载不同组件。 <body> <div id="root"> <!-- <child-one v-if="type 'child-one 阅读全文
posted @ 2019-12-20 09:57 嘘，在学习呢 阅读(154) 评论(0) 推荐(0) 编辑
2019年12月19日
在Vue中使用插槽
摘要： 在Vue中使用插槽 组件的template里可以在任意位置添加<slot></slot>,slot为标签，称为插槽，像是一个借口，接受html数据。 具名插槽，slot标签可以添加name属性，用与区分组件中不同插槽 <slot name="header"></slot> <slot name="h 阅读全文
posted @ 2019-12-19 21:07 嘘，在学习呢 阅读(198) 评论(0) 推荐(0) 编辑
非父子组件间的传值
摘要： 非父子组件间的传值 1.Vuex 2.总线机制（Bus/发布订阅模式/观察者模式/） Vue.prototype.bus=new Vue(); 让原型属性bus指向一个Vue实例，让其充当非父子组件之间传值的桥梁，相当于计算机各种功能部件之间传送信息的公共通信干线（总线Bus） 1.给Vue类加上原 阅读全文
posted @ 2019-12-19 20:46 嘘，在学习呢 阅读(238) 评论(0) 推荐(0) 编辑
给组件绑定原生事件
摘要： 组件上绑定原生事件： 1.在父组件绑定事件（@click.native="handle"） 2.在vue实例中的methods定义事件函数 <body> <div id="root"> <child @click.native="handleClick"></child><!-- 加上native为 阅读全文
posted @ 2019-12-19 17:35 嘘，在学习呢 阅读(353) 评论(0) 推荐(0) 编辑
组件参数校验和非props特性
摘要： 组件参数校验 如果父组件定义content=""属性，引号表示的是一个字符串，只有：content=""的形式，引号里才表示一个js表达式。 参数校验： 属性名：{ type:[数据类型1，数据类型2]或单独的数据类型 required:Boolean,//是否必传 default:'default 阅读全文
posted @ 2019-12-19 16:35 嘘，在学习呢 阅读(244) 评论(0) 推荐(0) 编辑
父子组件间的传值
摘要： 父子组件间通信 父组件-->子组件 1.父组件通过给子组件添加属性给子组件传值，子组件通过props来接受。 2但是要在属性前加“：”，即使用v-bind指令，才能使属性值是js代码，不然就是字符串。 3.单项输出流。即子组件不允许修改父组件传递的值，只能使用，不能修改。 父组件通过属性向子组件传值 阅读全文
posted @ 2019-12-19 12:25 嘘，在学习呢 阅读(258) 评论(0) 推荐(0) 编辑
使用组件的细节点
摘要： 1.is可解决h5页面的小bug。 tr与tbody在页面显示变成同级 错误代码如下： <body> <div id="root"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </div> <script> Vue.co 阅读全文
posted @ 2019-12-19 11:27 嘘，在学习呢 阅读(133) 评论(0) 推荐(0) 编辑