vue.js本身没有提供网络访问能力，但是可以通过插件完成。vue-resource就是这样一个不错的插件。它封装了XMLHttpRequest和JSONP，实现异步加载服务端数据。

绑定表单控件和绑定普通控件并无二致。但是因为控件绑定常常涉及到双向绑定，此时使用v-model让它更加简单。比如checkbox： {代码...} 把checked数据绑定到input的checked属性上。然而，这样的绑定都是单向的，就是说： 如果checked数据修改了，那么DOM属性就会修改 如果DOM属性修改了，checked数据并不会修改 所以，当...

vue.js内容分发把组件上下文的内容注入到组件。 定义解析 现在我们看一个架空的例子，帮助理解刚刚说过的严谨而难懂的定义。假设有一个组件名为my-component，其使用上下文如下： {代码...} 再假设此组件的模板为： {代码...} 那么注入后的组件HTML相当于： {代码...} 标签<slot>会把组件使用上下文的内容注入到此...

本篇文字会讲解声明式绑定，并且会谈及Vue的引入、数据绑定、事件绑定、Vue实例、指令。特别的，同样的案例，我也用来讲解Vue最为引以为傲的组件技术。案例是一个微小的叫做counter的应用，看起来是这样的：

对其他框架我是佩服，对vue.js我则是爱。我就是一眼看上了vue.js,于是用它做各种东西，反反复复多次，然后觉得有些融会贯通，然后，我稍微细的思量了下，到底vue.js靓丽在哪？

app作为父应用组件，newTodo作为一个子组件负责用户输入，并且获取新的todo，而todoList作为另外一个子组件则负责显示全部todo。

关于vuex类的新闻最近很多，看到眼热就去查了下资料，然后扯出来一堆flux、redux、state、state之类的概念，以及大型工程必要性之类的。看官方手册也是昏昏然。

