Vue 模板语法之指令语法

指令语法：

1,什么是指令？有什么作用？

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 dom

2.vue框架中的所有指令的名字都以"v-"开始。

3.插值是写在标签体当中的，那么指令写在标签的属性里面

例如：<span 指令是写在这里的> {[这里是插值语法的位置}} </span>

注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。

是需要先让vue框架进行编译的，编译之后的内容浏览器是可以看懂的。

4.指令的语法规则：

指令的一个完整的语法格式：

<html标签 v-指令名:参数 = "表达式" > </html标签>

表达式：

表达式等于插值语法（但是不需要在外层再添加 {{}} ）

不是所有的指令都有参数和表达式：

有的指令，不需要参数，也不需要表达式，例如：v-once

有的指令，不需要参数，但是需要表达式，例如：v-if-"表达式"

有的指令，既需要参数，又需要表达式，例如：v-bind:参数-"表达式"

v-once 指令

作用：只渲染元素一次，随后的重新渲染，元素及其所有的子节点将破视为静态内容并跳过，这可以用于优化更新性能

在一开始打开（第一次渲染）的时候，能发现都是一样的内容

然后我们点击 F12 找到 Vue 在里面 data 的值修改为【今天天气很差】并保存

这个时候没有【v-once】的标签进行了修改，而有【v-once】的标签则没有进行修改，被视为静态内容并跳过

v-if-"表达式"指令

作用：表达式的执行结果需要是一个布尔类型的数据：true或者false

true:这个指令所在的标签，会被渲染到浏览器当中。

false:这个指令所在的标签，不会被渲染到浏览器当中。

当【v-if】的值为【true】的时候

当【v-if】的值为【false】的时候

该文章为笔记，教程为动力节点的老杜Vue视频教程，Vue2 Vue3实战精讲
视频链接：https://www.bilibili.com/video/BV17h41137i4?p=1&vd_source=2136c732ce8d5a3f412e2f7064285cb7