Vue的模板语法(双大括号表达式、插值、v-bind 指令、v-on、指令缩写)

Myth丶恋晨 2024-03-26 11:20 26阅读 0赞

#### 模板语法 ####

*  前言
 *  知识点
 *  1、双大括号表达式
 *  2、插值
 *   *  2.1 文本
     *  2.2 原始 HTML
     *  2.3 特性
     *  2.4 javascript 表达式
 *  3、指令
 *   *  3.1 参数
     *  3.2 动态参数
     *  3.3 修饰符
 *  4、指令缩写
 *   *  4.1 v-bind
     *  4.2 v-on

--------------------

## 前言 ##

> 相信模板语法大家多少都有所接触，例如百度模板引擎、ejs 等等。同样 Vue.js 也使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析，通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时，你可以写在 HTML 元素上的操作语法，让你开发更高效，例如：绑定样式，循环出元素列表等。

## 知识点 ##

*  双大括号表达式
 *  插值
 *  v-bind 指令
 *  v-on 指令
 *  指令缩写

## 1、双大括号表达式 ##

> 在前端的发展历程中，为了提高开发效率，诞生了很多模板引擎，方便渲染元素或者绑定数据，很多引擎模板都采用 \{ \{双大括号表达式\}\} 的语法进行插值。同样 Vue.js 也借鉴了 Angular.js 的双花括号的方式，进行向页面输出数据和调用对象方法。让我们感受一下双大括号表达式，在环境中新建一个.html 后缀文件，引入 Vue.js，输入以下代码，运行（open with Preview 或 Mini Browser）。

<!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>syl-vue</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        
        <div id="app">
          <input type="text" v-model="msg" />
          <p>{
       {msg}}</p>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app", // el: 挂载点
    
            data: {
          
              // data:数据选项
    
              msg: "hello",
            },
          });
        </script>
      </body>
    </html>

> 双大括号中的 \{ \{msg\}\}，绑定至底层 Vue 实例的数据，在浏览器中就被渲染成实例 data 选项中 msg 的值。  
> ![在这里插入图片描述][b9e87197203845f6bb44bd9912e57c33.png]

## 2、插值 ##

### 2.1 文本 ###

> 在 Vue.js 中数据绑定最常见的形式就是使用 “Mustache” 语法 (双大括号) 的文本插值：

> 双大括号中的值将会被替代为对应 data 对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

> 但是通过使用 v-once 指令你也能执行一次性地插值，当数据 改变时，插值处的内容 不会更新。但是你需要注意一下，该元素节点下面其他数据的绑定，数据改变，内容也不会更新，所以，注意代码块的划分。

### 2.2 原始 HTML ###

> 上面的双大括号表达式会将数据解释为普通文本，即使你的数据为 HTML 元素，也不会渲染成对应的标签元素，只能渲染成普通文本，而非 HTML 代码，例子：

![在这里插入图片描述][afbac06d12714337841b4c48e164ca8d.png]  
`上面明明我们写的是 HTML 标签，为什么没渲染出来，那就是因为双大括号表达式会将数据解释为普通文本。`

> 我们就需要认识另外一个指令 **v-html**，使用它我们就能将它正确渲染。

![在这里插入图片描述][6a936f24e0a74f759e77f6f160b2f3b9.png]

### 2.3 特性 ###

> 双大括号语法不能作用在 HTML 特性（标签属性）上，需要对标签属性操作，应该使用 v-bind 指令：

> HTML 标签属性为布尔特性时，它们的存在表示为 true，v-bind 工作起来略有不同，在这个例子中：

![在这里插入图片描述][c8d272d62c394ec3b4bfdc9c32909f4c.png]  
`注意： 如果 isChecked 的值是 null、undefined 或 false，则 checked 特性甚至不会被包含在渲染出来的 <input> 元素中，我们将 data 中的 isChecked 值改为 null。`

