前端
佳多多
.....
展开
-
vue 学习心得--父组件动态修改组件的数据实现
该功能的应用场景: 1.父组件从后台获取道不同的数据,触发子组件的数据更新 2.父组件的视图更新触发子组件动态的获取后台数据,从而实现子组件的数据更新.实现过程: 1.既然是父传子,那么定然会用到props属性 2.在父组件中为子组件绑定自定义属性并赋值(该属性用驼峰命名法) 3.在子组件中使用props 去接受父组件传来的值,同时使用watc...原创 2018-08-07 10:26:35 · 2281 阅读 · 0 评论 -
vue data中数组以及对象 属性改变时不能及时反馈到视图中问题的解决方式
1.vue 对数组更新检测 的机制又很明确的说明:变异方法:Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push()pop()shift()unshift()splice()sort()reverse()2.第二种 方式是使用 VM.$set() 方法去给data中的属性赋予新的值:数组例子 : vm.$set(arry,index,val...原创 2019-02-25 15:52:13 · 602 阅读 · 0 评论 -
yarn 环境安装依赖报错解决方法(info fsevents@1.2.7: The platform "win32" is incompatible with this module.)
个人分类: 前端⚙ Installing CLI plugins. This might take a while…yarn install v1.13.0info No lockfile found.[1/4] Resolving packages…[2/4] Fetching packages…info fsevents@1.2.7: The platform “win32” is...转载 2019-04-12 11:10:22 · 24980 阅读 · 3 评论 -
使用css 3 translate3d 做元素互动滑出动画
1.元素的display 属性的由none 转变为block时,会触发translate3d 动画效果的重新加载;2.translate3d (x,y,z);x,y,z 分别带表水平垂直和z轴的位移3. cubic-bezier 是一个描述动画加载曲线的函数,具体可以参照:http://cubic-bezier.com/#.17,.67,.83,.67// css 样式.div{ ma...原创 2019-04-17 11:32:29 · 3639 阅读 · 0 评论 -
swiper使用 总结
个人觉得swiper 可用于绝大部分的轮播场景,当然也会有更高级的应用,视频传媒的 图片+视频轮播,swiper插件可以很好地解决类需求。使用细节 原生的js 的话 可以在官网中下载js 插件到本地或者是通过CDN引入,js 版本需要和css 版本对应不然容易出问题。 使用vue 框架的需要下载相关依赖(yarn add swiper --save || npm install sw...原创 2019-04-17 11:47:14 · 1185 阅读 · 0 评论 -
百度地图自定义图层
1.百度地图图层的自定义需要结合百度地图的javascript V3.0版本中的 MapStyleV2 方法实现;2.使用百度地图 个性化地图编辑工具 自定义图层 ,下载json 文件;3.在项目中引入json 文件上代码:// 这是一个渲染地图的方法 (setMapStyleV2尽量放到各种控件之后,避免报错) rodomMap(){ const _sel...原创 2019-04-26 16:15:08 · 2164 阅读 · 0 评论 -
布局经验
div使用display:inline-block 元素之间有间隔问题:解决方案:在父元素 上添加属性:font-size:0原创 2019-04-26 16:19:56 · 302 阅读 · 1 评论 -
checkbox样式自定义
原理: 隐藏 input 默认的样式 通过label for input 去映射 checkbox 选中和未选中状态的转换;上代码:// html<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" v-model="checkStatus" @click="toggle"/><labe...原创 2019-04-19 17:24:45 · 418 阅读 · 0 评论 -
常见居中方式 (水平居中——垂直居中)
1.水平居中:1) 子元素:margin : 0 auto2) 使用绝对定位:父元素:position:relative;子元素:position:absolute;left:50%;transform:translateX(-50%);3) 父元素:text-align:center;子元素:display:inline-block;2.垂直居中:1) 父元素:display:...原创 2019-04-29 16:52:41 · 388 阅读 · 0 评论