> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## Vue初体验
新建一个空的项目，引入vue.js文件。写如下代码：
```html
Title
{{name}}
```
显示效果：
如果我们在控制台输入`myVue.$data.name = 'haha'`，页面会**自动更新**name的值。意思是，当我们直接修改data数据，页面会自动更新，而不用去操作DOM。
下面来讲一下Vue的各种系统指令。
## v-on：注册事件
### v-on 的用法举例
```html
Title
{{name}}
```
上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。
### `v-on`的简写形式
例如：
```html
```
可以简写成：
```html
```
### v-on的常用事件
- v-on:click
- v-on:keydown
- v-on:keyup
- v-on:mousedown
- v-on:mouseover
- v-on:submit
- ....
### v-on的事件修饰符
`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：
- `.stop` 阻止冒泡。本质是调用 event.stopPropagation()。
- `.prevent` 阻止默认事件。本质是调用 event.preventDefault()。
- `.capture` 添加事件监听器时，使用 capture 模式。
- `.self` 只有当事件是从侦听器绑定的元素本身触发时，才触发回调。
- ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。
- ``.native` 监听组件根元素的原生事件。
写法示范：
```html
```
**举例**：（`.prevent`的用法举例）
现在有一个form表单：
```html
```
我们知道，上面这个表单因为`type="submit"`，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。
现在，我们可以用`.prevent`来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下：
```html
Document
```
上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。
## 插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
```html
Message: {{ msg }}
```
Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。
`{{}}`对JavaScript 表达式支持，例如：
```javascript
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ name == 'smyhvae' ? 'true' : 'false' }}
{{ message.split('').reverse().join('') }}
```
但是有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效：
```html
{{ var a = 1 }}
{{ if (ok) { return message } }}
```
## v-text
v-text可以将一个变量的值渲染到指定的元素中。例如：
```html
Title
```
结果：
## v-html
`v-text`是纯文本，而`v-html`会被解析成html元素。
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
## v-cloak
`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。
这个指令和CSS 规则一起用的时候，可以隐藏未编译的标签直到实例准备完毕。比如说，在网络很慢的情况下，通过`v-cloak`隐藏元素，当加载完毕后，再显示出来。
```html
Title
{{name}}
```
## v-bind
`v-bind`：给html元素或者组件**动态绑定**一个或多个特性，例如动态绑定style和class。
比如说：
```html
![]()
```
上方代码中的`imageSrc`和`size`其实是Vue实例里面的变量。
上面两行代码可以简写成：
```html
![]()
```
**举例：**
```html
Title
```
效果：
## v-model：双向数据绑定
上面的一段中，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，``标签里的内容会自动更新。
可我现在要做的是：我在``标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。
代码举例如下：
```html
Document
```
此时，便可实现我们刚刚要求的双向数据绑定的效果。
## v-for：for循环
**作用**：根据数组中的元素遍历指定模板内容生成内容。
### 引入
比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值：
```html
- {{list[0]}}
- {{list[1]}}
- {{list[2]}}
```
效果：
为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了：
```html
```
接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法
### 数组的遍历赋值
针对下面这样的数组：
```html
```
将数组中的**值**赋给li：
```html
{{item}}
```
将数组中的**值和index**赋给li：
```html
值：{{item}} --- 索引：{{index}}
```
效果如下：
### 对象的遍历赋值
针对下面这样的对象：
```html
```
将上面的`obj1`对象的数据赋值给li，写法如下：
```html
- 值：{{value}} --- 键：{{key}}
---分隔线---
- 值：{{value}} --- 键：{{key}} --- index：{{index}}
```
效果如下：
## v-if：设置元素的显示和隐藏
**作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
在切换时，元素和它的数据绑定会被销毁并重建。
举例如下：（点击按钮时，切换和隐藏盒子）
```html
Document
```
效果如下：
## v-show：设置元素的显示和隐藏
**作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。
举例如下：（点击按钮时，切换和隐藏盒子）
我们直接把上一段代码中的`v-if`改成`v-show`就可以了：
```html
Document
```
效果如下：
**v-if和v-show的区别**：
`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`是添加/删除DOM元素，而`v-show`是在这个元素上添加/移除`style="display:none"`属性。
## 我的公众号
想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
