模板语法

在script声明一个变量，可以直接在template使用，用法：{{变量名}}

<template>
  <div>
    <p>{{message}}</p>
    <p>{{message1+1}}</p>
    <p>{{message1==0 ? '等于0':'false不等于0'}}</p>
    <p>{{message1?'1=true':'0=false'}}</p>
    <p>{{message2.split('') }}</p>
  </div>
</template>

<script setup lang="ts">
//插值 mustache{{}}
const message="hello world"
//运算，条件运算
const message1:number=0 //0隐式转换是false
//操作api
const message2:string = "hello world"
//split把一个字符串分割成字符串数组
</script>

<style scoped>

</style>

指令

v-开头都是vue指令

v-text 显示文本

<template>
  <div v-text="message">
  </div>
</template>

<script setup lang="ts">
const message:string="v-text用来显示文本"
</script>

<style scoped>

</style>

v-html 把带有标签的字符串渲染成真正的HTML内容

<template>
  <div v-html="message">

  </div>
</template>

<script setup lang="ts">
const message:string="<div>把带有标签的字符串渲染成真正的HTML内容</div>"
</script>

<style scoped>

</style>

v-if 控制元素的显示隐藏（操作dom节点）

<template>
  <div v-html="message" v-if="flag">

  </div>
</template>

<script setup lang="ts">
const message:string="<div>把带有标签的字符串渲染成真正的HTML内容</div>"

const flag:boolean=false
</script>

<style scoped>

</style>

v-show 控制元素的显示隐藏 （操作display）

<template>
  <div v-html="message" v-show="flag">

  </div>
</template>

<script setup lang="ts">
const message:string="<div>把带有标签的字符串渲染成真正的HTML内容</div>"

const flag:boolean=false
</script>

<style scoped>

</style>

v-else-if

<template>
  <div>
     <div v-if="flag==A">A</div>
     <div v-else-if="flag==B">B</div>
     <div v-else-if="flag==C">C</div>
     <div v-else>D</div>
  </div>
</template>

<script setup lang="ts">
const message:string="<div>把带有标签的字符串渲染成真正的HTML内容</div>"

const flag:string="A"
</script>

<style scoped>

</style>

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

<template>
  <div>
     <button v-on:click="clickTap">button</button>
     <button @click="clickTap">简写</button>
  </div>
</template>

<script setup lang="ts">
const clickTap=()=>{
  console.log("触发了点击事件");
}
</script>

<style>

</style>

v-bind 简写 ：绑定元素的属性

绑定style

<template>
  <div v-bind:style="style1">
     v-bind绑定元素的属性
  </div>
</template>

<script setup lang="ts">
  type Style={
      color:string,
      height:string
  }
  const style1:Style={
    color:"blue",
    height:"300px"
  }
</script>

<style scoped>

</style>

绑定class

<template>
  <div>
     <div :class="['a','b']">
       red and solid
     </div>
     <p>--------------------------</p>
     <div :class="[flag?'a':'c']">
        red or blue
     </div>
     <p>--------------------------</p>
     <div :class="cls">
      red and solid
     </div>
  </div>
</template>

<script setup lang="ts">

const flag:boolean=true

type Cls={
  a:boolean,
  b:boolean
}
const cls:Cls={
  a:true,
  b:false
}
</script>

<style scoped>
.a{
  color:red;
}
.b{
  border:1px solid #ccc;
}
.c{
  color:blue;
}
</style>

v-for 遍历元素

<template>
  <div>
    <div :key="item" v-for="item in Arr">
      <p>元素：{{item}}</p>
    </div>
    <p>------------</p>
    <div :key="item" v-for="item in Arr1">
      <p>{{item.name}}</p>
      <p>{{item}}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const Arr:Array<number>=[1,2,3,4,5]
const Arr1:Array<any>=[{name:'1'},{name:'2'},{name:'3'}]
</script>

<style scoped>

</style>

v-model 双向绑定

ref定义响应式

<template>
	<div>
	<input v-model="message" type="text">
	<div>{{message}}</div>
	</div>
	</template>

	<script setup lang="ts">
	import {ref} from 'vue'
const message=ref('test')
	</script>

	<style>
	</style>