BnuzLeon-CSDN博客

原创 Vue学习与总结

VueKick off VueHi , 大家好，我是Leon。以下是我学习Vue的笔记，分享给大家，之后会持续更新。非常欢迎大家提出意见和纠正我的错误。一起进步，谢谢大家。TEMPLATETemplate的基础使用代码笔记$refs的使用代码笔记props的使用代码笔记props的校验代码笔记...

2019-02-12 23:28:23 208

原创 Docker + Mysql 搭建主从数据库

搭建主从数据库前期准备安装docker for 安装数据库安装Kitematic for docker的client安装navicat for 访问数据库搭建流程版本docker (18.03.1-ce-win65)mysql images (5.7.20)搭建主数据库下载镜像docker pull mysql:5.7.20准备配置目录C:\Users\...

2019-04-17 21:19:59 390

原创 [Vue] Vue的JS动画以及velocityjs的使用

Vue的JS动画以及velocityjs的使用例子参考代码：code实现功能：1. Vue的js动画的使用2. Velocityjs的使用使用思路引入<script src="../../libs/velocity.min.js"></script>html<div id="root"> <transition m...

2019-02-17 22:29:42 431

原创 [Vue] 封装过渡组件

封装过渡组件例子参考代码：code实现功能：封装过渡组件使用思路html<div id="root"> <fade :show="show"> <div>封装组件</div> </fade> <fade :show="show"> &lt

2019-02-17 22:28:31 1019

原创 [Vue] 多个元素和组件的过渡

多个元素和组件的过渡例子参考代码：多个元素的过渡多个组件的过渡实现功能：1. 多个元素的过渡2. 多个组件的过渡多个元素的过渡html<div id="root"> <transition mode="out-in"> <button v-if="isEditing" key="save" @click="cli

2019-02-17 22:27:44 758

原创 [Vue] 列表过渡

列表过渡例子参考代码：code实现功能：列表过渡使用思路html<div id="root"> <transition-group mode="out-in"> <div v-for="item in items" :key="item.id"> <div>{{item.name

2019-02-17 22:26:43 339

原创 [Vue] 初始渲染的过渡

初始渲染的过渡例子参考代码：初始渲染的过渡实现功能：1. 初始化渲染的过渡，就是页面一刷新就进入过渡渲染使用思路html<div id="root"><transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" ...

2019-02-17 22:26:07 1731

原创 [Vue] Vue中css的动画原理

Vue中css的动画原理例子参考代码：code实现功能：1. Vue实现过渡效果2. 过渡效果原理3. 过渡类名4. 自定义过渡类名Vue实现过渡效果1. DOM节点<div id="root"> <transition name="fade"> <div v-show="show">Hello Animation</

2019-02-17 22:25:17 287

原创 [Vue] Vue使用css样式已经animate.css的使用

Vue使用css样式已经animate.css的使用例子参考代码：code实现功能：1. Vue利用@keyframes实现自定义样式2. Vue使用animate css库样式@keyframes实现Html<div id="root"> <transition name="fade"> <div v-show="show">H..

2019-02-17 22:23:42 577

原创 [Vue] 动态组件以及v-once的使用

PROPS例子动态组件：codev-once指令： code实现功能：点击Change按钮，切换child-one和child-two组件。动态组件实现1. 创建组件Vue.component('child-one',{ template: '<div>child-one</div>'})Vue.component('child-two'...

2019-02-15 00:38:05 432

原创 [Vue] 作用域卡槽的使用(slot-scope)

SLOT SCOPE例子参考代码：code实现功能：由父组件决定子组件中循环的模式，使用"作用域卡槽"实现作用域卡槽思路1. 组件中准备数据data:function(){ return{ list:[ { id:1, name:"Leon" },{ id:2, name:"Yannis" } ] }}2...

2019-02-13 23:58:36 1110

原创 [Vue] 组件卡槽的使用

SLOT例子参考代码：code实现功能：两种方法实现父组件往子组件中传入DOM节点1. 属性传值（不推荐）2. Slot插槽使用（推荐）属性传值（不推荐）思路（注意：这是一个错误例子）1. 声明组件var childOne = { template: '<div>Hello {{content}}</div>'}2. 属性传入&lt...

2019-02-13 23:26:53 1550

原创 [Vue] 非父子组件之间的传值

NON PARENT CHILD COMPONENTS DATA TRANSFER例子参考代码：code实现功能：点击Child1，改变Child2的属性。点击Child2，改变Child1的属性。1. 兄弟组件之间的传值。2. 祖父和孙子之间的传值。方法1：思路使用Vuex来实现非父子组件的传值。这里先不实现，但是是一个实现的思路。方法2：思路1. 使用...

2019-02-13 22:37:07 381

原创 [Vue] 给组件绑定原生事件

NATIVE EVENT例子参考代码：code实现功能：给组件绑定原生事件的两种实现方法方法一注意声明一个组件：var child = { template: '<div>Click</div>',}使用组件并且绑定事件：<child @click="handleClick"></child>事件方法实现：m...

2019-02-13 00:31:44 521

原创 [Vue] props校验以及自定义validator

Validation例子参考代码：code实现功能：poc各种props的validation的用法使用思路限制String类型传值：&lt;valid-two :content="2"&gt;&lt;/valid-two&gt;使用：var validTwo = { props: { content : String }, template: '&l

2019-02-12 23:37:39 5179 1

原创 [Vue] props的使用

PROPS例子参考代码：code实现功能：通过属性给模板赋值使用思路通过标签属性传值&lt;child content="Hello props"&gt;&lt;/child&gt;通过props来接收传值props: ['content'],template:'&lt;div&gt;{{content}}&lt;/div&a

2019-02-12 23:36:09 3044

原创 [Vue] ref的使用

TEMPLATE REFS例子参考代码：code实现功能点击Copy按钮，复制 'Hi, I am Leon'ref的使用思路自定义templateVue.component('ref',{ data: function(){ return { content: 'Hi, I am Leon' } }, template: '<div>{{c...

2019-02-12 23:35:35 359

原创 [Vue] Template的基础使用

TEMPLATE BASE例子参考代码：code实现功能自定义模板并且使用Template的声明与使用声明Vue.component('row',{ data: function(){ return { content: 'Hi, I am Leon' } }, template: '<tr><td>{{content}}<...

2019-02-12 23:34:37 1077

BnuzLeon的博客