【Vue3】模板语法

🏆今日学习目标：模板语法
😃创作者：颜颜yan_
✨个人格言：生如芥子，心藏须弥
⏰本期期数：第三期
🎉专栏系列：Vue3

---

---

前言

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层组件实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数，结合响应性系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减少到最少。
参考文档：Vue3官网

---

声明响应式状态

选用选项式 API 时，会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue 将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上。

插值

文本

数据绑定最常见的形式就是使用Mustache（双大括号）语法的文本插值，Mustache标签会自动替代为对应组件实例中的属性。

<p>{{num}}</p>

也可以使用v-once进行一次性插值，当数据改变时，插值处的数据不会更新，也就是一次性渲染。

<p v-once>{{uname}}</p>

如果使用{{}}插入一个HTML内容，则需要添加v-html指令，让插入的HTML内容以HTML的形式进行显示，否则会显示字符串。
注意： v-html指令后面需要添加一个string类型来进行赋值。
v-html可以识别HTML代码，如果任意使用HTML动态渲染会很容易导致XSS攻击，所以要谨慎使用噢

<p >{{name}}</p>
<p v-html="name"></p>

Attribute（属性）

Mustache语法不能在HTML的属性中使用，但是可以使用v-bind指令，v-bind指令用来动态绑定属性的内容。如果绑定的值是null或undefined，那么该属性将不会被包含在渲染的元素上。

<p v-bind:id="dynamicId">v-bind绑定</p>

使用JavaScript表达式

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

<p>{{num+1}}</p>

指令

指令是带有v-前缀的特殊属性，指令属性的值预期是单个JavaScript表达式。当表达式的值发生改变时，将其产生的连带影响，响应式地作用于DOM。如下是几个常用指令。

• v-on：用于监听DOM事件。
• v-if：条件渲染指令。
• v-show：隐藏节点。
• v-for：列表渲染指令。

---

总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~