学习Vue3 第四章(模板语法 & vue指令)

简介: 在script 声明一个变量可以直接在template 使用用法为{{变量名称}}

模板插值语法


在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 性能优化会有缓存具体请看我的掘金


Vue3.2 新增 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>
目录
相关文章
|
3天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
9 0
|
4天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
13 3
|
6天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
19 0
|
6天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
6天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
16 0
|
6天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
23 0
|
6天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
33 0
|
6天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
11 1
|
6天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
14 0
|
6天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
12 0