Vue3.x 全家桶 | 04 - Vue 的 Mustache 语法

最新推荐文章于 2024-08-04 23:53:36 发布

Riemann Hypothesis

最新推荐文章于 2024-08-04 23:53:36 发布

阅读量743

点赞数 31

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/136413357

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

iShot_2023-12-21_18.33.21.png

一、Vue 的 Options API : method

上篇文章中提到的 Options API 的核心选项之一就包含了 methods 选项，methods 是一个用于定义方法的选项。methods 中包含了一组方法，这些方法可以在 Vue 组件的模板中被调用。每个方法都是一个函数，可以执行一些特定的逻辑。

methods 是一个对象类型，这个对象的每个属性都是一个个的函数，比如在计数器的案例中我们就在 methods 中定义了两个函数。

这些函数可以绑定到模板中，并且可以通过 this 关键字直接访问到 data 选项中返回的对象的属性。

创建一个 HTML 页面，实现一个类似计数器的功能，在该页面中通过两个按钮来对 data 选项中返回的 volume 变量记性操作，通过 methods 选项中定义的两个方法实现，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <h1>Tesla Model 3 Sales: {{ volume }}</h1>
      <button v-on:click="increaseSales"> +1000 Sales</button>
      <button v-on:click="decreaseSales"> -1000 Sales</button>
    </div>

  <script src="../lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        console.log("data选项中传入的函数执行了！")
        return {
          volume: 0
        }
      },
      methods: {
        increaseSales(){
          console.log("methods 选项中的 increaseSales 函数被调用了")
          // 输出 this
          console.log(this)
          this.volume+=1000
        },
        decreaseSales(){
          console.log("methods 选项中的 decreaseSales 函数被调用了")
          console.log(this)
          this.volume-=1000
        }
      },
    })
 
    app.mount('#app')
  </script>
</body>
</html>

使用 LiverServer 打开 HTML 页面，点击增加按钮：

控制台中输出的 this 是一个 Proxy 对象，这个对象指的就是 Vue 实例，可以访问当前实例中定义的数据、计算属性以及其他方法。

但为什么是一个 Proxy 对象呢？这是因为 Vue3.x 引入了 Proxy 来进行数据的劫持和监听，代替了 Vue2.x 中使用的 Object.defineProperty。这个 Proxy 对象的引入有一些重要的意义和优势，有着 更灵活的劫持机制 、深层响应性 、更好的性能 以及 更易扩展。

关于这个 this 官网中也有提到，为什么不能使用箭头函数？

这是因为箭头函数的特性，即不绑定自己的 this 上下文，而是继承自外围的作用域；在 Vue 组件中，如果使用箭头函数定义 methods 中的方法，this 将指向外围的上下文，而不是组件实例。这可能导致你无法访问组件实例中的数据、计算属性、或其他方法。

推荐使用普通函数声明，Vue 在内部会确保在调用这些方法时正确绑定 this，使得 this 指向 Vue 组件实例。

那么这个 this 可不可以是 window 呢？

我们可以在 decreaseSales 方法中使用箭头函数，从而让 this 指向 window：

decreaseSales: () => {
  console.log("methods 选项中的 decreaseSales 函数被调用了")
  console.log(this)
  this.volume-=1000
}

刷新 HTML 页面，点击减少按钮：

Dec-22-2023 01-53-48.gif

可以看到这里并没有修改成功，并且输出的 this 指向的是 window，基于箭头函数 this 的查找规则，这里的 this 会在自己的上层作用域中查找，找到的就是 script 中的 this，也就是 window。

并且因为 window 对象中并没有 volume 属性，所以修改失败。

在 Vue 源码中，Vue 实例绑定 this 的主要是通过 JavaScript 中的 bind 方法。这确保了在方法内部，this 始终指向 Vue 实例。

在 JavaScript 中，this 的绑定规则主要有四种情况，它们分别是：

默认绑定： 当函数被独立调用时，this 会指向全局对象（在浏览器环境中通常是 window）。
隐式绑定： 当函数作为对象的方法被调用时，this 会指向该对象。
显式绑定： 使用 call、apply 或者 bind 方法，手动指定函数调用时的 this 值。
new 绑定： 当构造函数被 new 关键字调用时，this 会指向新创建的对象实例。

二、Vue 的模板语法

前面通过七篇文章我们已经了解 Vue 中的基本语法以及核心的 Options API，在此基础上我们将会深入的了解 Vue 中的语法以及指令和其他的 API 的使用。

在 Vue 的开发中大多数情况下都是使用基于 HTML 的模板语法，在模板中允许开发者以声明式的方式将 DOM 和底层组件实例的数据绑定在一起，Vue 的底层会将模板编译成虚拟 DOM 渲染函数。

Vue 的模板语法包括了 Mustache 插值语法以及各种 v- 开头的指令：

文本插值： 使用双大括号 {{ }} 进行文本插值，将数据绑定到视图中。
指令（Directives）： 指令是带有 v- 前缀的特殊属性，用于在模板中添加一些特殊的行为。
- 条件渲染（v-if、v-else-if、v-else）：
- 列表渲染（v-for）：
- 事件绑定（v-on）：
- 双向绑定（v-model）：
- 属性绑定（v-bind）：
计算属性： 使用 computed 属性定义计算属性，可以在模板中使用。
事件处理： 在模板中可以直接调用定义在 methods 中的方法。
过滤器： 使用过滤器可以在插值中对数据进行处理。

