blog
blog copied to clipboard
wuweijia
记录工作与生活
> 在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。 > **不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined...
### Atom 支持 开发配置文件 ``` vim ~/.atom/keymap.cson ``` 添加下面的配置 ``` 'atom-text-editor[data-grammar~="vue"]:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab' ``` 修改小程序框架配置文件 wepy.config.js **wpyExt** 字段 ``` wpyExt: '.vue', ``` 同时修改eslintrtc.js 文件的检查配置 **setting** ``` settings: { 'html/html-extensions': ['.html',...
### 美团开源小程序框架（mpvue）VS 小程序官方框架（wepy） ## 小程序实现原理  --------- # 几个问题 - 为什么要调研美团的mpvue小程序框架？ - 框架之间怎么做选择？ - 为什么我会选择要使用xxx框架？ ### 当初为什么用wepy？ - 我们选择wepy的时候没有横向对比的产品，我们只能使用wepy，而且是由官方提供（大厂开发靠谱） ### 为什么调研mpvue框架？ - 这款框架在前两周刚刚开源，好评不断。 - 在使用过程中遇到了问题。希望通过框架对比在框架上避免问题，解决问题。 ### mpvue是什么? mpvue 是一套定位于开发小程序的前端开发框架，其核心目标是提高开发效率，增强开发体验。使用该框架，开发者只需初步了解小程序开发规范、熟悉 Vue.js...
### 安装两个依赖包 `npm install --save-dev node-sass sass-loader` ### 修改 nuxt.config.js 可以使用 `@import "~/assets/css/mixin"` 形式引入scss // nuxt webpack 默认不支持 scss 的简写@ 符号 和 ~ 符号 ``` build: { extend(config) { //...
_tips: 阅读时间约为10分钟_ keywords： 组件库、 vue、 web component。 ### 为什么要做 ？ 1. 公司的业务迭代逐渐平稳，样式多变性逐渐消失，UI模块化已经形成规范。 2. 开发人员不知道已经存在哪些组件，容易出现重复造轮子的情况。 3. 易于管理和维护 4. 独立部署之后UI也可以看到组件库写了哪些组件，方便设计的工作。 ### 应该具备哪些功能 #### 1. 可视化 一个组件库一定要有一个可以预览组件的地方 #### 2. 文档 每个组件都要有一个说明文档
## 组件的抽象标准： 1. 抽象力度（父级可控属性，是否写入组件，如组件的显示隐藏，组件定位的位置是否传值：eg：国编码选择组件） 暂定：父级控制外在表现 2. 组件的拆分力度 （这个情况需要两个及以上人讨论，具体情况具体分析）。 3. 组件的注释说明要详细，需要使用者不需要过多的关注代码逻辑本身。 4. 如果使用者需要修改组件应尽量将组件提交给原作者review。 5. 事件 ### slot使用   ***这个地方解决了有些特殊页面不带有`约`这个字很灵活。** ### 例：我们现在要封装一个alert组件 - 有些地方是否要支持可以传html模板 ``` {{title}} {{buttonText}} ``` 1. 我们发现唯一特别的是对content体中的定义了一个solt。这个slot就是组件模式和插件模式的区分。如果我们想对slot里面定义的是一个额外的展示模板或其它组件插入的话，此时只能用组件模式。 2....
### 响应式系统的依赖收集追踪原理 ```js class Vue { constructor(options) { this.data = options.data observer(this.data) // 监控数据 new Watcher(); // 这一步仅仅只是告诉发布者我是谁,真正的订阅发生在数据被引用的时候 } } // 订阅者 ---- 每一个引用数据的都是订阅者 class Watcher { constructor() { //...
# 如何在移动端禁止浏览器屏幕滚动 有时候我们希望弹出一个遮罩层后屏幕是不能滚动的。 > 这个问题在pc端一条css属性就可以fix,但是手机上却不能这样使用. ```css body {overflow: hidden} ``` > mobile 方案 禁止： ``` document.body.style.position = 'fixed';``` 恢复： ``` document.body.style.position = 'static';```
### html5 标签 marquee 已经被废弃 建议使用css3动画实现 ```css3 .marquee { position: relative; top: 60px; width: 内容宽度; z-index: 1; height: 32px; line-height: 32px; font-size: 12px; letter-spacing: 0.4px; text-align: center; color: #28282a; background-color:...