03 2019 档案

Vue 单选框与单选框组 组件
摘要：radio组件 v-model ： 通过当然绑定的值与input上的value值来确定当前选中项。 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父作用域,告知当前选中项.(自定义组件 v-model 数据双向绑定) radioGroup组件 把ra 阅读全文
posted @ 2019-03-29 16:44 破壳而出的蝌蚪 阅读(10843) 评论(0) 推荐(0)
js 控制随机数生成概率
摘要：基本思路：把Math.random()生成的数看着百分比，然后定义每个整数值取值范围。 // 引用gl 百度网盘： 链接：https://pan.baidu.com/s/1Q8Ww3siWq9xHQ5KPPz_azQ 提取码：oyzr 复制这段内容后打开百度网盘手机App，操作更方便哦 阅读全文
posted @ 2019-03-20 15:09 破壳而出的蝌蚪 阅读(2231) 评论(1) 推荐(0)
Vue slot插槽
摘要：插槽用于内容分发，存在于子组件之中。 插槽作用域 父级组件作用域为父级，子级组件作用域为子级，在哪定义的作用域就在哪。 子组件之间的内容是在父级作用域的，无法直接访问子组件里面的数据。 插槽元素 <slot></slot> 或 <slot name="名称">默认值</slot> 1：如果定义了sl 阅读全文
posted @ 2019-03-12 15:58 破壳而出的蝌蚪 阅读(439) 评论(0) 推荐(0)
vue 组件通信
摘要：组件 组件之间的数据是单向绑定的。 父组件向子组件通信 是通过子组件定义的props属性来实现。通过props定义变量与变量类型和验证方式。 props简化定义 在简化定义中，变量是以数组的方式定义。 props完整定义 完整定义是采用字面量形式，type 要定义的类型 通信方式 父组件向子组件定义 阅读全文
posted @ 2019-03-11 21:43 破壳而出的蝌蚪 阅读(355) 评论(0) 推荐(0)
vue中computed计算属性与methods对象中的this指针
摘要：this 指针问题 methods与computed中的this指针 应该指向的是它们自己，可是为什么this指针却可以访问data对象中的成员呢？ 因为new Vue对象实例化后data中的成员和computed中的成员为实现化对象属性了，而methods中定义的方法为实现化对象方法了。这时thi 阅读全文
posted @ 2019-03-09 21:07 破壳而出的蝌蚪 阅读(3692) 评论(0) 推荐(0)
ES6 Module export与import复合使用
摘要：export与import复合使用 基本语法 export {...} from '文件'; 等价于 import {...} from "文件"； export {...} 先加载模块，然后重定义输出。 重定义输出名 重定义默认变量名 整体输出 export * 整体输出是输出 a.js中定义的所 阅读全文
posted @ 2019-03-08 23:48 破壳而出的蝌蚪 阅读(832) 评论(0) 推荐(0)
es6 Moduel 默认名与非默认名
摘要：export default default 本质是将后面变量（值）赋给 default，然后以default名称输出。 import 在获取default变量时，写在大括号的外面 ，可自定义名称。 变量写法 函数写法 匿名写法也可以用于非匿名函数，不过在模块外func1函数名无效，并且视为匿名函数 阅读全文
posted @ 2019-03-08 22:47 破壳而出的蝌蚪 阅读(366) 评论(0) 推荐(0)
es6 Module语法
摘要：export 命令 1、概念 export用于定义要输出的变量（let、var、const、function、class）,定义的变量与值是动态绑定关系。 2、命令格式 1、 export 变量定义 2、 export { 变量名 [ as 另名} ,…} 3、 export default 匿名定 阅读全文
posted @ 2019-03-07 16:57 破壳而出的蝌蚪 阅读(454) 评论(0) 推荐(0)
flex页面布局练习--知乎
摘要：采用flexbox弹性容器 在手机端进行页面布局 样本地址： http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E9%9D%A2-Flexbox/flex%E5%B8%83%E5%B1%80%E7%BB%83%E4%B9%A0-% 阅读全文
posted @ 2019-03-07 12:59 破壳而出的蝌蚪 阅读(1106) 评论(0) 推荐(0)
flex练习---纵横中文网
摘要：采用 flexbox 弹性容器进行布局，只做练习用。 浏览器打开时切换到手机模式。 样本地址： http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E9%9D%A2-Flexbox/flex%E7%BB%83%E4%B9%A0-%E 阅读全文
posted @ 2019-03-06 22:54 破壳而出的蝌蚪 阅读(402) 评论(0) 推荐(0)
flex 实例 豆瓣手机端布局实现
摘要：0、最终成品 1、头部布局实现 1：设置module-header为弹性容器，可采用两端对齐或把m-left设置为主轴起点边缘对齐、把m-right设置为主轴终点边缘对齐 2：左、右两边可能存在多项，那么在把它们两块设置为弹性容器 3：考虑到弹性项目大小可能不一样，可设置为垂直居中。 2、多行双排并 阅读全文
posted @ 2019-03-05 12:34 破壳而出的蝌蚪 阅读(659) 评论(0) 推荐(0)
flex-手机端主页布局实例---构造页面结构
摘要：Flexbox页面布局实例，成本效果图如下， 源码下载在最下面。 源码下载：https://pan.baidu.com/s/18o5hVuWtflUpgvMk3LzQ5w 提取码：wiyc样本地址：http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF% 阅读全文
posted @ 2019-03-03 23:09 破壳而出的蝌蚪 阅读(833) 评论(0) 推荐(0)
flex-骰子布局
摘要：弹性容器单行：主轴居中，交叉轴居中。 弹性容器单行；主轴两端对齐；交叉轴一个为起点边缘；一个为终点边缘； 单选；主轴两端对齐；交叉轴一个为起点边缘；一个为居中对齐；一个为终点边缘； 1：弹性窗口设置为多行，交叉轴为两端对齐 2：每行基础大小设置为100%，然后每个子行主轴为两端对齐 在4的基础上增加 阅读全文
posted @ 2019-03-03 14:09 破壳而出的蝌蚪 阅读(902) 评论(0) 推荐(1)
align-content 与 align-items 区别
摘要：align-content 和 align-items ： 1：共同点：它们对齐方向为交叉轴 2：不同点：align-content 应用于为 多行 而 align-items:应用于单行。 单行对齐例子： 多行对齐例子 阅读全文
posted @ 2019-03-03 12:42 破壳而出的蝌蚪 阅读(1754) 评论(0) 推荐(1)
flex 圣杯布局
摘要：基本思路 圣杯布局分为3段：上、中、下。 中段被分为：左、中、右3块。 1：采用flex布局时，先把弹性容器主轴设置为垂直方向（flex-direction:column） 2：上、中、下3块弹性项目设置均匀拉伸（flex:1）或固定上、下两端大小，让中间自动拉伸。注意：flex:拉伸是方向为主轴方 阅读全文
posted @ 2019-03-02 20:35 破壳而出的蝌蚪 阅读(809) 评论(2) 推荐(0)
flex 输入框布局
摘要：1：创建一个弹性容器(display:flex) 2：构建2个或3个弹性项目. 3：把弹性项目设置为居中对齐.(align-items:center) 4：改变input自身对齐方式，把它设置为拉伸以适应容器（align-self:stretch）。 实例： 阅读全文
posted @ 2019-03-02 20:00 破壳而出的蝌蚪 阅读(1090) 评论(0) 推荐(0)
flex 增长与收缩
摘要：flex：auto 将增长值与收缩值设置为1，基本大小为 auto 。 flex：none. 将增长值与收缩值设置为0，基本大小为 auto 。也就是固定大小。 增长： 基本大小 + 额外空间 *（增长系数 / 增长系数总和） 按比例划分额外空间，然后各自分配。 缩小： 基本大小 – 溢出大小 *（ 阅读全文
posted @ 2019-03-01 17:48 破壳而出的蝌蚪 阅读(388) 评论(0) 推荐(0)
弹性布局 - flex对齐
摘要：flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。 主轴 justify-content justify-content对齐方式共有5种对齐方式： flex-start ：主轴起点边缘开始，从左向右。 flex-end ：主轴终点边缘开始，从右向 阅读全文
posted @ 2019-03-01 15:49 破壳而出的蝌蚪 阅读(2803) 评论(0) 推荐(0)