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
Vue.js教程--况颜
原文地址：https://www.cnblogs.com/77yaer/p/9183523.html