Vue.js教程

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。