Webcourse/21-Vue基础/01-01.Vue基础语法：系统指令.md


> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。

> 以下是正文。

## Vue初体验

新建一个空的项目，引入vue.js文件。写如下代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue的包-->
    <script src="vue2.5.15.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
    {{name}}
</div>
</body>

<script>
    // 2、创建一个Vue的实例
    //new出来的对象就是MVVM中的 View Module（调度者）
    var myVue = new Vue({
        el: '#div1', //当前vue对象将接管上面的div1区域
        data: {//data就是MVVM中的 module
            name: 'smyhvae'
        }
    });
</script>
</html>
```


显示效果：

![](http://img.smyhvae.com/20180313_0955.png)

如果我们在控制台输入`myVue.$data.name = 'haha'`，页面会**自动更新**name的值。意思是，当我们直接修改data数据，页面会自动更新，而不用去操作DOM。


下面来讲一下Vue的各种系统指令。


## 插值表达式 {{}}

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：

```html
<span>Message: {{ msg }}</span>
```

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 } }}
```


代码举例：

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span>content:{{name}}</span>
    </div>
    <script src="vue2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'smyhvae'
            }
        })
    </script>

</body>

</html>
```

运行结果：

20180506_2240.png


## v-cloak

`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。

v-cloak指令和CSS 规则一起用的时候，能够**解决差值表达式闪烁的问题**（即：可以隐藏未编译的标签直到实例准备完毕）。

就拿上一段代码来举例，比如说，`{{name}}`这个内容，**在网速很慢的情况下，一开始会直接显示`{{name}}`这个内容**，等网络加载完成了，才会显示`smyhvae`。那这个**闪烁的问题**该怎么解决呢？

