理解模板语法 | 重学Vue3

前言

这个月开始重新开始学习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 (
      
        Hello world!
      
    )
  }
})

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

插值

此处分4点来讲:

1. 文本插值

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

//components/HelloWorld.vue

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

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

例如:




结果如下

image.png

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

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




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

2. 原始 HTML

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

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

//components/HelloWorld.vue



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

3. Attribute插值

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


通过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表达式

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

END~

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

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

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

You may also like...