通过这些语法，我们可以方便地处理数据绑定、条件渲染、列表渲染、事件处理等方面的逻辑。Vue 模板语法的设计目标是简单、直观，使得开发者能够更容易理解和维护视图代码。

三、Mustache 插值语法

如果我们希望把数据展示到模板 template 上，可以使用 Mustache 插值语法，也就是 {{}} 这种形式，插值语法中不仅可以展示变量也可以展示 JS 表达式。

渲染变量的值

创建 HTML 页面，使用 data 选项定义一个变量，并使用 {{}} 在模板中渲染变量的值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>1.显示变量的值:</h2>
    <h3>{{message}}</h3>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    // 创建 app
    const app = Vue.createApp({
      data: function(){
        return {
          message: 'Hello Vue'
        }
      }
    })

    // 挂载 app
    app.mount('#app')
  </script>
</body>
</html>

使用 LiverServer 打开 HTML 页面：

渲染 JS 表达式的值

插值语法可以直接渲染变量的值，还可以渲染JS表达式的值：

<h2>2.显示JS表达式的值:</h2>
<h3>{{message.split(" ")}}</h3>

刷新 HTML 页面：

渲染对象的属性值

在 data 选项中定义一个 Vehicle 对象：

// 创建 app
const app = Vue.createApp({
  data: function(){
    return {
      message: 'Hello Vue',
      vehicle: {
        name: "Model 3",
        factory: "Shanghai Giga Factory",
        volume: 1800000
      }
    }
  }
})

// 挂载 app
app.mount('#app')

使用插值语法渲染对象的属性，使用打点 . 的方式：

<h2>3.显示对象属性的值:</h2>
<h3>{{vehicle.name}}</h3>

刷新 HTML 页面：

渲染三元表达式的值

插值语法还支持显示三元表达式的值：

<h2>4.显示JS三元表达的值:</h2>
<h3>{{vehicle.volume > 1800000 ? "Model 3 完成销量目标":"Model 3 没有完成销量目标"}}</h3>

刷新 HTML 页面：

调用 methods 选项中的函数

在 methods 选项中定义函数：

// 创建 app
const app = Vue.createApp({
  data: function(){
    return {
      message: 'Hello Vue',
      vehicle: {
        name: "Model 3",
        factory: "Shanghai Giga Factory",
        volume: 2000000
      }
    }
  },
  methods: {
    getCurrentTime(){
      return "2023-12-22"
    }
  },
})

// 挂载 app
app.mount('#app')

插值表达式支持调用 methods 选项中定义的函数：

<h2>6.调用 methods 中的函数:</h2>
<h3>{{ getCurrentTime() }}</h3>

刷新 HTML 页面：

并且可以使用 data 选项中返回的变量作为参数：

methods: {
    getCurrentTime(message){
      return "2023-12-22" + message
    }
},

<h2>6.调用 methods 中的函数:</h2>
<h3>{{ getCurrentTime(message) }}</h3>

刷新 HTML 页面：

调用 computed 计算属性的函数

插值中支持使用计算属性，计算属性 computed 也是 Options API 的一部分，在 methods 选项同级中增加一个 computed 计算属性：

computed: {
    reversedMessage: function(){
      return this.message.split('').reverse().join('');
    }
}

在模板中使用计算属性：

<h2>7.显示计算属性的值:</h2>
<h3>{{ reversedMessage }}</h3>

刷新 HTML 页面：

插值表达式中`不支持定义语句`

插值表达式中不支持定义语句：

<h2>8.不能使用定义语句:</h2>
<h3>{{ const name = "X" }}</h3>

刷新 HTML 页面，报错如下：

插值表达式中`不支持逻辑控制语句`

插值表达式中不支持逻辑控制语句：

<h2>9.不能使用逻辑控制语句:</h2>
<h3>{{ if(true) return 'X' }}</h3>

刷新 HTML 页面，报错如下：

Vue 中的插值表达式 {{ }} 是用于将数据绑定到模板中的一种简化语法，而不是用于执行 JavaScript 语句或控制结构的地方。这是因为 Vue 的设计目标之一是保持模板的简洁性和可读性，使得模板部分更加专注于数据的展示和渲染。

Riemann Hypothesis

关注

31
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Vue3.x 全家桶 | 04 - Vue 的 Mustache 语法

在 Vue 的开发中大多数情况下都是使用基于 HTML 的模板语法，在模板中允许开发者以声明式的方式将 DOM 和底层组件实例的数据绑定在一起，Vue 的底层会将模板编译成虚拟 DOM 渲染函数。前面通过七篇文章我们已经了解 Vue 中的基本语法以及核心的 Options API，在此基础上我们将会深入的了解 Vue 中的语法以及指令和其他的 API 的使用。是一个对象类型，这个对象的每个属性都是一个个的函数，比如在计数器的案例中我们就在。会在自己的上层作用域中查找，找到的就是 script 中的。
复制链接

扫一扫

专栏目录