解决办法是：通过`v-cloak`隐藏`{{name}}`这个内容，当加载完毕后，再显示出来。

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

    /*2、在样式表里设置：只要是有 v-cloak 属性的标签，我都让它隐藏。
    直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 1、给 span 标签添加 v-cloak 属性 -->
    <span v-cloak>{{name}}</span>

  </div>
</body>

<script src="vue2.5.16.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      name: 'smyhvae'
    }
  });
</script>

</html>

```


## v-text

v-text可以将一个变量的值渲染到指定的元素中。例如：

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本：2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <div id="div1">
    <span v-text="name"></span>
  </div>
</body>

<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'hello smyhvae'
    }
  });
</script>

</html>
```

结果：


![](http://img.smyhvae.com/20180313_1645.png)

### 差值表达式和 v-text 的区别

```html
  <!-- 差值表达式 -->
  <span>content:{{name}}</span>

  <!-- v-text -->
  <span v-text="name">/span>
```

**区别1**： v-text 没有闪烁的问题，因为它是放在属性里的。

**区别2** :插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text 会**覆盖**元素中原本的内容。

为了解释区别2，我们来用代码举例：

```html
  <!-- 差值表达式 -->
  <p>content:++++++{{name}}------</p>

  <!-- v-text -->
  <p v-text="name">------++++++</p>
```

上方代码的演示结果：

20180506_2320.png

其实，第二行代码中，只要浏览器中还没有解析到`v-text="name"`的时候，会显示`------++++++`；当解析到`v-text="name"`的时候，name的值会直接替换`------++++++`。


## v-html


`v-text`是纯文本，而`v-html`会被解析成html元素。

注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。

代码举例：

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>

    </div>
    <script src="vue2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '<h1>我是一个大大的h1标题</h1>'
            }
        })
    </script>

</body>

</html>
```

运行结果：

20180506_2330.png


## v-bind

`v-bind`：用于绑定属性。

比如说：

```html
    <img v-bind:src="imageSrc +'smyhvaeString'">

    <div v-bind:style="{ fontSize: size + 'px' }"></div>
```


上方代码中，给属性加了 v-bind 之后，属性值里的整体内容是**表达式**，属性值里的`imageSrc`和`size`是Vue实例里面的**变量**。

也就是说， v-bind的属性值里，可以写合法的 js 表达式。

上面两行代码也可以简写成：

```html
    <img :src="imageSrc">

    <div :style="{ fontSize: size + 'px' }"></div>
```

**举例：**

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  </style>
</head>

<body>
  <div id="div1">
    <!-- value里的值只是简单的字符串 -->
    <input type="text" value="name">
    <!-- 加上 v-bind 之后，value里的值是 Vue 里的变量 -->
    <input type="text" v-bind:value="name">
    <!-- 超链接后面的path是 Vue 里面的变量 -->
    <a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>

  </div>
</body>

<script src="vue.js"></script>
<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'smyhvae',
      path: `2.html`
    }
  });
</script>

</html>

```

上面的代码中，我们给`value`这个属性绑定了值，此时这个值是一个变量。

效果：

![](http://img.smyhvae.com/20180313_1745.png)


## v-model：双向数据绑定

上面的一段中，我们通过v-bind，给`<input>`标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，`<input>`标签里的内容会自动更新。

可我现在要做的是：我在`<input>`标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。

代码举例如下：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">

    <form action="#">
        <input type="text" id="username" v-model="myAccount.username">
        <input type="password" id="pwd" v-model="myAccount.userpwd">

        <input type="submit" v-on:click="submit1" value="注册">

    </form>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        //上面的标签中采用v-model进行双向数据绑定，数据会自动更新到data里面来
        data: {
            name: 'smyhvae',
            myAccount: {username: '', userpwd: ''}
        },
        //在methods里绑定各种方法，根据业务需要进行操作
        methods: {
            submit1: function () {
                alert(this.myAccount.username + "  pwd=" + this.myAccount.userpwd);
            }
        }
    });
</script>

</html>
```


此时，便可实现我们刚刚要求的双向数据绑定的效果。


## v-on：注册事件

### v-on 的用法举例

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本：2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <!--这个div区域就是MVVM中的 View-->
  <div id="div1">
    <!-- 给button节点绑定按钮的点击事件 -->
    {{name}}
    <button v-on:click="change">改变name的值</button>
  </div>


</body>

<script>
  //new出来的对象就是MVVM中的 View Module
  var myVue = new Vue({
    el: '#div1', //当前vue对象将接管上面的div区域
    data: { //data就是MVVM中的 module
      name: 'smyhvae'
    },
    //注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改
    methods: {
      change: function() { //上面的button按钮的点击事件
        this.name += '1';
      }
    }
  });
</script>

</html>
```


上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。


### `v-on`的简写形式

例如：

```html
    <button v-on:click="change">改变name的值</button>
```

可以简写成：

```html
    <button @click="change">改变name的值</button>
```


### 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
          <!-- click事件 -->
        <button v-on:click="doThis"></button>

        <!-- 缩写 -->
        <button @click="doThis"></button>

        <!-- 内联语句 -->
        <button v-on:click="doThat('hello', $event)"></button>

        <!-- 阻止冒泡 -->
        <button @click.stop="doThis"></button>

        <!-- 阻止默认行为 -->
        <button @click.prevent="doThis"></button>

        <!-- 阻止默认行为，没有表达式 -->
        <form @submit.prevent></form>

        <!--  串联修饰符 -->
        <button @click.stop.prevent="doThis"></button>
```


**举例**：（`.prevent`的用法举例）

现在有一个form表单：

```html
    <form action="http://www.baidu.com">
      <input type="submit" value="表单提交">
    </form>
```


我们知道，上面这个表单因为`type="submit"`，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。

现在，我们可以用`.prevent`来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下：

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue2.5.16.js"></script>
</head>

<body>
  <div id="app">
    <!-- 阻止表单中submit的默认事件 -->
    <form @submit.prevent action="http://www.baidu.com">
      <!-- 执行自定义的click事件 -->
      <input type="submit" @click="mySubmit" value="表单提交">
    </form>

  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
    },
    methods: {
      mySubmit: function() {
        alert('ok');
      }
    }
  });
</script>

</html>
```

上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。


## v-for：for循环

**作用**：根据数组中的元素遍历指定模板内容生成内容。

### 引入

比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值：


```html
<body>
  <div id="app">
    <ul>
      <li>{{list[0]}}</li>
      <li>{{list[1]}}</li>
      <li>{{list[2]}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }

  });
</script>
```

效果：

![](http://img.smyhvae.com/20180329_1713.png)

为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了：


```html
<body>
  <div id="app">
    <ul>
      <!-- 使用v-for对多个li进行遍历赋值 -->
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }

  });
</script>
```

接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法


### 数组的遍历赋值

针对下面这样的数组：


```html
<script>
  new Vue({
    el: '#app',
    data: {
      arr1: [2, 5, 3, 1, 1],
    }
  });
</script>
```


将数组中的**值**赋给li：

```html
      <li v-for="item in arr1">{{item}}</li>
```


将数组中的**值和index**赋给li：


```html
      <!-- 括号里如果写两个参数：第一个参数代表值，第二个参数代表index -->
      <li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>
```


效果如下：

![](http://img.smyhvae.com/20180329_1856.png)


### 对象的遍历赋值


针对下面这样的对象：

```html
<script>
  new Vue({
    el: '#app',
    data: {
      obj1: {
        name: 'smyhvae',
        age: '26',
        gender: '男'
      }
    }
  });
</script>
```

将上面的`obj1`对象的数据赋值给li，写法如下：


```html
<body>
  <div id="app">
    <ul>
      <!-- 括号里如果写两个参数：则第一个参数代表value，第二个参数代表key -->
      <li v-for="(value,key) in obj1">值：{{value}} --- 键：{{key}} </li>

      <h3>---分隔线---</h3>

      <!-- 括号里如果写三个参数：则第一个参数代表value，第二个参数代表key，第三个参数代表index -->
      <li v-for="(value,key,index) in obj1">值：{{value}} --- 键：{{key}} --- index：{{index}} </li>
    </ul>
  </div>
</body>

```

效果如下：

![](http://img.smyhvae.com/20180329_1850.png)


## v-if：设置元素的显示和隐藏

**作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。

在切换时，元素和它的数据绑定会被销毁并重建。

举例如下：（点击按钮时，切换和隐藏盒子）

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button v-on:click="toggle">显示/隐藏</button>
    <div v-if="isShow">我是盒子</div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      toggle: function() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

</html>
```

效果如下：

![](http://img.smyhvae.com/20180329_1920.gif)


## v-show：设置元素的显示和隐藏

**作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。

举例如下：（点击按钮时，切换和隐藏盒子）

我们直接把上一段代码中的`v-if`改成`v-show`就可以了：

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button v-on:click="toggle">显示/隐藏</button>
    <div v-show="isShow">我是盒子</div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      toggle: function() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

</html>

```

效果如下：

![](http://img.smyhvae.com/20180329_2040.gif)

**v-if和v-show的区别**：

`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。


## 我的公众号

想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

![](http://img.smyhvae.com/2016040102.jpg)