我们从一个实际的app开始介绍vue.js。这个app就是一个todo管理的应用,它看起来是这样的： 作为一个可以使用的app，它可以： 点击按钮add，可以把第一个input内的文字作为内容创建一个新的todo条目 点击按钮X，可以删除对应的条目 如果你很性急，那么可以直接看代码： [链接] 首先是要html快速编写一个界面原型： {代码.....

vue.js推荐使用的扩展名为vue的组件模板，可以让标签的属性和内容都变得动态，这是很强大也很已用的能力。但是，如果我需要标签名本身都是可以动态的话，怎么办？

what's fragment instance? 封装navbar-part，内容如下： {代码...} 在调用此组件时，使用的是： {代码...} 然而，总是发现vue报警告： {代码...} 满头雾水啊：什么是文档片段，为什么是文档片段就得忽略href？ 原来把文档标签加上一个外套，就不是文档片段了： <div> {代码...} </div> 解决了问题，就容易...

vue-router是一个vue官方提供的路由框架，有它来做一个SPA变得比较容易。本文使用vue-router2.0，来提供一个快速的、可以抄写的原型，帮助你快速上手单页应用。

我们从使用角度，暂时不想要查看bootstrap的源代码，而是直接使用它预编译好的包。包内容如下： {代码...} 包括有： 编译好的CSS和JS (bootstrap.)，和压缩过的css，JS (bootstrap.min.) 还有一个CSS source map文件 (bootstrap.*.map) ，这个文件有些浏览器的开发工具需要它 来自Glyphicons的字体图标 可选的Bootstrap ...

几乎每个人都会想要问，为什么bootstrap布局划分屏幕空间采用的是12等分，而不是别的什么等分？确实奇妙，这里的12太舒服了。它可以被1、2、3、4、6、12共6个数字整除，本来就是用来分空间的系统，当然可以更好的被整除最好了，这样怎么分都愉快。比如

然后继续。每个.container的容器内都可以加入.row作为行，在行内通过col-md-来指定划分每个子元素的占据宽度。解释下col-md- :

只要把增补控件和input的class="input-group"内，其中的增补控件标记为class="input-group-addon"即可。当然，你可以只是做前缀增补，或者只是增加后缀增补，只要把不需要的删除就行了。

我们拿一个常见的登录界面为案例。默认情况下的form，代码是这样的： {代码...} 而通过bootstrap稍加改造，就可以看起来工工整整的很专业，代码是这样的： {代码...} 只需要给form加上class="form-vertical"，给input加上class="form-control"，就可以出来效果。 form的class还可以设置为水平和单行，设置的值分别为form...

可以使用Jumbotron呈现需求非常显眼的重要信息。 像是这样，把需要呈现的内容放到div元素内，并且设置它的class为jumbotron： {代码...} 如果希望这些内容不是左右充满页面，而是流出空间并加上圆角的话，可以把jumbotron放到一个container内： {代码...}

按钮一般用来执行操作，但是也可以设置状态。 状态按钮 单一的按钮可以通过data-toggle="button"设置切换状态： {代码...} 点击一次，按钮切换一次状态，外观因此不同。 或者点击一次显示loading，然后切换回原来的标题。只要加入html： {代码...} 和代码： {代码...} 多选式按钮组 通过属性data-toggle="buttons"可以把...

弹出层包括模态对话框、提示条、popover、alert。它们都可以用来提示或者警告用户，或者显示详细信息。 模态对话框 模态对话框就是一个对话框，它在继续下一步工作前来提示重要信息给用户，并可能会要求用户做出不同操作的选择。 如下代码可以点击一个按钮，弹出模态对话框： {代码...} 模态对话框的DOM结构嵌套的有点深...

使用bootstrap内置类可以把图片套圆角、套圆、套白边： {代码...} 利用好bootstrap的布局能力，做出类似缩略图集的UI很容易： <div class="container"> {代码...} </div>

navbar被称为导航条，一般放到站点的页面头部，用来导航网站。如下展示了一个比较简单的导航条，其中仅有一个用来放置Logo或者站点名称的navbar-brand ，以及两个导航链接：

本文讲解的是三个行内组件，它们可以嵌入到很多其他组件内来达成设计者的交互意图。它们分别是 icon、label、badge。 行内通用标签span，可以应用glyphicon从而变成一个icon： {代码...} 或者应用.badge，变成一个徽章： {代码...} 或者应用label，变成一个标签： {代码...} 当我们看到-default字样的类时，一定会去想试...

标签ul是非常实用的，因为它： 可以在语义上表达一个列表 列表是可以嵌套的 比如这样的例子代码： {代码...} 至于外观，默认的看来确实只能做简单的排版。然而，bootstrap大量采用ul，赋予它新的外观和操作，基于此标签，可以做成list，listgroup、dropdown等通用组件。 list 我们常常需要把默认纵向显示的ul，改成横向...

有时候，你想要把内容放到一个看起来还漂亮的盒子里面，那么就可以考虑panel。panel就是一个可以选择不同的边线样式、还可以有header和footer的盒子。这样一个有头有脚的组件，代码看起来是这样的：

bootstrap是Twitter公司出品的css框架，被前端程序员欣赏并广为采用。那么它给web网页带来了什么呢。我们从一个按钮的样式开始。假设如下代码的网页，页面内只有一个按钮：

bootstrap提供了一个carousel（旋转木马）组件，我们称之为轮播。它可以轮播图片和文字，常常用来展示网站的关键信息。如下就是一个carousel：

本文使用node.js创建一个可以调试和验证http2服务的代码。 首先创建一个npm环境,并按照http2模块 {代码...} 其次创建证书（主流浏览器仅仅支持tls加密传输，因此要求服务器必须使用证书）: {代码...} 然后执行如下代码： {代码...} 使用curl验证协议： {代码...} 输出： {代码...} curl的参数-I表示仅仅显示HTTP header...

Bootstrap中是一种事实上的界面标准，标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrap.css，就可以一个npm install完成项目的依赖，而不必手工的添加到html内。本来以为在入口文件内加一行就行：

现在，我们已经可以引入js文件、css文件。如果是图片呢？答案是可以。本文以svg图片为例，在css内引用它。从一个案例开始： {代码...} 我们希望通过css来让div变成红色的字体，文件为： {代码...} 依然在js的入口文件内引用此css： {代码...} 并修改webpack的配置文件，除了使用css-loader、style-loader加载css外，还需...

既然使用webpack后js的模块变得和node一模一样的令人喜爱，那么自然的，可以这样弄css？答案是可以。从一个案例开始： {代码...} 我们希望通过css来让div变成红色的字体，文件为： {代码...} 我们只需要在js的入口文件内引用此css： {代码...} 并修改webpack的配置文件，以便通知css文件由css-loader加载，并由style-loa...