#Vue.js教程

##1. Getting Started

以下示例，在博客中有具体讲解，博客链接：Vue.js——60分钟快速入门

####Hello World双向绑定示例

Hello World示例

####常用内置指令

v-if指令示例
v-show指令示例
v-else指令示例
v-for指令示例
v-bind指令示例
v-on指令示例

####页面示例

循环列表、双向绑定、添加数据、删除数据综合示例

##2. Components

###Part-1

以下示例，在博客中有具体讲解，博客链接：Vue.js——60分钟组件快速入门（上篇）

提醒：最好结合源码和Chrome的F12工具查看示例

####组件注册示例

组件使用的基本步骤
组件的局部注册
父组件和子组件
组件注册语法糖
使用script标签替代HTML字符串模板
使用template标签替代HTML字符串模板

####父组件传递数据给子组件

props基础示例
props单向绑定
props双向绑定
props单次绑定

####页面示例

注册组件、过滤表格、父组件传递数据给子组件综合示例

###Part-2

以下示例，在博客中有具体讲解，博客链接：Vue.js——60分钟组件快速入门（下篇）

####slot示例

单个slot示例
多个slot示例1——对话框
多个slot示例2——多种颜色的对话框
多个slot示例3——未指定footer的对话框

####父子组件实例访问示例

$children示例
$ref示例
$parent示例

####父子组件通信示例

$dispatch：子组件向父组件派发事件
$broadcast：父组件向子组件广播事件

####基于组件一步一步实现一个CURD示例

第1步：创建表格组件，添加查询和删除功能
第2步：创建对话框组件
第3步：实现数据新建功能
第4步：实现数据修改功能
第5步：修改数据新建功能
第6步：完整示例

##3. Ajax

以下示例，在博客中有具体讲解，博客链接：Vue.js——基于$.ajax实现数据的跨域增删查改 ###基于jquery或zepto的$.ajax示例

$.ajax跨域GET示例
$.ajax跨域JSONP示例
$.ajax跨域POST示例
$.ajax跨域PUT示例
$.ajax跨域DELETE示例

###基于vue-resource的示例

以下示例，在博客中有具体讲解，博客链接：Vue.js——vue-resource全攻略

####http示例

http get示例
http jsonp示例
http post示例
http put示例
http delete示例

####resouce示例

resource get示例
resource save示例(HTTP POST)
resource update示例(HTTP PUT)
resource remove示例(HTTP DELETE)

####inteceptor示例

inteceptor示例1——ajax请求的loading界面
inteceptor实例2——请求失败时的提示对话框

##4. OAuth

以下示例，在博客中有具体讲解，博客链接：Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

###$.ajax示例

注册示例
登录和注销示例
登录获取Token并调用API示例
注册、登录、注销、调用API综合示例

###vue-resource示例

注册示例
登录和注销示例
登录获取Token并调用API示例
注册、登录、注销、调用API综合示例

###结合CURD、注册、登录、注销的页面示例

Demo

##5.官方项目模板

###Browserify项目模板

以下示例，在博客中有具体讲解，博客链接：Vue.js——60分钟browserify项目模板快速入门

vue-browserify-simple模板示例

###Webpack项目模板

以下示例，在博客中有具体讲解，博客链接：Vue.js——60分钟webpack项目模板快速入门

vue-webpack-simple模板示例

##6.Vue-Router

以下示例，在博客中有具体讲解，博客链接：Vue.js——vue-router 60分钟快速入门

第一个单页面应用
嵌套路由示例
具名路径示例
路由对象示例
让链接处于选中状态示例
钩子函数示例

###乞丐版源码（页面和组件代码混合在一起）

乞丐版源码

###精装版源码（基于vue-webpack-simple模板构建）

精装版源码-demo01
精装版源码-demo02
精装版源码-demo03
精装版源码-demo04
精装版源码-demo05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!