模版语法&指令

# 模版语法&指令

# 基础

插值表达式 {{}} Mustache
v-html
v-text
v-once
v-pre
v-cloak
过滤器（3.0后没有了）

# v-bind 🔥

# 绑定 class

# 绑定 style

# 动态属性—封装组件 🔥

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="my-app">
      <div :[name]="value">哈哈哈</div>
    </template>

    <script src="../lib/vue@3.2.26.js"></script>
    <script>
      const App = {
        template: '#my-app',
        data() {
          return {
            name: 'cba',
            value: 'kobe',
          }
        },
      }

      Vue.createApp(App).mount('#app')
    </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
28
29
30
31

# 绑定对象—封装组件传递 prop 🔥

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="my-app">
      <div v-bind="info">哈哈哈哈</div>
      <!-- 可以这样写，就是阅读性太差，官方文档也没这样写 -->
      <div :="info">哈哈哈哈</div>
    </template>

    <script src="../lib/vue@3.2.26.js"></script>
    <script>
      const App = {
        template: '#my-app',
        data() {
          return {
            info: {
              name: 'why',
              age: 18,
              height: 1.88,
            },
          }
        },
      }

      Vue.createApp(App).mount('#app')
    </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
28
29
30
31
32
33
34
35
36
37

# v-on 🔥

# 基本&绑定对象—封装组件 🔥

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

    <style>
      .area {
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <template id="my-app">
      <!-- 完整写法: v-on:监听的事件="methods中方法" -->
      <button v-on:click="btn1Click">按钮1</button>
      <div class="area" v-on:mousemove="mouseMove">div</div>
      <!-- 语法糖 -->
      <button @click="btn1Click">按钮1</button>
      <!-- 绑定一个表达式: inline statement -->
      <button @click="counter++">{{counter}}</button>
      <!-- 绑定一个对象 -->
      <div class="area" v-on="{click: btn1Click, mousemove: mouseMove}"></div>
      <div class="area" @="{click: btn1Click, mousemove: mouseMove}"></div>
    </template>

    <script src="../lib/vue@3.2.26.js"></script>
    <script>
      const App = {
        template: '#my-app',
        data() {
          return {
            message: 'Hello World',
            counter: 100,
          }
        },
        methods: {
          btn1Click() {
            console.log('按钮1发生了点击')
          },
          mouseMove() {
            console.log('鼠标移动')
          },
        },
      }

      Vue.createApp(App).mount('#app')
    </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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 参数传递 🔥

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="my-app">
      <!-- 默认传入event对象, 可以在方法中获取 -->
      <button @click="btn1Click">按钮1</button>
      <!-- $event可以获取到事件发生时的事件对象 -->
      <button @click="btn2Click($event, 'coderwhy', 18)">按钮2</button>
    </template>

    <script src="../lib/vue@3.2.26.js"></script>
    <script>
      const App = {
        template: '#my-app',
        data() {
          return {
            message: 'Hello World',
          }
        },
        methods: {
          btn1Click(event) {
            console.log(event)
          },
          btn2Click(event, name, age) {
            console.log(name, age, event)
          },
        },
      }

      Vue.createApp(App).mount('#app')
    </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
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 修饰符

编辑

上次更新: 2022/03/23, 17:55:39

← 入门条件渲染&列表渲染→