最近项目中有使用到高德地图，搜了下发现饿了么的 vue-amap 比较知名。不过实际安装使用中发现还是有很多问题的，并不友好。不但要学习 amap 的文档，也还要学习原生高德API文档，还不如直接使用原生来的方便。而这篇教程的目的就是，怎么在vue中使用高德地图APIDEMO：vue-gaode.rxshc.comGitHub:github.com/zuley/vue-g…实现思路创建一个 mapDrag 的公共组件在组件的 created 生命周期，载入高德地图APIAPI载入完成即开始执行地图初始化地图API暴露全局变量 window.AMap 可以直接使用监听地图拖放事件，获得数据后通知自定义事件，对组件外部提供事件接口created 生命周期载入高德地图API载入的方式类似于 jquery 的脚本加载，我这里也是使用了别人封装好的一个加载方法，各位直接使用或者自己改async created () { // 已载入高德地图API，则直接初始化地图 if (window.AMap && window.AMapUI) { this.initMap() // 未载入高德地图API，则先载入API再初始化 } else { await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key;=${MapKe ...继续阅读 (19)

puppeteer 就不多介绍了，就是一个无界面化的谷歌浏览器。 作者本人是前端，后端方面的知识不太擅长，感觉漏洞还是蛮多的。 本教程是作者见猎心喜然后把玩了一下写的，有不合理的地方还请包涵。爬虫思路本例子是使用顺序爬取，没有用并行爬取，并设置了延时器，主要是担心访问频次太高会被屏蔽访问。puppeteer写爬虫感觉思路比别的更简单，按视觉化的流程去走就可以。启动浏览器和打开一个新页面跳转到要抓取数据的页面获取页面上的信息和图片打印信息和保存图片重复 2 ~ 4 步，直到所有页面抓取结束关闭浏览器退出进程爬虫代码要抓取的页面：http://wufazhuce.com/one/35对于要抓取的资源，没有弄复杂的逻辑，根据 URL 推断是按ID排列的。 那么只要对页面 ID 依次累加就行了成功就抓取，错误就跳过。const puppeteer = require('puppeteer'); const fs = require('fs'); const request = require('request'); // 延时器 let timeout = function (delay) { console.log('延迟函数：', `延迟 ${delay} 毫秒`) return new Promise((resolve, reject) => { setTimeou ...继续阅读 (30)

本文仅对一些关键性的知识点进行解释，具体请Fork源码学习。Demo页面如果没啥人的话可以自己新建几个页面复制地址进入，每个页面都是一个独立的访客，兼容PC和移动端访问。Demo 演示Github源码博客原文前端实现前端技术栈Parcel：构建工具，零配置的打包构建工具socket.io：跨平台的WebSocket通信库，具有前后端一致的API，可以触发和响应自定义的事件。前端界面界面布局这个没有啥说的，直接按自己喜好写就行了。也可以直接参照本项目DEMO和源码。socket.io 简介socket.io有前后端一致的API，所以在前端和Node端使用区别不大。socket.io最主要的API是触发和响应自定义的事件，除了connect，message，disconnect这些事件的名字不能使用之外，你可以触发任何自定义的事件名称。下面列出本项目中所使用到的一些自定义事件。socket.io 官网# 客户端触发自定义事件：test socket.emit('test', data) # 服务端响应事件 socket.on('test', data => {}) 复制代码前端触发事件登录聊天室发送消息前端响应事件登录状态系统通知消息发送源码解析连接服务器import io from './assets/js/socket.io' let socket = io('ws://47.9 ...继续阅读 (35)

前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html的font-size因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。原理网上有很多文章分享，这里不具体解释。1、创建rem.js文件很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES6中每个文件都是单独的一个模块。// 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } ...继续阅读 (29)

目前就我所呆的公司来说，前端的发版都是开发完之后执行编译，然后通过ftp上传到服务器中。项目多起来之后，加上测试环境和正式环境的分离，导致管理混乱。而且整个流程也很麻烦，要一步步手动去做。所以一直就有一个想法，能不能做一个像Vue Cli一样的自动化工具，可以通过命令输入命令和选择选项，进行自动化的编译和发版。说干就干立马就开发了一个 ~~~GitHub 地址：https://github.com/zuley/zuley-cli一、技术栈chalk美化命令行，进行着色等commander解析用户命令行输入inquirer命令行交互功能，像用户提问等。node-sshssh 模块ora命令行环境的 loading 效果shelljs重新包装了child_process子进程模块，调用系统命令更方便。二、创建项目直接使用npm init创建一个空项目在根目录创建一个不带后缀的系统文件app，作为主入口文件。三、简单命令行示例在入口文件中输入以下代码const program = require('commander') const inquirer = require('inquirer') const chalk = require('chalk') program .command('module') .alias('m') .description('创建新的模块') ...继续阅读 (29)

原文链接： zhuanlan.zhihu.comDEMO：Vue-color-picker传送门github：项目传送门特点简单易用，UI在原插件基础上优化增加了圆角和过渡动画提供以插件的形式安装提供全局组件提供单独以组件的方式按需引入在支持 html5 input[type=’color’] 的浏览器实现了「更多颜色」的功能获取你可以直接下载整个项目，然后提取其中的/src/plugin/vue-color-picker目录使用。也可以直接只下载插件用法以插件的形式安装// 导入插件 import colorPicker from './plugin/vue-color-picker' // 注册插件 Vue.use(colorPicker) // 在组件的 temelate 中直接使用复制代码以组件的形式安装// 在组件中导入插件 import colorPicker from './plugin/vue-color-picker/colorPicker' // 在组件中注册插件 export default { components: { colorPicker } } // 在组件的 temelate 中直接使用复制代码选项你可以通过在所在的元素上设置以下属性来配置color-pickerdefaultColor：默认颜色，如defaultCo ...继续阅读 (35)

市面上目前已有各种各样的UI组件库，比如Element和iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。以下一个简单的颜色选择器插件vColorPicker讲述从开发到上线到npm的流程。vColorPicker 插件 DEMO一、技术栈如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。Vue-cli3: 新版脚手架的库模式，可以让我们很轻松的创建打包一个库npm：组件库将存放在npmwebpack：修改配置需要一点 webapck 的知识。二、大纲想要搭建一个组件库，我们必须先要有一个大概的思路。规划目录结构配置项目以支持目录结构编写组件编写示例配置使用库模式打包编译发布到npm三、规划目录结构1、创建项目在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。$ vue create .2、调整目录我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。. ... |-- examples // 原 src 目录，改成 examples 用作示例展示 |-- packages // 新增 packages 用于编写存放组件 .. ...继续阅读 (38)

开发Vue项目的时候如果开启了ESLint语法检查，那么就必须遵循严格的语法。比如不能有分号，括号都必须有空格隔开等等。之前就有写过一篇：入门 Vue.js会碰到的常见问题需求我们实际开发的时候，经常会需要引入第三方开发的程序。有些并不能通过 npm 去安装，只能手动的把文件放入项目。而这些项目实际开发的时候并没有遵循严格的ESLint语法。这时候就需要我们手动的去配置ESLint了。使用ESLint是被设计的完全可配置的，可以开关每一条规则，也可以自定义规则。这里不详细解释各个规则的配置方法，只介绍一个简单实用对指定文件不使用ESLint语法检查的方法。整个文件范围内禁止规则出现警告将/* eslint-disable */放置于文件最顶部/* eslint-disable */ alert('foo');在文件中临时禁止规则出现警告将需要忽略的代码块用注释包裹起来/* eslint-disable */ alert('foo'); /* eslint-enable */对指定规则的启用或者禁用警告将需要忽略的代码块用注释包裹起来/* eslint-disable no-alert, no-console */ alert('foo'); console.log('bar'); /* eslint-enable no-alert, no-console */对指定行禁用规则警告此 ...继续阅读 (46)

DEMO：Vue-color-picker传送门github：项目传送门基于Vue2.0的颜色选择器插件特点简单易用，UI在原插件基础上优化增加了圆角和过渡动画提供以插件的形式安装提供全局组件提供单独以组件的方式按需引入在支持 html5 input[type=’color’] 的浏览器实现了「更多颜色」的功能获取你可以直接下载整个项目，然后提取其中的/src/plugin/vue-color-picker目录使用。也可以直接只下载插件用法以插件的形式安装// 导入插件 import colorPicker from './plugin/vue-color-picker' // 注册插件 Vue.use(colorPicker) // 在组件的 temelate 中直接使用以组件的形式安装// 在组件中导入插件 import colorPicker from './plugin/vue-color-picker/colorPicker' // 在组件中注册插件 export default { components: { colorPicker } } // 在组件的 temelate 中直接使用选项你可以通过在所在的元素上设置以下属性来配置color-picker1.defaultColor：默认颜色，如defaultColor="#ff0000"2 ...继续阅读 (25)

今天在写个VUE插件的时候，老是这个报错，找了好久才找到原因 -v-Uncaught TypeError: Cannot assign to read only property 'exports' of object '#Object' at Object.anonymous原因如下：webpack 2中不允许混用import和module.exports解决办法就是统一改成ES6的方式编写即可 ...继续阅读 (48)

还记得在很小的时候，老师问我们以后理想是什么，回家写篇周记交上去。你以为我会写我要当一个大英雄吗？不！我写的是我长大后要当一个科学家，因为这样可以得到表扬。当老师慈祥的看着我说：“乐意同学以后一定会是一个伟大的科学家”的时候，我虎躯一震，排骨样的身板感觉也伟岸了不少，仿佛我已经是一个科学家了一样。但是我想做的并不是科学家，我想做的是行侠仗义的大英雄。爷爷以前有很多藏书，都是很原始的那种版本。都被我偷偷拿出来看了，从《西游记》到《三国演义》，从《笑傲江湖》到天龙八部。一直到初中毕业到县城上学了，课本没有看多少，闲书倒是看了一堆。《天龙八部》里的萧峰是我最喜欢的人物，’剧饮千杯男儿事’一回，他的一出场便是气象万千，英雄了得。喜欢他在聚贤庄一人面对群雄的英雄气概，也喜欢他对阿朱说“阿朱就是阿朱。四海列国，千秋万代，就只有一个阿朱”的儿女情长。对我影响最深远了应该就是《海贼王》了，从一个机械操作工转行设计的时候，没有一个人支持我，包括我的父母，觉得挣的还没有之前的多。给与我坚持的动力的就是贯彻整个《海贼王》的基调“坚持不懈的追求梦想”。让我这么一个按部就班，不喜欢冒险的人，去跨行业转行的时候也是一样的义无反顾。里面给我带来最大感触的还是大反派黑胡子对主角路飞说的一句话“人的梦想，是不会完结的” ...继续阅读 (37)

说明加载searchform.php文件用法php get_search_form($echo); ?参数参数名类型默认说明$echo字符串(可选)true是否打印示例# 加载 searchform.php 文件php get_search_form(); ?参考官方链接：https://developer.wordpress.org/reference/functions/get_search_form/ ...继续阅读 (20)

说明引用模板文件，可以引用自定义名字的文件。如果仅设置了$slug参数，则加载{slug}.php文件如果同时设置了$slug和$name参数，则加载{slug}-{name}.php文件，如果找不到文件则加载{slug}.php文件。用法php get_template_part($slug); ?php get_template_part($slug, $name) ?参数参数名类型默认说明$slug字符串(必须)无调用{slug}.php文件$name字符串(可选)无调用{slug}-{name}.php文件示例# 加载 loop-index.php 文件，如果不存在则加载 loop.php 文件php get_template_part('loop', 'index'); ?参考官方链接：https://codex.wordpress.org/zh-cn:%E8%B0%83%E7%94%A8%E6%A8%A1%E6%9D%BF%E9%83%A8%E5%88%86/get_template_part ...继续阅读 (24)

说明从当前的主题目录加载模板文件sidebar.php。如果指定了名称，那么将加载头部文件sidebar-{name}.php如果当前主题没有sidebar.php文件，将加载默认的wp-includes/theme-compat/sidebar.php用法php get_sidebar($name); ?参数参数名类型默认说明$name字符串(可选)无调用sidebar-{name}.php文件示例php # 如果是首页，则调用 sidebar-home.php 文件 if (is_home()) { get_sidebar('home'); # 如果是404页面，则调用 sidebar-404.php 文件 } elseif (is_404()) { get_sidebar('404'); # 其他的则调用 sidebar.php 文件 } else { get_sidebar(); } ?参考官方链接：https://codex.wordpress.org/Function_Reference/get_sidebar ...继续阅读 (39)

说明从当前的主题目录加载模板文件footer.php。如果指定了名称，那么将加载头部文件footer-{name}.php如果当前主题没有footer.php文件，将加载默认的wp-includes/theme-compat/footer.php用法php get_footer($name); ?参数参数名类型默认说明$name字符串(可选)无调用footer-{name}.php文件示例php # 如果是首页，则调用 footer-home.php 文件 if (is_home()) { get_footer('home'); # 如果是404页面，则调用 footer-404.php 文件 } elseif (is_404()) { get_footer('404'); # 其他的则调用 footer.php 文件 } else { get_footer(); } ?参考官方链接：https://codex.wordpress.org/Function_Reference/get_footer ...继续阅读 (30)

说明从当前的主题目录加载模板文件header.php。如果指定了名称，那么将加载头部文件header-{name}.php如果当前主题没有header.php文件，将加载默认的wp-includes/theme-compat/header.php用法php get_header($name); ?参数参数名类型默认说明$name字符串(可选)无调用header-{name}.php文件示例php # 如果是首页，则调用 header-home.php 文件 if (is_home()) { get_header('home'); # 如果是404页面，则调用 header-404.php 文件 } elseif (is_404()) { get_header('404'); # 其他的则调用 header.php 文件 } else { get_header(); } ?参考官方链接：https://codex.wordpress.org/Function_Reference/get_header ...继续阅读 (29)

/* # 主题名字 Theme Name: Rclean # 主题地址 Theme URI: http://rxshc.com # 主题描述 Description: 主题 # 主题版本 Version: 2.0 # 主题作者 Author: 猪不乐意 # 主题作者链接 Author URI: http://rxshc.com # 主题关键字 Tags: 标签1, 标签2 */ ...继续阅读 (18)

项目地址：https://github.com/zuley/vue2-leancloud第一讲：起步Vue2.0 系列教程：简介Vue2.0 系列教程：npm 常用命令Vue2.0 系列教程：npm package.json 配置文件语法Vue2.0 系列教程：Vue的安装和使用第二讲： 构建环境和安装依赖Vue2.0 系列教程：初始化项目Vue2.0 系列教程：配置路由Vue2.0 系列教程：使用 leancloud 云服务第三讲：开发页面Vue2.0 系列教程：注册页面Vue2.0 系列教程：登录页面Vue2.0 系列教程：首页 OR 退出登录 ...继续阅读 (29)

template 模板<div> 首页 - 已登录用户信息 <ul v-if="users"> <li>用户名：{{ users.username }}</li> <li>创建时间：{{ users.createdAt }}</li> </ul> <el-button type="danger" v-on:click.native="handlelogOut">退出登录</el-button> </div>Script 脚本结构大纲<script> export default { // 数据 data () {}, // 方法 methods: {}, // 组件创建之后 created () {} } </script>数据结构data () { return { users: null } }方法methods: { // 登出函数 handlelogOut () { this.$AV.User.logOut().then(() => { ...继续阅读 (27)

template 模板<el-form label-width="100px" class="demo-ruleForm" v-bind:rules="rules" ref="ruleForm" v-bind:model="ruleForm"> <el-form-item label="账号" prop="name"> <el-input type="text" auto-complete="off" v-model="ruleForm.name" placeholder="请输入账号"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" auto-complete="off" v-model="ruleForm.password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <!-- 点击进行登录提交 --> <el-but ...继续阅读 (38)

template 模板rules里的验证规则是一一对应到<el-form-item>上的prop<el-form>需要绑定整个表单数据<el-input>需要绑定对应的数据<el-form label-width="100px" class="demo-ruleForm" v-bind:rules="rules" ref="ruleForm" v-bind:model="ruleForm"> <el-form-item label="账号" prop="name"> <el-input type="text" auto-complete="off" v-model="ruleForm.name" placeholder="请输入账号"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" auto-complete="off" v-model="ruleForm.password" placeholder="请输入密码"></el-input> </el-form-item> < ...继续阅读 (30)

《如何阅读一本书》读书笔记一个阅读者要提出的四个基本问题（第43页）1.这本书到底在谈些什么？2.作者说了什么，怎么说的？3.这本书说的有道理吗？是全部有道理还是部分有道理？4.这本书跟你有什么关系做笔记的方法（第46页）1.画底线2.在画底线处加画一道线3.在空白处zuo做星号或者其他符号4.在空白处编号5.在空白处记下其他的页码6.将关键字和句子圈出来阅读的四个层次1.基础阅读2.检视阅读3.分析阅读4.主题阅读一、基础阅读能看懂就可以了，略二、检视阅读（第31页）检视阅读中要回答的问题1.这是一本什么样的书2.整本书谈的是什么？3.作者是借着怎样的整体架构，来陈述他的观点的检视阅读一：有系统的略读和粗读1.先看书名页，然后有序就先看序（大概了解概念，进行归类）2.目录页（了解全书大概讲些什么）3.索引（快速评估这本书涵盖的范围，以及作者提到的书籍种类与作者）4.出版介绍（多吹牛夸张的文字，此书往往不好）5.开始挑几个看起来跟主题相关的篇章来看6.随意翻看即便略读检视阅读二：粗浅的阅读从头到尾读一遍，碰到不懂的地方不要停下来查询或思考阅读的速度根据自己的理解情况越快越好，无关紧要的部分可以快读逗留与倒退可以通过手指顺着一行行的移动过去，训练阅读的速度理解的问题这一步可以跳过理解问题，不纠结与细节，最主要的是快读读一遍分析阅读（第60页）分析阅读一：解决第一个问题，这本书在谈些什 ...继续阅读 (60)

一、注册 leanCloud没啥好说的，进入leanCloud 官网，注册账号，然后进入控制台点击项目卡片，右上角的设置按钮，进入应用设置页。再点击进入 应用 Key 页面取得上述图片中的App ID和App Key创建应用进入控制台后点击，创建应用，根据提示输入信息。二、安装 leanCloud SDK$ npm install leancloud-storage -S三、初始化 leanCloudleanCloud JavaScript SDK 安装指南const appId = '你的 App ID' const appKey = '你的 App Key' AV.init({ appId, appKey })四、测试 leacCloud在main.js中输入以下代码，并执行，能在应用的后台数据表中查询到此数据，则成功连接。const TestObject = AV.Object.extend('TestObject') const testObject = new TestObject() testObject.save({ words: 'Hello World!' }) console.log('LeanCloud Rocks!')提示：复制 leanCloud 的测试的时候注意要删除分号;和多余的空格等标记，否则无法通过语法检查。 ...继续阅读 (32)

一、路由使用// 导入路由组件 import VueRouter from 'vue-router' // 导入路由配置文件 import routerConfig from './routerConfig.js' // 注册路由 Vue.use(VueRouter) // 创建路由 const router = new VueRouter({ routes: routerConfig }) // 实例化根组件，并绑定路由 new Vue({ router, render: h => h(App) }).$mount('#app')提示：导入路由和导入其他的插件一样，导入都必须先用 Vue 注册，才能够使用。二、路由配置这里是返回一个路由配置数组，供路由使用。以下写法使用了路由的懒加载，只有当路由访问的时候才加载对应的组件，这样可以更高效，而不会打包出一个巨大的入口文件。其他详细的使用方式，请访问插件官网export default [ { path: '/', component: resolve => require(['./views/index.vue'], resolve) }, { path: '/register', component: resolve => require(['./v ...继续阅读 (44)

一、项目依赖vue-router路由模块element-uiUI组件LeanCloudLeanCloud SDK二、安装依赖安装命令后面加上-S后缀，将模块安装到生产环境中# 安装路由插件 $ npm install vue-router -S # 安装UI组件 $ npm install element-ui -S # 安装leanCloud SDK $ npm install leancloud-storage -S三、在项目中导入依赖，并注册路由配置，我们在接下来的文章中讲。这里值得一提的是，如果 import 导入了模块，但是下面没有用上，代码是会报错的，提示定义的模块没有被使用。import Vue from 'vue' import App from './App' // 导入路由组件 import VueRouter from 'vue-router' // 导入UI组件 import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css' // 导入路由配置文件 import routerConfig from './routerConfig.js' // 注册插件 Vue.use(VueRouter) Vue.use(Element) // 创建路由 cons ...继续阅读 (33)

简介本文档只做记录，原文：npm的package.json中文文档name名字字段，不能含有有nodejsversion版本字段description简介字段，方便在npm search中搜索keywords关键字、数组、字符串。方便在npm search中搜索homepage项目官网的URL地址bugs项目提交问题的URL地址或者邮件地址"bugs" : { "url" : "...", "email" : "..." }如果只提供一个URL，则直接使用字符串license指定一个许可证，让人知道使用的权利和限制的。{ "license" : "BSD" }复杂许可"license" : [ { "type" : "MyLicense", "url" : "URL地址" } ]people fields: author, contributorsauthor是一个人。contributors是一堆人的数组。person是一个有name字段，可选的有url、email字段的对象{ "name" : "名字", "email" : "邮件地址", "url" : "URL地址" }直接使用字符串"名字 <邮件地址> (URL地址)"mainmain字段配置一个文件名指向模块的入口程序。 ...继续阅读 (41)

npm install 安装模块安装package.json文件中所有依赖的模块$ npm install安装指定模块$ npm install gulp安装指定版本$ npm install gulp@3.9.1-g，–global 全局安装$ npm install gulp --global $ npm install gulp -g-S，–save 安装包信息将加入到dependencies（生产依赖阶段）$ npm install gulp --save $ npm install gulp -S-D, –save-dev 安装包信息加入到devDependencies（开发阶段依赖）$ npm install gulp --save-dev $ npm install gulp -D-O，–save-optional 安装包信息加入到optionalDependencies（可选阶段依赖）$ npm install gulp --save-optional $ npm install gulp -D-E，–save-exact 精确安装模块的指定版本$ npm install gulp --save-exact $ npm install gulp -Enpm uninstall 卸载模块卸载模块$ npm u ...继续阅读 (40)

本教程将使用Vue2.0和leancloud开发一个拥有完整的注册、登录、退出登录流程的小DEMO。要使用的技术技术描述npm包管理器vue-clivue脚手架，官方命令行工具Vue2.0Vue最新版本Vue-routerVue的官方路由工具element基于Vue2.0的一个UI组件库，用于快速构建网站界面leancloud一站式后端云服务，拥有完整的后台的数据逻辑要实现的功能1、基于vue2.0使用vue-cli脚手架搭建出项目2、实现注册功能，注册后可用于登录。3、实现登录功能，可用注册成功的账号登录。4、实现退出登录功能，退出后跳转到登录界面注意本教程中登录，注册等用户逻辑是基于leancloud的，所以得先去申请一个leancloud的账号，创建一个应用获取App ID和App Key。 ...继续阅读 (91)

今天看了下订阅邮件，发哥的博客更新了一篇《再定一个小目标》，发哥真是我见过最有执行力的人哎。想想时间真是无情，一下子2016年又要过去了，上一次给自己定目标还是2014年而且也只是完成了一部分。后面就没有系统的规划过自己了，真是堕落啊。现在今年离回家过年也就两三个月了，先定几个短期目标吧，希望能全部实现然后明年年初的时候再定个一年长期目标。学习Vue并完成一个开源项目，同时写这一系列的文章。钢琴能熟练的弹完《月亮代表我的心》买两套秋冬款衣服，鞋子其实今年也一直都有在学习，只是没有目标，很多都是学个入门没有深入，比如React，学个入门会写个Todo就没有继续研究了，这样不好。现在专心学习Vue吧，一次只做一件事。嗯。从今天开始。 ...继续阅读 (29)

使用Vue的单文件组件编写一个入门的Todo例子这个例子是拿官方的Todo例子改写成的.vue格式的单文件组件，功能上新增了勾选复选框变更状态为已完成的功能。在main.js入口文件中，导入vue和vue单文件组件vue的正常使用首先是要导入vue框架，然后再导入vue的单文件组件，最后通过new Vue()实例化这个组件。# 导入 Vue 框架 import Vue from 'vue' # 导入 App.vue组件 import App from './App' # 实例化这个组件 new Vue({ el: 'body', components: { App } }).vue的文件构成每一个.vue都是一个单独的组件，包括独立的模板，样式，和逻辑。他们都是独立的，跟其他的组件不会互相影响。# 模板 <template></template> # 逻辑 <script></script> # 样式 <style></style>注意事项如果有Vue逻辑代码，则必须以模块的形式返回接口。export default{ data: function () { return { msg：‘hello Vue.js！’ } } }To ...继续阅读 (47)