模板插值语法
在script 声明一个变量可以直接在template 使用用法为{{变量名称}}
<template> <div>{{ message }}</div> </template> <script setup lang="ts"> const message = "我是小满" </script> <style> </style>
模板语法是可以编写条件运算的
<template> <div>{{ message == 0 ? '我是小满0' : '我不是小满other' }}</div> </template> <script setup lang="ts"> const message:number = 1 </script> <style> </style>
运算也是支持的
<template> <div>{{ message + 1 }}</div> </template> <script setup lang="ts"> const message:number = 1 </script> <style> </style>
操作API 也是支持的
<template> <div>{{ message.split('，') }}</div> </template> <script setup lang="ts"> const message:string = "我，是，小，满" </script> <style> </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 性能优化会有缓存具体请看我的掘金
<template> <div @click="parent"> <div @click.stop="child">child</div> </div> </template> <script setup lang="ts"> const child = () => { console.log('child'); } const parent = () => { console.log('parent'); } </script>
阻止表单提交案例
<template> <form action="/"> <button @click.prevent="submit" type="submit">submit</button> </form> </template> <script setup lang="ts"> const submit = () => { console.log('child'); } </script> <style> </style>
v-bind 绑定class 案例 1
<template> <div :class="[flag ? 'active' : 'other', 'h']">12323</div> </template> <script setup lang="ts"> const flag: boolean = false; </script> <style> .active { color: red; } .other { color: blue; } .h { height: 300px; border: 1px solid #ccc; } </style>
v-bind 绑定class 案例 2
<template> <div :class="flag">{{flag}}</div> </template> <script setup lang="ts"> type Cls = { other: boolean, h: boolean } const flag: Cls = { other: false, h: true }; </script> <style> .active { color: red; } .other { color: blue; } .h { height: 300px; border: 1px solid #ccc; } </style>
v-bind 绑定style案例
<template> <div :style="style">2222</div> </template> <script setup lang="ts"> type Style = { height: string, color: string } const style: Style = { height: "300px", color: "blue" } </script> <style> </style>
v-model 案例
<template> <input v-model="message" type="text" /> <div>{{ message }}</div> </template> <script setup lang="ts"> import { ref } from 'vue' const message = ref("v-model") </script> <style> .active { color: red; } .other { color: blue; } .h { height: 300px; border: 1px solid #ccc; } </style>
