02 2017 档案
摘要：地址：链接
阅读全文
摘要：参考地址：链接 +表示下一级元素，>表示子元素
阅读全文
摘要：1、布局视口，为了把网页在手机上显示，先创建一个虚拟的页面（布局视口），把页面显示出来，这个视口一般设为960宽度（或者更高），然后根据不用的手机，进行相应的缩放，这样就可以把一个页面显示在手机上（缩放不会改变它的大小） 2、可视视口 默认宽度是手机的宽度，也就是手机屏幕设备的宽度 页面在手机上显示
阅读全文
摘要：优点： 一、减少工作量 1、网站、设计、代码、内容都只需要一份 2、多出来的工作量只是JS脚本、CSS样式做一些改动 二、节省时间，互联网领域，时间最重要，有时候一个项目发布的晚了，就会失去市场 三、每个设备都能得到正确的设计。市场上的不同设备，甚至未来出现的新设备，都可以使用，能够面向未来 四、不
阅读全文
摘要：1、flexible grid laout 弹性网格布局 2、flexible image 弹性图片 3、media queries 媒体查询 响应式网站是一个设计理念，它是多项技术的综合体 响应式网站不等于弹性布局
阅读全文
摘要：vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的intec
阅读全文
摘要：vue完成项目后，如何打包成静态文件， 打包： 1、vue.config.js配置，如果用默认的，打包以后，会找不到文件 // 公共路径(必须有的)publicPath: "./",// 输出文件目录outputDir: "dist",// 静态资源存放的文件夹(相对于ouputDir)assets
阅读全文
摘要：打包的时候，把static里面的文件全部拷贝到dist的static里面
阅读全文
摘要：参考地址：http://cn.vuejs.org/v2/guide/transitions.html vue2.0，要想实现过渡效果，要用transition组件 代码： <div id="demo"> <button v-on:click="show = !show"> Toggle </butt
阅读全文
摘要：案例分析： 1、中间文字居中 2、文字俩边有横线 横线无法固定宽度，因为在大屏手机上，容易出现Bug，宽度不够，俩边会出现大量空隙 解决办法，使用flex布局（网站链接） 代码： 写在<style></style>内才会生效。在html中添加style属性是不会添加兼容性代码的
阅读全文
摘要：代码： 在chrome运行： beforeCreate dom、data数据初始化之前 created data数据初始化完成，dom没有初始化 beforeMount dom初始化完成 mounted data数据挂载到dom上 在浏览器中运行testVue.message="zhaobao";
阅读全文
摘要：1、俩个span之间会有间隙，解决办法，在父类设置font-size:0，或者是：代码里面，俩个span中间的空格删掉 2. 俩个并列的span有时会出现这种情况，解决办法，给第一个span设置vertical-align:topevent.target 3、event.target 返回事件的目标
阅读全文
摘要：参考地址：http://www.imooc.com/learn/680 标准盒模型 元素尺寸 可视尺寸-clientWidth（标准）——就是上图中的border box包含的尺寸。 占据尺寸-outerWidth（YY，jQuery里面是有这个方法的）——就是上图中的margin box包含的尺寸
阅读全文
摘要：1、dev-server.js 是webpack打包入口，所以在这个里面引入模拟数据 2、dev-server.js里面调用数据，记住要写在var app=express()后面，不然会出错 3. 4、vue.js里面的computed,就是实时计算,可以把其他页面传过来的值进行计算，然后通过v-b
阅读全文
摘要：eslint规则默认是没有;号的，如果也没要加;号，那就要在.eslintrc.js里面，加配置： 'semi':['error',always'] 强制有;号，没有就报错 参考地址：http://eslint.org/docs/rules/semi 看里面的 options
阅读全文
摘要：注意项目中的这个，它的作用是： 在js里面，new 一个对象，需要赋值给某个值（变量），用Vue实例化的时候，不需要赋值给值（变量），所以要单独给配一条规则，给new Vue这行代码上面加这个注释，把这行代码规则的校验跳过，通过eslint-disable。eslint的常用技巧之一
阅读全文
摘要：eslint “eol-last”:0 文件末尾强制换行（就是代码结尾处，要来个空格，相当于加一行，设置为0就可以了） ./src/main.js error eol-last Newline required at endoffile but notfound /Users/xxx/site/xx
阅读全文
摘要：因为header在HTML5里面是个原生的标签，所以在开发的时候会提示错误，解决方法：修改components里面左边的header
阅读全文
摘要：（1）、把边框设置为absolute,使用after,定义宽度为1px（mixin.styl） （2）、通过@media,判断不同的dpi,来改变相应的Y轴宽度（base.styl），定义公共class border-1px，在用到1px边框的地方，加上border-1px 设备像素 又叫物理像素
阅读全文
摘要：1、cmd ipconfig，获取无线局域网里面的ip地址 把localhost改成当前电脑的IP 把ip:8080/#/goods复制到草料二维码里面（地址：http://cli.im/），生成二维码，然后用手机微信扫描，手机和电脑必须是同一个局域网
阅读全文
摘要：通过icomoon和svg文件，制作图标字体 icomoon官网：链接 1、打开官网 2、点击右上角 3、点击左上角 4、导入svg文件 5、选中生成的图标 6、点击右下角 7、点击，修改名称 8、修改名称和其他的信息，除了名称，其他一般默认即可 9、点击下载 10、使用的时候，把fonts文件和s
阅读全文
摘要：用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，经常修改之后在浏览器刷新没反应，偶尔才会有刷新，需要重新跑一遍npm run dev才会更新，这是怎么回事呢？ webstorm保存的时候会先保存到旧时文件中，其实并没有真正保存，要在setting->stys
阅读全文
摘要：1、安装vue插件,方法 Setting->Plugins,点击Plugins,在右边输入vue，找到相应插件，然后安装 2、创建vue模板 注意红圈里面的 3、设置vue文件支持的样式 注意：这个设置后没效果，是因为2里面的reformat according to style没有取消掉 4、vu
阅读全文
摘要：参考地址：链接 build webpack配置相关 config webpack配置相关 node_modules npm install 安装的依赖代码库 src 存放项目源码 static 存放静态资源 .babelrc babel的一些配置，大部分浏览器是不能支持ES6的，所以通过babel转
阅读全文
摘要：webpack 地址： https://github.com/vuejs-templates/webpack 注意里面的template，用webpack创建的项目，结构就是这样的
阅读全文
摘要：Vue-cli是Vue的脚手架工具 vue-cli 地址：https://github.com/vuejs/vue-cli 安装 npm install -g vue-cli 使用 vue init webpack my-project
阅读全文
摘要：1、数据驱动 只要改变数据，Vuejs会通过Directives指令对DOM进行封装，当数据发生变化，会通知相应的DOM进行变化 Vuejs会对DOM进行监听，通过DOMListeners监听视图的变化，通知数据进行改变，这样就实现了数据的双向绑定 数据相应原理 现在有一份a.b的数据，当vue对象
阅读全文
摘要：当数据发生变化时，ViewModel就会检测到，然后通知相应的View改变 当用户操作View时，ViewModel就会检测到，然后Model，修改相应的数据，最终实现双向绑定 适用场景：针对具有复杂交互逻辑的前端应用；提供基础的架构抽象；通过Ajax数据持久化，保证前端用户体验（好处：当对前端进行
阅读全文
摘要：一、absolute和float有相同的特性，包裹性和破坏性 1、absolute和float的相似(看下面的demo，如果图片在左上角，那么用float和absolute都一样) 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"
阅读全文
摘要：一、relative对absolute的限制作用 1、限制left/top/right/bottom定位。absolute默认是在也没的左上角，当父类设定为relative,absolute就被限制在父类的区域内，设定top/left/right/bottom时，起始点为父类的左上角 2、限制z-i
阅读全文
摘要：第一种方式： //IE浏览器 .clearfloat{ zoom:1} //其他浏览器.clearfloat ; after{ display:bloak; clear:both; content:""; visibility: hidden; height:0} 第二种方式：更优雅的 //IE浏览
阅读全文
