01_Vue模板语法

byboy

2023-6-18

Vue

Vue模板语法

Vue模板语法有两大类：

插值语法：

功能：用于解析标签体内容。

写法：{{xxx}}

用法：

<body>
  <div id="app">
    <h1>{{ name }}</h1>
    <h1>{{ name.toUpperCase() }}</h1>
    <p>{{ age }}</p>
    <p>{{ age + 1}}</p>
    <p>{{ 10 > 20 }}</p>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          name: 'byboy',
          age: 20
        };
      },
    });
  </script>
</body>

{{ name }} 将会被替换成 data 中 name 对应的内容，无论何时， data 中的 name 发生变化时，{{ name }}也会同步更新。

{{ name }} 也可以是一个JavaScript表达式

注意：差值语法只能写在标签体内，不能写在标签的属性上。

指令语法：

功能：用于解析标签（包括：标签体内容、标签体属性、事件绑定......）

写法：指令是带有 v- 前缀的特殊属性，例如：v-bind、v-modle 、v-on 等......

用法：

<body>
  <div id="app">
    <a v-bind:href="url">Blog</a>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          url: 'https://blog.byboy.cn/'
        };
      },
    });
  </script>
</body>

v-bind:href="url" 中的 url 会被替换成 data 中的 url

阅读剩余

THE END