snailsword/vue-tutorials

Let you insight into the Vue.js

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