Vue

Vue

一、概述

1.前言

Vue
Vue
Vue

2.认识Vue

Vue
Vue

二、快速入门

1.创建工程

创建一个新的工程;选择静态web类型工程:
Vue

2.安装vue

下载安装

Vue

使用CDN

Vue

npm安装(推荐)

Vue
Vue
Vue
Vue

3.vue入门案例

HTML模板

Vue

vue渲染

Vue
Vue
Vue

双向绑定

Vue
Vue

事件处理

Vue
Vue

三、Vue实例

1.创建Vue实例

Vue

2.模板或元素

Vue

3.数据

Vue

四、方法

Vue

五、生命周期钩子

1.生命周期

Vue
Vue
Vue

2.钩子函数

Vue
Vue

3.this

可以看下在vue内部的this变量是谁,在created的时候,打印this
Vue

六、指令

Vue

1.插值表达式

花括号

Vue

插值闪烁

Vue

v-text和v-html

Vue
Vue

2.v-model

Vue
Vue

3.v-on

基本用法

Vue
Vue
Vue

事件修饰符

Vue
Vue

4.v-for

遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。

遍历数组

Vue
Vue

数组角标

Vue
Vue

遍历对象

Vue
Vue

key

Vue

5.v-if和v-show

基本使用

Vue

与v-for结合

Vue
Vue

v-else

Vue
Vue

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:
Vue
Vue

6.v-bind

属性上使用vue数据

Vue
Vue
Vue

class属性的特殊用法

Vue
Vue
Vue

7.计算属性

Vue
Vue
Vue

8.watch

监控

Vue
Vue

深度监控

Vue
Vue
Vue

七、组件化

Vue

1.定义全局组件

Vue
Vue
Vue

2.组件的复用

Vue
Vue

3.局部注册

Vue
Vue

4.组件通信

Vue

父向子传递props

比如有一个子组件:
Vue
Vue

传递复杂数据

Vue
Vue
Vue

子向父的通信

Vue
Vue
Vue
Vue
Vue

八、Vuejs ajax

Vuejs 并没有直接处理ajax的组件,但可以使用axios或vue-resource组件实现对异步请求的操作。

1.vue-resource

Vue

2.axios简介

Vue

3.axios应用

方法说明

Vue
Vue
Vue
Vue

axios方法示例

Vue
Vue

get方法示例

Vue

post方法示例

Vue