Vue 第4章（模块插值& vue指令）

模块插值

我们在Script声明变量可在template里使用，语法为{{变量名称}}

<template>
<div>
//使用运算
  {{a+3}}
  //条件运算
    {{a?'true':'false'}}
//使用api
 <div>{{ message.split('，') }}</div>
</div>
</template>


<script setup lang="ts">
//此处setup为语法糖，在普通模式下，需要返回值
const a:number = '1,2,4'
</script>

<style scoped>

</style>

指令

v- 开头都是vue 的指令

v-text 用来显示文本

v-html 用来展示富文本

v-if 用来控制元素的显示隐藏（切换真假DOM）

v-else-if 表示 v-if 的“else if 块”。可以链式调用

v-else v-if条件收尾语句

v-show 用来控制元素的显示隐藏（display none block Css切换）

v-on 简写@ 用来给元素添加事件

v-bind 简写:  用来绑定元素的属性Attr

v-model 双向绑定

v-for 用来遍历元素

v-on修饰符 冒泡案例

v-once 性能优化只渲染一次

v-memo 性能优化会有缓存