2017年06月_大力酱

原创 sass入门：安装环境及简单用法

一、初步了解sasssass是css预处理器之一。css预处理器是专门处理css的编程语言，编程中无需考虑浏览器的兼容性，使语法简洁、可读性和适应性强。sass下还分sass版和scss版：①sass以.sass为文件名结尾，有严格的缩进式语法规范，不需要大括号和分号；②scss以.scss为文件结尾，语法和css语法类似（推荐使用）。二、安装sass环境①安装ruby

2017-06-28 15:40:44 896

原创 vue2+webpack+express 简单入门：从前端到后台

本文只是简单的入门，介绍怎样快速建立项目，利用路由切换页面；写接口，前端调用接口等。默认全局已安装：nodenpmvue-cli1、进入一个空文件夹，初始化名为vue-demo项目。2、进入项目文件内，下载基础依赖包以及vue-router（路由），vue-resource（vue封装的ajax请求）看到这个页面就好了。

2017-06-22 10:07:09 7825 1

原创 vue学习：解决Atom中的 * is only available in ES6(use 'esversion: 6') 问题

官方下载了vue的简单项目，用Atom打开main.js，代码前出现黄点，js报错了在代码语句后加上分号，减少一个黄点，但还报错把鼠标移至import的波浪线上，出现提示：W119 - ‘import’ is only available in ES6(use 'esversion: 6') .意思是import属于ES6的语法，当前页面不能用。在页面上加上 /* jshin

2017-06-19 16:50:51 10444 1

原创 vue学习：解决vue变量未渲染前代码显示问题

在vue变量未渲染前，会有一瞬间显示代码，影响代码美观。vue有现成的指令来解决这个问题：v-cloak在css中加入：[v-cloak]{ display: none;}在需要元素加上： {{demo}}这样，v-cloak所在元素下的变量在未渲染前不会显示。

2017-06-16 14:52:56 10882

原创 vue学习：编辑器Atom配置语法高亮

用Atom打开一个vue项目，并不支持vue语法，所有的标签都是灰的。打开File->Settings->Install,搜索vue会出来一堆插件，安装language-vue-component。ok了。

2017-06-12 11:15:36 19480

原创 angular指令：实现复制到剪贴板功能

找过clipboard 和 ngclipboard两个插件，建过简单的demo测试都是可以的，一旦用到项目中就各种报错，项目是angular + require搭建的，查阅了各种资料，终于找到了相对简单的指令实现方法。var myApp = angular.module('app',[]);myApp.directive('ngCopyable', function($document) {

2017-06-08 10:14:50 6898 2

原创 clipboard: 实现复制到剪贴板功能

这几天做项目用到复制到剪贴板功能，发现这个插件挺好用的。奉上demo传送门①引用插件②html点我复制③给id为copyBtn的元素初始化new Clipboard('#copyBtn');就是这么简单。

2017-06-08 09:48:58 400

原创 javascript:自定义弹窗的写法

项目中经常出现广告弹窗，记录下简单弹框写法。基本html结构： css:.popBox-mask{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; opacity: .6; z-index: 999; background-co

2017-06-07 14:39:06 4525

原创 angular指令：弹框点击空白处隐藏

指令：app.directive('onBlankHide',function(){ return{ restrict:'A', scope: { pop: '=' }, link: function(scope,element,attr){ element.on('click'

2017-06-07 13:19:22 4478

不吃菠菜的大力