携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

模板语法

基本：使用了基于 HTML 的模板语法，开发者可以声明式地将 DOM 绑定底层 Vue 实例的数据。
核心：允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

渲染、插入文本

vue3和一些web框架一样，使用{{...}}进行文本数据绑定。代码示例：

在{{}}中的value属性的值将被vue中的文本数据替换。如果value的属性发生改变，数据也会随之改变。

<div id="demoapp2" class="demo">
        <p>{{ vaule }}</p>
      </div>
      
      <script>
      const demo2 = {
        data() {
          return {
            vaule: "这是我插入的文本！！！！"
          }
        }
      }
      
      Vue.createApp(demo2).mount('#demoapp2')
      </script>

当我们只是想一次性插入文本而不随着value的属性值的改变而插入的文本内容，我们可以使用v-once 指令执行一次性地插值，当数据改变时，插值处的内容将不会更新。

<div id="demoapp2" class="demo">
        <p v-once>{{ vaule }}</p>
      </div>

插入HTML代码

我们可以使用v-html指令进行html代码的输出。

代码示例：

<div id="demoapp2" class="demo">
      <p v-html="htmlDemo"></p>
      </div>
      
      <script>
      const demo2 = {
        data() {
          return {
            htmlDemo: '<p style="font-size:50px">字体大小：50px </p>'
          }
        }
      }
      
      Vue.createApp(demo2).mount('#demoapp2')
      </script>

展示效果：

v-bind 指令。

在我们操作HTML属性中的值时，我们应该使用 v-bind 指令。

代码示例：

 <style>
        .classOne{
          color: rgb(225, 46, 46);
        }
        </style>
        
        
<div id="app">
    <label >改变颜色</label><input type="checkbox" v-model="use" >
    
    <br><br>
    <div v-bind:class="{'classOne': use}">
      我在使用v-bind指令改变颜色
    </div>
  </div>
  
  <script>
  const app = {
    data() {
      return {

        use: false
      }
    }
  }
   
  Vue.createApp(app).mount('#app')
  </script>

效果：

vue3学习之路 | 模板语法

模板语法

渲染、插入文本

插入HTML代码

v-bind 指令。