本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

正式学习Vue之前，我们先给我们的Chrome浏览器安装一个vue-devtools的调试工具，这就不说了自己去装吧。

Vue简介

啥是Vue

Vue的特性

主要是两个方面： 1、数据驱动视图 2、双向数据绑定

数据驱动视图

双向数据绑定

MVVM

MVVM的工作原理

Vue的版本

Vue的基本使用

基本使用步骤

基本代码与MVVM的对应关系：

Vue的指令与过滤器

指令的概念

内容渲染指令

v-text（几乎不用）

注意：v-text指令会覆盖元素内默认的值。 所以一般我们都会用另外一个指令来替代它：

{{}}语法（一般用这个）

vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式（英文名：Mustache）。 注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中。

v-html

t-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到v-html指令。

属性绑定指令

如果需要为元素的属性动态的绑定属性值，则需要使用v-bind属性绑定指令（注意v-bind可以缩写为一个冒号：）：

使用JavaScript表达式

事件绑定指令

在开发当中，我们的methods节点上定义的函数最好全用下面这种形式来写，比较言简意赅： 当然了，非要写成add: function (){}也是可以的，但不推荐。

还有一个问题，我们在vue中如何绑定事件并传参呢？ 就和平常的写法是一样的： 如上图中绿色圈圈圈中的地方调用add方法，在后面括号内传入参数1； 然后我们在红色圈圈圈中的methods节点中的add方法后面的括号里用形参n来接收参数1即可。

事件绑定的简写形式

事件对象 $event

当我们的方法被调用时如果不传入参数，则会默认传回一个参数叫事件对象event（这是JavaScript中的基础知识，这里给传送门事件对象），这个对象中包含了此次事件发生的所有信息，但是如果我们传入了参数，则这个时间对象event就会被覆盖而导致我们无法使用到事件对象，因此，Vue给我们提供了一个形参$event,以便于我们需要的时候使用事件对象：

事件修饰符

按键修饰符

双向绑定指令

v-model只能和表单元素绑定使用，比如input、textarea、select等。

v-model指令的修饰符

条件渲染指令

列表渲染指令

v-for： 上图中，list是数组名，不能乱写；in是语法，也不能乱写；但是item是可以乱写的。 v-for中的索引： 使用key维护列表的状态： key键的注意事项：

① key 的值只能是字符串或数字类型 ② key 的值必须具有唯一性（即：key 的值不能重复） ③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性） ④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性） ⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）