前言从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个demo是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目。 技术栈 vue: 2.0.1vu...
本文介绍了如何用webpack打包一个网站应用,现在分享给大家,有需要的可以了解一下 随着前端技术的发展,越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用。 一般我们写页面,大概都是这样的结构:index.htmlcssstyle.cssjsindex.js...........这样我们的html里直接引用css和js,完成一个网页应用。用webpack也...
Webpack是开发Vue.js单页应用程序的重要工具。 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能。其中介绍下面四种方式: 单个文件组件优化Vue构建浏览器缓存管理代码分割 1.单个文件组件 Vue的特殊功能之一是使用HTML作为组件模板。 尽管如此,它们还有一个内在的问题:你的HTML标记需要是一个尴尬的JavaScript字符串,否则你的模板和组件定义将需要在单独的文件中,使其难以使用。Vue有...
一、元字符:每一个正则表达式都是由元字符和修饰符组成的[元字符] ->在两个/之间的具有意义的一些字符 reg = /^\d$/ //只能是一个0-9之间的数字 1、具有特殊意义的元字符\ : 转义字符,转译后面字符所代表的含义^ : 以某一个元字符开始$ : 以某一个元字符结尾 \n : 匹配一个换行符. : 除了\n以外的任意字符 () : 分组 -> 把一个大正则本身划分成几个小的正则 x|y : x或者y中的一个[xyz] : x或者y或者z中的一个[^...
前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助。我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其中最大的问题是使用 vue-cli 构建应用时遇到的问题。通过这些问题深入探索 vue 以及 vuex 。 我对于框架的学习一直断断续续,最先接触的是 react,所以有一些先入为主的观念,喜欢 react 更多一点,尤其在应用的构建层面来说。之所以断断续续,是因为自己 JS ...
在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值 比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码) 下面上代码 <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="./js/vue.min.js"></script> </head> <body><div id="app"><ul><li v-for="item in listData">{{item}}</li></ul><a href="javascript:void(0)" rel="external...
使用命令行搭建单页面应用 我们来看一下最后完成的效果:大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一、 下载工具 node, git 的下载大家可以去官网自行下载就可以了。 下面说一说安装 npm,npm 是在以上两个都安装的情况下才可以的。 国内直接 git npm 非常慢,所以我们到 taobao 的 npm 镜像下面去下载安装 镜像地址>>打开安装好的 git bash1 . 在 Git Bash 输入镜像的地址:下载成功后,输入 cnpm -v 看看是否安装...
两个对象:div1 和 div2,其中div1是div2的父元素,div2只能在div1的范围内拖拽 图中,红点是鼠标的位置,两个绿色箭头相减的结果就是disX,最后oEvent.clientX - disX 就是绿色箭头的部分,这个长度就是判断是否“出格”的依据,也就是这个短的绿色箭头范围应该在0 ~ div2.offsetWidth - div1.offsetWidth之间! <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>客户区可见范围限制拖拽</title><style type="text/css...
前言 Socket.IO支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作,可靠性和速度同样稳定。 实时分析:将数据推送到客户端,这些客户端会被表示为实时计数器,图表或日志客户。实时通信和聊天:只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。二进制流传输:从1.0版本开始,Socket.IO支持任何形式的二进制文件传输,例如:图片,视频,音频等。文档合并:允许多个用户同时编辑一个文档...
关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。使用vue可以给你的开发带来极致的编程体验。 关于vue-cli Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 疑问...
本文实例讲述了nodejs创建一个简单应用的方法。分享给大家供大家参考,具体如下: 1.创建 test.js // require 来载入 http 模块 var http = require(http); /*** 使用 http.createServer() 方法创建服务器,返回 一个对象* 对象有一个叫做 listen 的方法,并使用 listen 方法绑定 8000 端口。* 函数通过 request, response 参数来接收和响应数据。*/ http.createServer(function (request, response) {response.writeHead(200, {Con...
由于其运行期绑定的特性,JavaScript 中的 this 含义要丰富得多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。 JavaScript 中函数的调用有以下几种方式:作为函数调用,作为对象方法调用,作为构造函数调用,和使用 apply 或 call 调用。下面我们将按照调用方式的不同,分别讨论 this 的含义。 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。 1、函数也...
本文实例讲述了javascript数据结构中栈的应用之符号平衡问题。分享给大家供大家参考,具体如下: 由于栈先进后出的结构,我们可以将其作为有用的工具,下面就介绍一下栈的应用。 首先是符号的平衡问题。有一串字符串,我们需要判断其中固定的字符是否成对出现,比如<> {} [] () 等。当然实现的方法有很多,但是采用栈的实现会相对更加简单。 实现上述算法的JavaScript代码如下 <!DOCTYPE html> <html><head><meta charset="utf-8">...
本文实例讲述了JavaScript数据结构中栈的应用之表达式求值问题。分享给大家供大家参考,具体如下: 下面来谈一个比较经典的表达式求值问题,这个问题主要是设计到操作符的优先级。我们通常看到的表达式都是中缀表达式,存在很多优先级差别,而后缀表达式则没有这些优先级问题。下面先看看两种表达式的区别。 中缀表达式:a*b+c*d-e/f 后缀表达式:ab*cd*+ef/- 从中缀表达式转换到后缀表示式是很难实现的,我们这里可以通...
本文实例讲述了JavaScript数据结构中串的表示与应用。分享给大家供大家参考,具体如下: 类似于线性表的顺序存储结构,用一组地址连续的存储单元存储串值的字符序列。下面我们以串联接为例,讲解一下这种存储结构时串的操作。JavaScript自带有concat方法,该方法返回字符串值,该值包含了两个或多个提供的字符串的连接。 其实思路很简单,就是将第二个串拼接在第一个串后面,代码如下 <!DOCTYPE html> <html><head><meta charset="...