Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
2013 年底作为个人实验项目开始开发
2014 年 2 月公开发布
2014 年 11 月发布从头重写的 0.11
2016年10发布了 2.0版本
数据渲染/数据同步（双向绑定）
sessionstorage与 localStorage 的类似，但生命周期与 localStorage 不同。它只是可以将数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。 
使用方法：
sessionStorage.setItem(‘key’, ‘value’);//设置
sessionStorage.getItem(‘key’);//获取
sessionStorage.removeItem(‘key’);//删除对应key
sessionStorage.clear();//清空
MVVM模式是根据MVP模式来的，可以简单的说，MVVM模式就是WPF版的MVP模式。MVP模式，MVC模式，这几个模式都是为了抽离出UI逻辑和业务逻辑。 MCV：Backbone、ember MVVM：vue.js、angular.js 4.0 
近几年Web的开发方式 Web1.0 简单的html和css以及js脚本，基本都是一些静态页面，复杂一些的页面大多是采用结合服务端的开发方式。前端工作大概就是切图，写html和样式。 
Web2.0 出现了一批以DOM，和浏览器兼容统一的前端框架，例如jquery，bootstarp等，当然最重要的还是ajax的出现，意味着可以不重新加载页面的情况下，更新数据。同时也是前后端工作逐渐划分清晰。 Web3.0（单页面应用开发） 当前较流行的开发方式，页面开发都是以组件化模块化为基础概念，同时ECMAScript设计语言的出现，被广泛应用，也出现了以ECMAScript设计语言为基础开发的框架。例如MVVM的angular和vue。 回到主题，什么是MVVM设计模式，MVVM的全称是Model View ViewModel，这种架构模式最初是由微软作为微软软件的展现层设计模式的规范提出。 它是MVC模式的衍生物。 MCV由model、controller、view组成，视图发送指令给控制器，控制器处理业务逻辑，通知模型改变状态，模型将新数据发送给model，这是一种单向的业务。 MVVM：用户再视图输入数据，视图将模型发送给viewmodel，viewmodel处理并发送给model，model验证并将状态返回给viewmodel，viewmodel最后发送给view，展示。其中模型和视图不存在直接的业务逻辑关系。其他层都是双向的业务。 在MVVM中，model只关心数据，和验证，不关心行为。 在MVVM中，view是用户最直观的交互部分。 在MVVM中，viewmodel是一个专门转换数据的控制中心。控制这view的显示和model的数据信息。 近几年，MVVM模式在JavaScript中开始有人实现，目前比较成熟的框架有vue.js, angular.js 4.0，下面我们就以vue.js为例看下MVVM模式中个部分的具体职责和实例代码，同时理解使用这种模式开发的优点和缺点。 Vuejs是什么，可以理解为，更快速的构建用户界面的渐进式MVVM框架。他由国人尤玉溪开发，采用ES5为基础设计语言。是当前果然最热门的框架。因为他的性能以及丰富的生态系统。 那么vuejs到底能做什么，他有最重要的两个功能，模板渲染和模块组件化开发，当然还有一些非常优秀的扩展，像路由、ajax框架等。下面解释一下什么是模板渲染和组件化开发， 模板渲染同时也叫数据同步、双向绑定，传统页面开发，如果需要实现XXXX功能，而利用vuejs则XXXX。这就是模板渲染。 下面来看模块组件化开发，我们可以理解为：页面由多个组件搭建而成，例如XXXXX。这就是模块组件化开发。在vuejs中注册组件是这样的balala.. Vuejs还有一些非常优秀的扩展，如果我们需要搭建一个以vuejs构成的完全的项目，自己搭建会较麻烦，所以官网提供了一个脚手架，也叫vuejs全家桶，他基本包括vuejs2.0、router、webpack以及resource（ajax）框架。 首先先解释一下，其中最重要的路由和webpack是什么意思，路由是指根据地址分配处理程序，一般由后端处理，那么和前端的最主要的区别在于，后端路由，两个地址每次请求都会向服务器发起请求，然后服务器响应请求，过程中必然有延迟，而前端路由只是变换了地址，无网络延迟。 Webpack是指一个自动处理分析项目结构并将代码打包成浏览器能识别的语言的一个打包工具。 全家桶式的开发，需要了解dos命令，以及npm的使用。
上周推送了一个无限循环题材的电影，反响还不错。 今天继续给大家推送三部经典的“无限”题材的电影。 在推荐前先请大家看下面一分钟的短片LOOP（循环） 看完如果喜欢，请继续往下看
第一部《恐怖游轮》
单亲母亲杰西（梅利莎·乔治 饰）和一帮朋友乘游艇出海游玩， 但她总有一种有不好的事情发生的感觉。 不久， 他们便在海上遭遇一场强烈的风暴。 游艇翻船， 众人落海， 几经挣扎他们好不容易爬到游艇残骸上来。 正当他们无计可施之时， 一艘巨大的游轮向众人缓缓驶来。 众人欣喜过望， 未加思索便登上这艘名为“艾俄洛斯”的游轮， 结果发现这竟是一艘1930年便告失踪的神秘之船， 而船上更是空无一人。 随处可见的鲜血、神秘的指示以及突如其来的凶杀事件， 将这群男女带入万劫不复的恐怖轮回之中……
豆瓣评分8.3分
我看过的最好的悬疑片，为了严谨，加上 一个循环的世界，西西弗斯的世界。 看完给人以警醒，我们总是在说，如果给我再来一次的机会，我一定会怎么怎么样，但是真的是这样么，电影给了我们一个很好的答案。 最后再说一句，看懂了这部电影的人，会毫不犹豫的给5星。——豆瓣影评
IMDB评分6.9分
我也看到了这frightfest和刻意避免阅读了太多关于这件事。有爱的蠕变和享受遣散的愚蠢，我期待的东西完全在恐怖片。这绝对不是这样的。很惊讶的是，选择了开放的节日-但这不是一个批评。这部电影不是很惊悚或者非常规的叙事提醒我更多的Memento。有一部电影，一个著名的美国喜剧（我不会说出拯救扰流板）采用类似的设备，虽然这部电影并非原创。这部电影，喜欢Memento，在离开观众的疑问正是已经没有任何感觉困惑相当复杂。从梅利莎·乔治一个伟大的中央表现真使得影片-她真的拉了需要的电影时间不容易得到的膜层结构与运行时间短的巨大的性格发展。这应该打开史米斯在恐怖类型片的一些门，这方面的证据，他将能够处理复杂的大思想，我期待他尽快更有趣的工作。——IMDB影评
第二部《穆赫兰道》
深夜的穆赫兰道发生一桩车祸， 女子丽塔（劳拉·赫利 Laura Harring 饰）在车祸中失了忆。 她跌跌撞撞来到一个公寓里藏身。 一名男子说他常常梦见一个叫云奇的地方， 那里有个恶魔盯着他。 于是就来到云奇， 果真见到墙后有怪物出现， 男子当场晕死。 另有一名杀手杀死了他面前 的男人， 然而蹩脚的他却惹来了不少一连串的麻烦。 故事回到一个刚到好莱坞“寻梦”的女子贝蒂（娜奥米·沃茨 Naomi Watts 饰）， 她的姨父姨母在电影圈有广泛人缘， 让贝蒂的发展如虎添翼， 试镜大受好评。 同时，她所住的公寓， 正好是丽塔藏身之地。 贝蒂收留了丽塔， 二人感情融洽。 面对记不起自己是谁的丽塔， 贝蒂决定帮助她寻找回自己的记忆。 一名导演想自己决定新戏的女主角， 却被他人强行安排人选。 工作不顺意的他还发现妻子和清洁工睡在一起。 这些看似松散的事件，就像一个迷宫，引向一个让人猜不透的世界……
豆瓣评分8.3分
它是我看完之后模糊明白却没太大感觉直到晚上睡觉前一刻突然坐起来拍着脑袋幡然醒悟的电影。就是那种梦的感觉。能用镜头和光，把梦带来的难以名状的感觉拍出来，感谢David_Lynch。——豆瓣影评
IMDB评分8.0分
我们都爱我们的头脑玩弄但坐在大卫·林奇的电影就像是你的大脑被完全移除。这部电影没有什么不同，它证明了Lynch（布努埃尔旁边）是一个主surealist电影制作人。 这部电影看到一个年轻的女孩，只有当丽塔试图记住她是谁。整个“女孩失忆”情节很有意义，直到大约3 / 5的方式，通过这部电影的时候，只能被描述为一个“林奇主义”潘多拉的盒子被打开。然后我们吃恶魔的无家可归的人，一个神秘的西班牙玩过家家和萎缩的人之前都结束在非常戏剧性的，超现实的大卫·林奇时尚。 这部电影是完美的。没有其他的方法来描述这样一个伟大的作品。这是完美的因为它是由一个男人知道他的手艺都不怕炫耀。自从他最后一次旅行，失去公路，1996年以来，这类电影一直非常怀念。它的好，在他以前的比赛看到Lynch和我们只是希望在未来，他会产生更多的宝石就这样。——IMDB影评
第三部《前目的地》
时空劳工局特工（伊桑·霍克 Ethan Hawke 饰）曾经奉命回到20世纪70年代， 以阻止当年给城市造成巨大伤害的恐怖分子“闪灭炸弹客”的破坏活动。 谁知他的任务失败， 在经过漫长的康复后， 他再度踏上征程， 发誓要将闪灭炸弹客绳之于法。 此番他以酒保身份混迹市 井， 某天偶然结识了笔名“未婚妈妈”的作家（莎拉·斯努克 Sarah Snook 饰）。 作家向他讲述了其匪夷所思的人生。 当年作家曾是名叫简的孤儿， 性格古怪的她在应聘太空公司失败后， 短暂坠入爱河， 并生下一名女婴， 结果她的人生也发生了翻天覆地的变化。 特工打算带着“未婚妈妈”去杀掉那个负心汉， 然而真相却并没有那么简单……
豆瓣评分7.6分
星际穿越才是科幻片，在我标准里，这不是。倒有点古希腊悲剧的意味了，全篇都在讲一个字：宿命。有点开启上帝视角，个体挣扎多么渺小，只能在写好的命定里徒劳浮沉。正如某话所说：所有我们曾走过的路，都是必经之路。看完悲凉得想哭。关键一切看似都是他自己的选择，可实际上，他有选择么？——豆瓣影评
IMDB评分7.4分
有趣和迷人的一个新的转折的经典公式。伟大的摄影和出色的演技为这令人耳目一新的科幻/时间旅行电影。 上升的女演员莎拉·斯努克有出色表现的霍克和泰勒的表演扎实的支持。 这样的电影通常遭受失败的尝试在独创性和复杂性登机混乱。这部电影既避免了试图惊讶和震撼观众，反而更像是一部神秘的小说 以精确展开，让观众参与 事件和发现来。很像一本很好的老阿加莎·克里斯蒂的书，会成功的。 Spierig兄弟越来越好的每部电影，这是在什么似乎是一个很有前途的职业生涯的一大步。 在时间旅行的太阳下没有什么新的东西，但交付是很好的，这使得这部电影值得看-至少两次，因为任何好的时间旅行电影需要。——IMDB影评
还想知道更多的，自己看电影去 电影资源，公众号回复，回复电影名字如本片《恐怖游轮》 如果你有好看的电影电视剧，想分享的， 或者你想找资源的， 公众号回复“找资源+《资源名称》”如：找资源 阿甘正传。
使用tree对数据格式有要求。我们需要自动递归循环读取所有的层级关系并输出我们想要的格式。 方法一
var filelist = [
{ name: ‘a.html’, path: ‘src/app’ },
{ name: ‘b.html’, path: ‘src/app’ },
{ name: ‘c.html’, path: ‘src/app/com’ },
{ name: ‘d.html’, path: ‘src/acc’ },
{ name: ‘e.html’, path: ‘src/acc’ }
]
function structuring(arr) {
var rtn = []
arr.forEach((el, i) => {
var keys = el.path.split(‘/‘)
keys.push(el.name)
var tmp = rtn;
keys.forEach((key, i) => {
if (!findTitle(tmp, key).length) {
if (key.indexOf(‘.html’) > -1) {
tmp.push({ title: key })
} else {
tmp.push({ title: key, children: [] })
tmp = findTitle(tmp, key)[0].children
}
} else {
tmp = findTitle(tmp, key)[0].children
}
});
})
return rtn
}
function findTitle(arr, title) {
var tmp = arr.filter((v, i) => {
return v.title === title
})
return tmp
}
console.log(structuring(filelist))
输出结果如下： 
方法二：
class FileTree {
constructor (filelist) {
this.tree = new Map()
if (filelist) {
this.build(filelist)
}
}
build (filelist) {
filelist.forEach(file => {
const path = file.path.split(‘/‘)
let dir = path.reduce((node, p) => {
if (!p) { return node }
if (!node.has(p)) {
node.set(p, new Map())
}
return node.get(p)
}, this.tree)
dir.set(file.name, new Map())
})
}
values () {
return this._genTree(this.tree)
}
_genTree (node) {
return Array.from(node.entries())
.map(([k, v]) => {
const result = {title: k}
if (v.size > 0) { result.children = this._genTree(v) }
return result
})
}
}
var filelist = [{ name: ‘a.html’, path: ‘src/app’ }, { name: ‘b.html’, path: ‘src/app’ }, { name: ‘c.html’, path: ‘src/app/com’ }, { name: ‘d.html’, path: ‘src/acc’ }, { name: ‘e.html’, path: ‘src/acc’ }]
const fileTree = new FileTree(filelist)
console.log(JSON.stringify(fileTree.values(), null, ‘ ‘))
输出结果如下： 
编写网站需要用到以下三种语言：HTML、CSS 和 JavaScript，而 HTML 是首先需要学习的语言。 HTML 本身并不是编程语言，它用来描述元素应该如何在网站上布局，并向浏览器提供网站所需的其他所有文件列表（例如 CSS 和 JavaScript）。 你可以将 HTML 看做盖房的图纸。它可以告诉你房间有多大，里面应该有什么东西， 但 是它不会告诉你外观如何。
如果说 HTML 描述的是房子的布局，那么 CSS 描述的就是房子的外观。层叠样 式表（简称 CSS）负责控制网站的外观。颜色、字体，甚至一些动画都由 CSS 控制。和 HTML 一样，CSS 不是编程语言。它是一种文本文档，就像室内设计 师的说明，使网站看起来很美观。
在三大网络语言中， JavaScript 是唯一的编程语言。JavaScript 负责控制网 站的交互操作。就像一位勤杂工人，可以拆掉墙壁、建造新的房间和重新装 饰房屋。对于简单的静态网站，你不需要使用太多的 JavaScript。但是对于 动态网络应用来说，你将需要深入学习该语言。
打开网站并缩小浏览器窗口大小。网页内容是否更改了布局，以适应新的屏 幕？这就是响应式设计在起作用。人们希望现代网站能够在手机、平板电脑 和笔记本上都具有美观的界面。通过学习响应式设计原则，你将了解如何使 网站能够缩放，并进行自我调整，从而在所有设备上都能提供超棒的体验。
Bootstrap 是一个典型的 CSS 框架示例。框架使我们能够轻松地设计网站结构 和构 建网站。它们会提供自定义 CSS 类，简化了内容布局操作，确保无论是 何种设备，你的内容都能看起来很美观。框架可以帮助你遵循行业最佳做法和 现代设计原则。
JavaScript 库和框架会强制要求各种最佳做法，并且通常会强制要求我们在处 理各种文件时遵守组织性格式，使我们能够轻松地编写网络应用。JavaScript 库和框架还会处理你可能会遇到的大部分跨浏览器兼容问题，包括各种性能优 化。JavaScript 库和框架示例包括 AngularJS、EmberJS 和 KnockoutJS。
构建应用远远不止编写代码这么简单！你需要运行测试套件、优化图片、遵守你 所在单位的代码格式指南，甚至准备将代码部署到成品服务器上。还需要完成大 量的重复性甚至枯燥的工作。Grunt 和 Gulp 等构建和自动化工具可以在后台帮 你处理所有这些任务，使你能够专注于构建强大的网络应用。
最近做一个项目需要在网页上实现一个代码编辑器，支持语法高亮、自动缩进、智能提示等功能。发现Code Mirror刚好满足所有需求。Code Mirror是由js写的一款插件，其功能非常强大,用来实现网页端代码编辑器非常方便。如果想看效果图，可移步到这里—-CodeOnline，这是我做的一个小项目，其中代码编辑器的就是用Code Mirror实现的。 
CodeMirror是用于浏览器的JavaScript实现的多功能文本编辑器。它专门用于编辑代码，并配有多种语言模式和插件 ，可实现更高级的编辑功能。 丰富的编程API和CSS 主题系统可用于自定义CodeMirror以适应您的应用程序，并使用新功能进行扩展。
WebSocket是HTML5的一种新通信协议，它实现了浏览器与服务器之间的双向通讯。Socket.IO是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架，它包括了客户端的JavaScript和服务器端的Node.js。Socket.IO兼容性非常好，他还支持许多种轮询（Polling）机制以及其它实时通信方式，并封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。Socket.IO实现的Polling通信机制包括Adobe Flash Socket、AJAX长轮询、AJAX multipart streaming、持久Iframe、JSONP轮询等。Socket.IO能够根据浏览器对通讯机制的支持情况自动地选择最佳的方式来实现网络实时应用。
var io = require(‘socket.io’).listen(8080);
io.sockets.on(‘connection’, function (socket) {
socket.emit(‘news’, {
hello: ‘world’
});
socket.on(‘my other event’, function (data) {
console.log(data);
});
});
monaco-editor是编码vs code的代码编辑器。描述代码编辑器功能的好页面就在这里。 它根据麻省理工学院许可证获得许可，并支持IE 11，Edge，Chrome，Firefox，Safari和Opera。 移动浏览器或移动网络框架不支持monaco-editor。
使用方法
npm install monaco-editor@0.10.0 //npm
///////////////////////////////////javascript/////////////////////
editorcca = monaco.editor.create(document.getElementById(‘container’), {
language:’html’,
theme:’vs-dark’,
automaticLayout: true,
});