Vue3 模板语法

 

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

 

Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

 

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

 

插值

 

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

 

文本插值

 

<div id="app">

  <p>{{ message }}</p>

</div>

 

{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。

 

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

 

<span v-once>这个将不会改变: {{ message }}</span>