摘要：
（前言：最近有时间，又打开webpack，看了下。） 有一处小坑，记录下： webpack网站-》指南-》管理资源-》加载css 内容如下： module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], }, 阅读全文
摘要：
Demo浏览： 说明： 1，使用了指令, v-drag 2，bug1，单击时，已经拖离初始位置的方块会弹回原位 3，bug2，点击时，左上角会出现一个方块的阴影 4，写指令时，发现指令中是无法访问data中的数据的 5，尝试使用v-if指令来动态生成/销毁移动时的阴影方块，则又涉及到如何向自定义指令 阅读全文
摘要：
在线demo 写在前面： 1，应该要划分了几个组件， 2，用指令来，而不是大量使用ref引用元素，直接操作元素要用指令 3，把原生写成的app转换为vue，这个是最累的，感觉精疲力尽了 有精力的时候，重构吧，先做个记录： <template> <div id="app"> <div id="box" 阅读全文
摘要：
DEMO在线浏览 需求： 向右滑动按钮，按钮移动至可滑动间距的一半距离或全部，则界面跳转至解锁后的页面。 解析： 1，初始界面为手机锁屏界面，下方为了向右的箭头按钮 2，按住按钮向右滑动，如滑动距离不过半，松开鼠标后按钮向左返回初始位置，如距离过半或全部，则界面跳转至解锁页面。 3，原作中，直接操作 阅读全文
摘要：
DEMO在线浏览： 改写过程是需留意之处： 1，点击按钮后，需注销掉所有可能存在的冒泡至document上的各类事件（click, mousedown,mouseup)以及 2 个按钮上的mousedown和mouseup事件 2，因为需要直接操作dom元素，所以给元素设置了ref，或许应该使用指令 阅读全文
摘要：
书中 p50 的函数 totalPrice(){ var total = 0; for(var i=0; i <this.list.length;i++){ var item = this.list[i]; total += item.price * item.count; } return tot 阅读全文
摘要：
《Vue.js实战》 一书 p102 有一个判断参数值是否为数值的正则表达式，援引如下： function isValueNumber(value) { return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + 阅读全文
摘要：
《Vue.js实战》 一书 p102 有一个判断参数值是否为数值的正则表达式，援引如下： function isValueNumber(value) { return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?{1}$)/).test(value + 阅读全文
摘要：
1 设计一个通用组件的思路，首先，在写代码前一定要明确需求，然后规划好API 。一个Vue 组件的API 只来自props 、events 和slots ，确定好这3 部分的命名、规则，剩下的逻辑即使第一版没有做好， 后续也可以迭代完善。但是API如果没有设计好，后续再改对使用者成本就很大了。 （摘 阅读全文
摘要：
新年后重装系统，重装vue-cli，运行项目，发现无法使用 console 根据提示，原来是eslint禁了此函数的使用。 解决办法： 找到项目文件夹内的 package.json文件，打开，找到 "rules":{} 修改为： 问题解决！ 阅读全文