Vue3 模板语法与vue指令

Vue -模板插值语法

在script中生声明变量可以接在template中使用，使用方法：{{变量名}} ，实列如下：

<script setup  lang="ts">             // setup vue提供的一种语法糖模式 

  const name:string = "香菱";

 </script>

<template>

 <h1>{{ name  }}</h1>   

 </template>

 vue指令

1. v-bind：绑定一个或多个属性到 Vue 实例的数据
2. v-on：监听一个或多个事件，并在触发时执行相应的方法
3. v-model：在表单元素上创建双向数据绑定
4. v-for：循环渲染一个数组或对象的属性
5. v-if/v-else：根据条件决定是否渲染元素
6. v-show：根据条件决定是否显示元素（使用 CSS 的 display 属性）
7. v-text：更新元素的文本内容
8. v-html：更新元素的 HTML 内容
9. v-cloak：防止 Vue 实例初始化过程中闪烁出现插值表达式的原始文本内容
10. v-pre：跳过元素和其子元素的编译过程，直接输出原始的文本内容
11. v-once：只渲染元素和组件一次，不再随数据变化而重新渲染
12. v-bind:class：根据条件动态绑定元素的 class 属性
13. v-bind:style：根据条件动态绑定元素的 style 属性
14. v-once：只渲染组件一次，不再随数据变化而重新渲染
15. v-slot：定义插槽，用于在组件中传递内容
16. v-is：用于动态切换组件的的标签名
17. v-once：只渲染组件一次，不再随数据变化而重新渲染
18. v-pre：跳过组件的编译过程，直接输出原始的文本内容

 import {ref} from 'vue';

  let num:number = 1;

  const event ='click';

  const istrue:boolean = true;

  const isShow:boolean  = true ;

  const name   =ref("小凌") ;

  const str:number[]  =  [1,2,3,4,5,6,7]

  const sum = () =>{

   alert(1+ num  +  "v-on 动态使用方法");

  }

  const pre  =() =>{

    alert("父级也弹出来了！");

   }

 </script>

<template>

<h1 v-bind:name>v-bind的用法  </h1>

<div @click="pre">

    <button @click.stop ="sum">点击</button>

</div>

<button @[event]="sum">点击 </button>

<h1 v-show="isShow">v-show的用法 </h1>

<h1 v-if="istrue">v-if的用法 </h1>

<div>

    <input v-model ="name" type="text">

    <div>{{ name }}</div>

    <div :key="index" v-for="(item,index) in str">

        {{ index }} -{{ item }}

    </div>

</div>

 </template>