VUE 简介

基本用法

一、vuejs简介

• 是一个构建用户界面的框架
• 是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据
  双向绑定
• 数据驱动和组件化的前端开发
• 通过简单的API就能实现响应式的数据绑定和组合的视图组件
  指令：
  用来扩展html标签的功能

vue与其他框架的对比

• 简单、易学、更轻量
• 指令v-xxx开头
• HTML + JSON数据
• 开发者 尤雨溪 华人

这几个框架都不兼容低版本IE

二、起步

1.下载核心库vue.js

目前有1.0和2.0两个大版本

vue2.0与vue1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM），页面的更新效率更高，速度更快。
2.hello word

3.可以安装vue-devtools插件，便于在Chrome中调试vue
可以在GITHUB上下载vue-devtools，解压后，将文件中的chrome拖放到扩展程序中。

VUE中常用指令

v-model：双向数据绑定，一般用于表单元素

v-for：对数组或者对象进行循环操作

v-on:用来绑定事件，用法：v-on:事件=“函数”

v-show:用来显示或者隐藏元素，实质是通过display实现

v-if

…

四、事件和属性

事件

1.1 事件简写

v-on:事件，简写成：@事件名

1.2 事件对象

vue里面的事件对象使用event包含了事件事件相关的信息，如事件源、事件类型、偏移量等等…

如：点击按钮，将对应按钮的文字返回给我

1.3 事件冒泡

阻止事件冒泡：

（1）原生JS，依赖于事件对象

（2）vue方式，不依赖于事件对象

在事件里加个stop修饰符： @click.stop
1.4 事件默认行为

阻止默认事件

（1）原生JS，依赖于事件对象 e.preventDefault()

（2）vue方式，不依赖于事件对象

在事件里加个prevent修饰符： @click.prevent
1.5 关于键盘事件

@keydown、@keypress、@keyup

比如我们在判断按键是不是回车的时候，不用挂在判断keycode了。可以加个修饰符：

@keydown.13 或者keydown.enter

其实13是ACILL码值，enter是vue内部做了映射，也就是回车键的别名。

上：keydown.38或者keydown.up

…

注意：默认没有@keydown.a/b/c…,可以自定义。成为自定义键码或者自定义键位别名。
1.6 事件修饰符

.stop

调用event.stopPropagation();

.prevent

调用event.preventDefault();

.{keyCode | keyAlias}

只当事件是从特定键触发时，才触发回调。

.native

监听组件根元素的原生事件

.once

只触发一次回调

属性

2.1 属性的绑定和简写

v-bind用于属性绑定，

格式v-bind:属性="",可简写为:属性=""

2.2 class和style属性

五、 模板

1.简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据模板就是{{}},用来进行数据绑定，显示在页面中，这种{{}}叫做Mustache语法。
数据的绑定方式

2.1 双向绑定
v-model

2.2 单项绑定

方法1：使用{{}}，可能会出现闪烁问题，可以使用v-cloak解决。

方法2：使用v-text、v-html
3.其他指令

v-once 数据只绑定一次

v-pre 直接原样显示

六、过滤器

1.简介
用来过滤模型数据的，在显示之前进行数据的处理和筛选。
语法：

2.关于 内置过滤器

Vue1.0中内置了许多过滤器，如：

currency、uppercase、lowercase

limitBy

orderBy

filterBy

在Vue2.0中已经移除了所有内置过滤器。解决方案：

（1）使用第三方工具库：如loadash、date-fns日期格式化、accounting货币格式化；

（2）使用自定义过滤器；

使用axios/vue-resource发送HTTP请求

一、发送AJAX请求

1.基本介绍

vue本身不支持发送AJAX请求，需要时vue-resource、axios等插件实现。

axios时一个基于Promise的HTTP请求客户端，用来发送请求，官方Vue2.0推荐使用axios，同时不再对vue-resource不再更新维护了。

参考 ：GitHub上搜索axios，查看API
2.使用axios发送AJAX请求

2.1 安装axios并引入

2.2基本用法：

Performing a GET request


Performing a POST request

Performing multiple concurrent requests

Requests can be made by passing the relevant config to axios.

axios(config)

axios(url[, config])

更多知识可以查看官方https://github.com/axios/axios

vue-resource发送请求

可以参考vue-resource的APIhttps://github.com/pagekit/vue-resource

另外还有jsonp的一些内容。以后了解。