Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定
插值表达式
VUE中最基本的数据绑定形式。
语法格式如下：
{{ 数据来源 }}
插值表达式的特点：
-
不依靠标签。
-
可以调用函数。
-
支持运算符。
栗子
App.vue
<script setup>
let msg = "字符串";
let num = 10;
function f1() {
return "有返回值的方法"
}
let f2 = () => {
return "甚至是箭头函数"
};
let data = {
name: "张三",
age: 19,
info: {message: "对象也可以"}
}
</script>
<template>
{{ num }}
<h3>{{ msg }}</h3>
<h3>{{ f1() }}</h3>
<h3>{{ f2() }}</h3>
<h3> data:{{ data }}</h3>
<hr>
可以调用函数，String自带的函数
<h3> {{ msg.split("") }}</h3>
<hr>
支持运算符，包括三目运算符
<h3>{{ num > 1 ? "大于1" : "小于1" }}</h3>
<h3>{{ ++num }}</h3>
<h3>{{ num+=2 }}</h3>
</template>
<style scoped>
</style>
效果展示
什么是渲染
首先解释什么是渲染：
内容正确更新到DOM树，这就叫渲染。
文本渲染就是，把文本正确更新到DOM树中的文本节点中。
尽管编码中使用了VUE提供的便利，但最终的DOM树并不会有这些内容。
就查看上述插值表达式栗子的源码，F12
可以看到并没有{{}}在源码之中。
v-***就是VUE中的命令。
文本渲染
文本渲染专门负责双标签中的文本节点。
提供了两种文本渲染命令：v-text和v-html
语法格式如下：
<双标签 v-text="数据来源"></双标签>
<双标签 v-html="数据来源"></双标签>
文本渲染的特点：
-
依靠双标签，且必须在开始标签中。
-
可以调用函数。
-
支持运算符。
-
支持模板字符串。
-
v-text不会解析HTML结构的文本。
-
v-html会解析HTML结构的文本。
栗子
App.vue
<script setup>
let msg = "字符串";
let msgg = `hello ${msg}`
let f1 = () => {
return "懒得写了，仅展示箭头函数"
};
let f2 = " <h3>v-text不会解析HTML结构的文本，类似于InnerText</h3> "
let f3 = " <h3>v-html会解析HTML结构的文本，类似于InnerHTML</h3> "
</script>
<template>
支持模板字符串
<h3 v-text="msgg"></h3>
<h3 v-text="f1()"></h3>
<hr>
<p v-text="f2"></p>
<p v-html="f3"></p>
</template>
<style scoped>
</style>
效果展示
属性渲染
属性渲染专门负责标签中的属性节点。
提供了一种属性渲染命令：v-bind，可以简写为冒号：
语法格式如下：
<标签 v-bind:属性名1="数据来源1" v-bind:属性名2="数据来源2"></标签>
<标签 :属性名1="数据来源1" :属性名2="数据来源2"></标签>
属性渲染的特点：
-
依靠标签，但不仅依靠双标签。
-
多个属性就要写多个多个命令。
-
对HTML原生的属性不做限制。
栗子
App.vue
<script setup>
let biliUrl = "https://www.bilibili.com/"
let data = {
title: "B站",
url: "https://www.bilibili.com/",
logo: "不给图片地址，显示alt内容"
}
</script>
<template>
<a v-bind:href="biliUrl">点击访问B站</a>
<a :href="data.url" target="_self">
<img :src="data.logo" :alt="data.title">
</a>
</template>
<style scoped>
</style>
效果展示
个人建议不使用简写，排错太难找了= =。
事件绑定
事件绑定专门负责监听标签中的事件。
提供了一种监听事件的命令：v-on，可以简写为at@
语法格式如下：
<标签 v-on:事件="事件触发执行的方法"></标签>
vue中的事件是原生事件名去掉on，例如：onclick👉click
事件触发执行的方法，也统称为处理器，handler。
文本渲染的特点：
-
依靠标签，但不仅依靠双标签。
-
事件名可以加修饰符。常用修饰符如下：
-
.once：处理器只触发一次。
-
.prevent：阻止默认事件发生。
-
默认事件指对DOM的操作会引起自动执行的动作：
比如点击超链接的时候会进行页面的跳转。
点击表单提交按钮时会重新加载页面等。
使用".prevent"修饰符可以阻止这些事件的发生。
栗子
App.vue
<script setup>
let fun=function () {
alert("点击事件触发")
}
let biliUrl = "https://www.bilibili.com/"
</script>
<template>
<button v-on:click="fun">1号按钮</button>
<hr>
<button @click.once="fun">2号按钮</button>
<a v-bind:href="biliUrl" @click.prevent="fun">3号连接</a>
</template>
<style scoped>
</style>
效果展示