var app = new Vue({ el:'#app', data:{ isChecked:null // isChecked是否选中 } })

### 2.4 javascript 表达式 ###

> 上面，我们只进行了绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，感受强大的模板语法力量吧！

<!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>syl-vue</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        
        <div id="app">
          
          <p>num + 24 = {
       {num + 24}}</p>
          
          <p>Are you ok? {
       {ok ? 'I am ok !':'no'}}</p>
          
          <p>名字倒过来写：{
       {name.split('').reverse().join('')}}</p>
          
          <p v-bind:class="'col'+colNum">syl</p>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app",
            data: {
          
              num: 20,
              ok: true,
              name: "实验楼",
              colNum: "12",
            },
          });
        </script>
      </body>
    </html>

![在这里插入图片描述][928bf8fc1ee14b74a63cbc65e8c6f683.png]

## 3、指令 ##

**指令 (Directives) 是带有 v- 前缀的特殊特性。**

### 3.1 参数 ###

> 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定，例子：

> 另外一个例子，v-on 指令，用于监听 DOM 事件，例子：

<!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>syl-vue</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        
        <div id="app">
          <p>我叫：{
       {name}}</p>
          
          <button v-on:click="handleClick">点我</button>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app",
            data: {
          
              name: "实验楼",
            },
            methods: {
          
              // 实例方法对象
              handleClick: function () {
          
                this.name = this.name.split("").reverse().join("");
              },
            },
          });
        </script>
      </body>
    </html>

### 3.2 动态参数 ###

> 上面属性或者事件我们都是写死的，其实在 Vue 它也可以是动态的。

<!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>syl-vue</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        
        <div id="app">
          <p>我叫：{
       {name}}</p>
          <button v-on:[event]="handleClick">点我</button>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app",
            data: {
          
              name: "实验楼",
              event: "click",
            },
            methods: {
          
              handleClick: function () {
          
                this.name = this.name.split("").reverse().join("");
              },
            },
          });
        </script>
      </body>
    </html>

> event 此时的值为 click，那我们点击按钮时就会触发事件回调，运行结果和上面一样。

### 3.3 修饰符 ###

> 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，大致分为三类，后面课程我们会一一接触到：

*  事件修饰符
 *  按键修饰符
 *  系统修饰符

> 例如，事件修饰符中的 .prevent 修饰符和原生 event.preventDefault() 效果一样，可以阻止事件默认行为，在表单中点击提交按钮，就会发生页面跳转，但是使用了 .prevent 就不会发生跳转，例如：

<!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>syl-vue</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        
        <div id="app">
          <form action="/" v-on:submit.prevent="submit">
            <button type="submit">提交</button>
          </form>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app",
            data: {
          },
            methods: {
          
              submit: function () {
          
                console.log("成功提交！");
              },
            },
          });
        </script>
      </body>
    </html>

## 4、指令缩写 ##

> v- 是 Vue.js 中特定的标志，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为时，v- 前缀很有帮助，但是频繁使用到，也会让人感觉不到代码的简洁之道，就会感到不是太人性化。同时，在构建由 Vue 管理所有模板的单页面应用程序时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

### 4.1 v-bind ###

> 上面例子中我们使用了 v-bind 绑定属性。

> 我们可以简写为：

> 同样的使用 v-bind 绑定的其他属性也可以简写。  
> 例如，v-bind:class=“className” 可以简写为 :class=“className”，v-bind:value=“myValue” 可以简写为 :value。

### 4.2 v-on ###

> 上面 v-bind 指令提供简写，同样 v-on 指令也提供简写，但是与 v-bind 有一些差异，v-on: 使用 @ 简写。

<button v-on:click="handleClick">点我</button>
    
    <button @click="handleClick">点我</button>

[b9e87197203845f6bb44bd9912e57c33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ef35703e17ae49f0b7ea35ae7b9baa72.png
[afbac06d12714337841b4c48e164ca8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ae1fdd323564443584eea290ef01023f.png
[6a936f24e0a74f759e77f6f160b2f3b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c451cd163cf94d769d631e99a0ffaf75.png
[c8d272d62c394ec3b4bfdc9c32909f4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c510152bda594060b5cc20e289c0dd0e.png
[928bf8fc1ee14b74a63cbc65e8c6f683.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/77e69089a2764550a5f9998776fbed9f.png