模板语法

模板语法主要用于视图的编写，以v-指令. 常见的有

属性绑定: v-bind, 简写为:
方法绑定: v-on, 简写为@
双向绑定: v-model
条件渲染: v-if
列表渲染: v-for

# 1 属性绑定和双向绑定

在 src 目录下, 创建04_属性绑定.html, 完成 vue 的 3 步曲

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04_属性绑定</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app"></div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

属性绑定

将 非表单标签 的一个属性和 data 中的一个变量绑定

html 部分

<a :href="url"></a>

js 部分

const vm = new Vue({
  el: '#app',
  data: {
    url: 'http://baidu.com',
  },
})

1
2
3
4
5
6

将 a 标签href属性和 data 中的 url 变量绑定
相当于<a href="http://baidu.com"></a>

双向绑定

将 表单标签 的 value 值和 data 中的变量双向绑定

html 部分

<input type="text" v-model="uName" />

js 部分

const vm = new Vue({
  el: '#app',
  data: {
    uName: 'xiaoming',
  },
})

1
2
3
4
5
6

将 input 标签的 value 属性和 data 中的 uName 变量绑定
相当于<input type="text" value="xiaoming" />

# 2 条件渲染

条件渲染

当条件满足时, 渲染到页面

主要指令: v-if和v-show

# 1) 完成 vue 的 3 步曲

在 src 目录下, 创建05_条件渲染.html, 编写 vue 的基础模板

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>05_条件渲染</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app"></div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2) 编写页面与逻辑

示例

html 部分

<!-- 2. 编写div元素 -->
<div id="app">
  <div v-if="flag">这是用v-if渲染的元素</div>
  <div v-show="flag">这是用v-show渲染的元素</div>
</div>

1
2
3
4
5

js 部分

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      flag: true,
    },
  })
</script>

1
2
3
4
5
6
7
8

当 flag 为 true 时, 两个元素都可以显示
当 flag 为 false 时, 两个元素都不显示, 区别是
- v-if: 不会创建元素
- v-show: 创建元素, 但是 display=none

# 3) 表达式

除了使用变量外, 还可以使用表达式

比如

<div v-if="flag == true">这是用v-if渲染的元素</div>

案例

通过按钮控制元素的显示/隐藏

示例

html 部分

<div id="app">
  <button @click="flag = !flag">切换</button>
  <div v-if="flag">这是用v-if渲染的元素</div>
  <div v-show="flag">这是用v-show渲染的元素</div>
</div>

1
2
3
4
5

绑定按钮的点击事件
- 当 flag==true 时点击, flag 先取反, 再保存, 此时 flag 为 false
- 当 flag==false 时点击, flag 先取反, 再保存, 此时 flag 为 true

# 3 列表渲染

列表渲染也称"循环渲染", 通过v-for遍历数组或者对象

# 1) 遍历数组

如果只希望得到每个数组元素的值, 不需要得到下标

语法

v-for="item in items"

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06_列表渲染</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app">
      <ul>
        <li v-for="item in items">{{ item }}</li>
      </ul>
    </div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          items: ['test1', 'test2', 'test3'],
        },
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

如果只希望得到每个数组元素的值和下标

语法

v-for="(item, index) in items"

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06_列表渲染</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app">
      <ul>
        <li v-for="(item, index) in items">{{ index }}--{{ item }}</li>
      </ul>
    </div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          items: ['test1', 'test2', 'test3'],
        },
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 2) 遍历对象

只取值: v-for="value in obj"
取键和值: v-for="(value, key) in obj"
取键和值和索引: v-for="(value, key, index) in obj"

#

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

#vue2

上次更新: 2021/09/03, 15:32:17

← Vue实例计算属性与侦听器→