Javascript拥有两个相当强大而且受开发者喜爱的函数：split 与join 俩对立的函数。这俩函数能让string与array两种类型互换，也就是数组能被序列化为字符串，反之亦然。我们能把这俩函数发挥得淋漓尽致。下面就来探索里面的一些有趣的应用， 首先介绍一下这两个函数： String.prototype.split(separator, limit) separator把字符串分割为数组，可选参数limit定义了生成数组的最大length。"85@@86@@53".split('@@'); //['85','86','5...
本章我们将深入了解一下组件，并实现父子组件间的传值。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"><counter :count="count1"></counter><counter :count="count2"></counter> </div> <script>Vue.component("counter", {props:[count],data(){return{number: this.count,}},template: `<p>{{coun...
之前的文章我们已经对 vue 有了初步认识，这篇文章我们通过一个例子说一下 vue 的方法 methods，计算属性 compited 和监听器 watch。 现在我们有一个需求，变量 firstName = "hello"，变量 lastName = "world"，我们需要将这两个变量拼接到在前端展示，最基本的我们可以想到的就是： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> <...
模块概览 这个模块的重要性，基本不用强调了。在网络安全问题日益严峻的今天，网站采用HTTPS是个必然的趋势。 在nodejs中，提供了 https 这个模块来完成 HTTPS 相关功能。从官方文档来看，跟 http 模块用法非常相似。 本文主要包含两部分： 通过客户端、服务端的例子，对https模块进行入门讲解。如何访问安全证书不受信任的网站。（以 12306 为例子）篇幅所限，本文无法对 HTTPS协议 及 相关技术体系 做过多讲解，有问题欢迎留言交...
一、 Getter 我们先回忆一下上一篇的代码 computed:{getName(){return this.$store.state.name} }这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.name 上经过复杂计算得来的,刚好这个getName要在好多个地方使用,那么我们就得复制好几份. vuex 给我们提供了 getter,请看代码 (文件位置 /src/store/index.js) import Vue from vue import Vuex from vuexVue.use(Vuex)export default new Vuex.Stor...
对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真学习一下了。 第一招：化繁为简的Watchers场景还原： created(){this.fetchPostList() }, watch: {searchInputValue(){this.fetchPostList()} }组件创建的时候我们获取一次列表，同时监听input框，每当发生变化的时候重新获取一次筛选后的列表这个场景很常见，有没...
前置条件: 熟悉使用 Javascript + HTML5 + css3。理解 ES2015 Module 模块(export、import、export-default)。了解 nodejs 基础知识，npm 常用命令，以及 npm script 使用 (vue 项目中使用 npm 进行包管理)。了解 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack webpack.github.io/ 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出它们的依赖关系，将它们打包为可部署的静态资源。webpack 的使用也...
对于线上项目用来说，日志是非常重要的一环。log4js是使用得比较多的一个日志组件，经常跟Express一起配合使用。本文从入门实例开始，讲解log4js的使用，以及如何跟Express进行整合。 入门例子 输出日志如下，包括日志打印时间、日志级别、日志分类、日志内容。 // started.js var log4js = require(log4js); var logger = log4js.getLogger(); logger.debug(hello world);// 输出： // [2017-02-28 21:28:22.853] [DEBUG] [defau...
上上篇：Vuex 入门 上一篇：Vuex 提升自制vuex LOGO前两篇讲解了一下 Vuex 的基本使用方法，可是在实际项目中那么写肯定是不合理的，如果组件太多，不可能把所有组件的数据都放到一个 store.js 中的，所以就需要模块化的组织 Vuex，首先看一下 项目结构。 项目结构一、首先执行以下命令： vue init webpack-simple vuex-demo cd vuex-demo npm install npm install vuex -S npm run dev二、按照上图结构创建文件目录Vuex 模块化目...
滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在 HTML5 history 模式下可用。当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法： var router = new VueRouter({routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置} }...
导航钩子vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。 全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子： const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ... }) 当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 reso...
数组常用方法总结： 下面我只总结了es3中常用的数组方法，一共有11个。es5中新增的9个数组方法，后续再单独总结。 1个连接数组的方法：concat（） 2个数组转换为字符串的方法：join（）、toString（） 6个增删数组元素的方法：pop（）、push（）、shift（）、unshift（）、slice（）、splice（） 2个数组排序方法：reverse（）、sort（） 连接数组的方法： 1、concat（） 作用：连接两个数组，合并为一个新数组。 用法：arr1.conca...
执行环境 执行环境定义了变量或函数有权访问的其他函数，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象。 变量对象 环境中定义的所有变量和函数都保存在这个对象中。 全局执行环境 全局执行环境是最外围的一个执行环境。在web浏览器中，全局执行环境被认为是Window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的。 每个函数都有自己的执行环境。 作用域链 当代码在一个环境中执行，会创建变量...
写在前面 在web服务端开发中，字符的编解码几乎每天都要打交道。编解码一旦处理不当，就会出现令人头疼的乱码问题。 不少从事node服务端开发的同学，由于对字符编码码相关知识了解不足，遇到问题时，经常会一筹莫展，花大量的时间在排查、解决问题。 文本先对字符编解码的基础知识进行简单介绍，然后举例说明如何在node中进行编解码，最后是服务端的代码案例。本文相关代码示例可在这里找到。 关于字符编解码 在网络通信的过程中，...
webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder 一、loaders之 预处理 css-loader 处理css中路径引用等问题style-loader 动态把样式写入csssass-loader scss编译器less-loader less编译器postcss-loader scss再处理npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader 栗子: module: {loaders: [{test: /\.css$/, loader: "style!css?sourceMap!pos...