理解模板语法 | 重学Vue3

2021-07-22 本文已影响0人深度剖析JavaScript

前言

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！

本文内容是关于Vue的模板语法

基本目录如下：

image.png

基本介绍

主要讲以下3点：

image.png

1. Vue的模板语法是基于HTML

一方面方便开发者可以声明式地将 DOM 绑定至底层组件实例的数据中，另一方面它们都能被遵循规范的浏览器和 HTML 解析器解析

2. 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数

其实在我们之前手写中，这一点还待完善，如下：

compile(template) {
    return function render() {
        const h1 = document.createElement('h1')
        h1.textContent = this.count
        return h1;
    }
}

在真实的实现中，compile应该接受一个template，通过render函数将template转成虚拟DOM，而不是上述代码那样，返回真实的DOM。这点会在之后的手写中完善

3. 偏爱原生，可直接写渲染 (render) 函数，使用可选的 JSX 语法

例如：

import Xxx from './Xxx.vue'

new Vue({
  el: '#demo',
  render() {
    return (
      <Xxx>
        <span>Hello</span> world!
      </Xxx>
    )
  }
})

可以看到，以上的这种写法会更接近模板的语法

插值

此处分4点来讲：

1. 文本插值

文本插值使用Mustache语法来实现，即双大括号，还是以Vite创建的Vue3项目为例：

//components/HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

在上述代码中，msg和count其实就是文本插值，它会自动去组件实例中找对应属性

需要注意：双大括号会将数据解释为普通文本，而非 HTML 代码

例如：

<template>
  <h1>{{ myHTML }}</h1>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      myHTML: "<p>我是一个段落</p>",
    };
  },
};
</script>

结果如下

image.png

可以看到被当成了文本处理

通常，当数据变化时用户界面也会更新，但我们可以使用v-once 可实现一次性插值，即之后不再跟新，以HelloWorld.vue为例

<template>
  <h1>{{ myHTML }}</h1>
  <h1>{{ msg }}</h1>
  <button @click="count++" v-once>count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      count: 0,
      myHTML: "<p>我是一个段落</p>",
    };
  },
};
</script>

当按钮被点击时，count值并不会变化了，这就是一次性插值的概念

2. 原始 HTML

上述例子中，属性myHTML被当成了一个文本，但我们是希望把它当成HTML来解析，那怎么办？

Vue提供了v-html指令，用于输出真正的 HTML，如下

//components/HelloWorld.vue
<template>
  <h1 v-html="myHTML"></h1>
  <h1>{{ msg }}</h1>
  <button @click="count++" v-once>count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      count: 0,
      myHTML: "<p>我是一个段落</p>",
    };
  },
};
</script>

成功解析为HTML。但是使用v-html这种动态渲染 HTML 是非常危险的，容易导致 XSS 攻击，因此需要谨慎使用

3. Attribute插值

模板中的属性插值，可以通过v-bind轻松实现

<button v-bind:disabled="isButtonDisabled">按钮</button>

通过isButtonDisabled的值来决定button的状态

4. 支持 JavaScript 表达式

所有的数据绑定，Vue都提供了完全的 JavaScript表达式支持

但每个绑定都只能包含单个表达式，因此不能使用语句

{{ var a = 1 }}//不能生效

指令

此处分4点来讲：

image.png

1. 介绍

Vue的指令本质就是带有v-前缀的特殊属性，比如：

 v-bind:disabled="isButtonDisabled"

如上，其实大多数指令的值都是是单个 JavaScript 表达式

其实说白了，指令的职责就是当表达式的值改变时，会响应式的影响DOM

2. 参数

一些特定指令可以接受特定的参数，指令和参数之间使用冒号隔开，比如

v-bind:href="xxx"

3. 动态参数

指令参数可以使用JS表达式，表达式用方括号[]括起来

4. 修饰符

修饰符以半角句号.指明的特殊后缀，比如：

v-on:submit.prevent="xxx"

prevent修饰符表示阻止默认事件

指令的缩写

此处分成2点来说

对于一些频繁用到的指令,vue提供了简写方式

1. 常用简写

v-bind直接省略

v-on简写为@

2. 注意事项

对动态参数值约定

动态参数预期会求出一个字符串，异常情况下值为 null
其它非字符串类型的值都将会触发一个警告

对动态参数表达式约定

某些字符如空格和引号，放在HTML attribute名里是无效的，因此Vue对动态参数表达式有一些语法约束
可以使用没有空格或引号的表达式，或用计算属性替代一些复杂表达式

JS表达式

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math和 Date
不应该在模板表达式中试图访问用户定义的全局变量

END~

以上就是关于模板语法的所有内容

如有问题，欢迎留言告知，感谢~

为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map

理解模板语法 | 重学Vue3

前言

基本介绍

插值

指令

指令的缩写

猜你喜欢

热点阅读