3.模板语法

模板语法

Vue使用一种基于HTML的模板语法，可以声明式地将组件实例上的数据绑定到呈现的DOM上，在底层机制中，Vue会将模板编译成高度优化的JavaScript代码。结合响应式系统，当应用系统发生变更时，Vue能智能推导出需要重新渲染的组件的最小数量，并应用最少的DOM操作。

1.文本语法

语法：{{}}

 <!-- 1、文本插入: {{}} -->
 <div>1.文本插入：{{message}}</div>
 
 
// 1、文本插入: {{}}
const message = "小羊爱吃草"

2.原始HTML

语法：v-html=“”

  <!--  2、原始HTML: v-html="" -->
  <div>2.原始HTML：<span v-html="originHTML"></span></div>
  
  // 2、原始HTML: v-html=""
let originHTML = `
  <span style="color:green;font-weight:bold;">
    小羊吃绿色的草
  </span>`  

3.Attribute 绑定

语法：v-bind:bindName=“bindValue”

  <!--  3、Attribute 绑定：v-bind:bingName=bindValue -->
  <div v-bind:id="attrValue">3、Attribute绑定</div>
  <!--  简写为：  :bindName=bindValue -->
  <div :id="attrValue">3、Attribute绑定简写</div>
  
  
// 3、Attribute 绑定：v-bind:bingName=bindValue
let attrValue = "小羊被绑定了"

4.使用JavaScript表达式

  <!-- 4、使用JavaScript表达式 -->
  <div>4、JavaScript表达式-运算: {{ message + '+表达式'}}</div>
  <div>4、JavaScript表达式-三元: {{ message.includes('小羊')?'小羊':'不是小羊'}}</div>
  <div :id="`name-${message}`">4、JavaScript表达式</div>
  <div :title="getName()">4、JavaScript表达式-方法：{{getName()}}</div>
  

5.动态参数

 <!-- 5、动态参数 -->
  <a v-bind:[attributeName]="url">动态参数</a>
  <a :[attributeName]="url">动态参数</a>
  
  <div @[eventName]="doSomething"></div>
  
  // 5、动态参数
const attributeName = "href"
const url="http://www.baidu.com"

const eventName="click"
const doSomething = function(){
  location.href ="http://www.baidu.com"
}

以上整体代码：

<template>
  <h1>模板语法</h1>
  
  <!-- 1、文本插入: {{}} -->
  <div>1.文本插入：{{message}}</div>
  
  <!--  2、原始HTML: v-html="" -->
  <div>2.原始HTML：<span v-html="originHTML"></span></div>
  
  <!--  3、Attribute 绑定：v-bind:bingName=bindValue -->
  <div v-bind:id="attrValue">3、Attribute绑定</div>
  <!--  简写为：  :bindName=bindValue -->
  <div :id="attrValue">3、Attribute绑定简写</div>
  
  <!-- 4、使用JavaScript表达式 -->
  <div>4、JavaScript表达式-运算: {{ message + '+表达式'}}</div>
  <div>4、JavaScript表达式-三元: {{ message.includes('小羊')?'小羊':'不是小羊'}}</div>
  <div :id="`name-${message}`">4、JavaScript表达式</div>
  <div :title="getName()">4、JavaScript表达式-方法：{{getName()}}</div>
  
  
  <!-- 5、动态参数 -->
  <a v-bind:[attributeName]="url">动态参数</a>
  <a :[attributeName]="url">动态参数</a>
  
  <div @[eventName]="doSomething"></div>
</template>

<script setup lang="ts">
// 1、文本插入: {{}}
const message = "小羊爱吃草"

// 2、原始HTML: v-html=""
let originHTML = `
  <span style="color:green;font-weight:bold;">
    小羊吃绿色的草
  </span>`
  
// 3、Attribute 绑定：v-bind:bingName=bindValue
let attrValue = "小羊被绑定了"

// 4、JavaScript表达式
const getName = function(){
  return 'jsName'
}

// 5、动态参数
const attributeName = "href"
const url="http://www.baidu.com"

const eventName="click"
const doSomething = function(){
  location.href ="http://www.baidu.com"
}
</script>

<style scoped>

</style>

运行结果：

onst eventName=“click”
const doSomething = function(){
location.href =“http://www.baidu.com”
}

运行结果：

![在这里插入图片描述](https://img-blog.csdnimg.cn/15545f2cb14a49b58761fe1e36a38a73.png#pic_center)