Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定

合集 - Java登陆(70)

1.Java登陆第一天——Mysql安装2023-11-082.Java登陆第一天——Maven入门2023-11-083.Java登陆第二天——SQL之DDL2023-11-094.Java登陆第二天——SQL之DML2023-11-095.Java登陆第三天——SQL之DQL(一)基础查询、聚合函数、分组查询2023-11-106.Java登陆第四天——SQL之DQL(二)分页查询、多表查询、自连接2023-11-117.Java登陆第五天——SQL之DQL(三)子查询2023-11-128.Java登陆第六天——SQL之表复制，表去重，合并查询2023-11-149.Java登陆第六天——SQL之SQL(四)外连接2023-11-1410.Java登陆第六天——SQL之约束2023-11-1411.Java登陆第七天——SQL之事务2023-11-1512.Java登陆第七天——SQL之事务隔离2023-11-1613.Java登陆第八天——SQL之DCL2023-11-1614.Java登陆第九天——JDBC(一)DriverManager、Connection、Statement2023-11-1915.Java登陆第十天——JDBC(二)ResultSet2023-11-2016.Java登陆第十一天——JDBC(三)PreparedStatement、CLOB、BLOB2023-11-2117.Java登陆第十二天——网络编程(一)网络的概念2023-11-2318.Java登陆第十二天——网络编程(二)InetAddress、Socket2023-11-2319.Java登陆第十三天——网络编程(三)DatagramSocket2023-11-2420.Java登陆第十四天——网络编程(四)韩顺平网络编程2023-11-2521.Java登陆第十五天——网络编程(四)韩顺平网络编程2023-11-2922.Java登陆第十六天——网络编程(四)韩顺平网络编程2023-11-3023.Java登陆第十七天——网络编程(四)韩顺平网络编程完成2023-12-0424.Java登陆第十七天——正则表达式2023-12-0425.Java登陆第十八天——Java8之Lambda表达式2023-12-0526.Java登陆第十九天——HTML规范与语法2023-12-0627.Java登陆第二十天——HTML常用标签2023-12-0728.Java登陆第二十一天——CSS2023-12-1029.Java登陆第二十二天——JavaScript入门2023-12-1130.Java登陆第二十三天——JavaScript对象、JSON、事件2023-12-1231.Java登陆第二十四天——JavaScriptBOM、DOM2023-12-1432.Java登陆第二十五天——Tomcat、认识JavaWeb项目2023-12-1833.Java登陆第二十六天——Http2023-12-2034.Java登陆第二十六天——Servlet2023-12-2035.Java登陆第二十七天——多种方法Servlet映射、Content-Type2023-12-2136.Java登陆第二十八天——Servlet生命周期2023-12-2237.Java登陆第二十九天——Servlet继承关系，service和doGet的区别2023-12-2338.Java登陆第二十九天——ServletConfig和ServletContext2023-12-2339.Java登陆第二十九天——HttpServletRequest和HttpServletResponse2023-12-2440.Java登陆第二十九天——请求转发和响应重定向2023-12-2541.Java登陆第三十天——Cookie和Session2023-12-2742.Java登陆第三十天——域对象2024-01-0243.Java登陆第三十一天——Filter2024-01-1744.Java登陆第三十一天——监听器2024-01-1945.Java登陆第三十二天——AJAX和异步2024-03-0646.Java登陆第三十二天——前端工程化2024-03-0747.Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数2024-03-0848.Java登陆第三十三天——ES6(二)reset、spread、Class类语法糖2024-03-0949.Java登陆第三十三天——ES6(二)浅拷贝、深拷贝2024-03-0950.Java登陆第三十三天——ES6(二)模块、模块化2024-03-0951.Java登陆第三十四天——Node.js安装、npm配置、npm命令2024-03-1052.Java登陆第三十四天——使用Vite创建工程化的Vue3项目2024-03-1153.Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解（SFC）2024-03-1454.Java登陆第三十五天——VUE初始页面解析2024-03-1455.Java登陆第三十六天——VUE3引入CSS2024-04-0256.Java登陆第三十六天——VUE3响应式入门、setup语法糖2024-04-02

57.Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定2024-04-03

58.Java登陆第三十七天——VUE3响应式基础、条件渲染、列表渲染2024-04-0459.Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)2024-04-0560.Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)2024-04-0561.Java登陆第三十九天——Router路由入门2024-04-0662.Java登陆第三十九天——Router编程式路由，路由传参2024-04-0663.Java登陆第四十天——Router路由守卫2024-04-0764.Java登陆第四十天——Router路由守卫练习2024-04-0765.Java登陆第四十一天——Promise、async关键字、await关键字2024-04-0866.Java登陆第四十一天——Axios2024-04-0967.Java登陆第四十二天——Axios拦截器2024-04-1068.Java登陆第四十二天——跨域2024-04-1469.Java登陆第四十三天——Pinia2024-04-1770.Java登陆第四十四天——跟写微头条遇到的问题2024-04-25

收起

插值表达式

VUE中最基本的数据绑定形式。

语法格式如下：

{{ 数据来源 }}

插值表达式的特点：

1. 不依靠标签。

2. 可以调用函数。

3. 支持运算符。

栗子

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="数据来源"></双标签>

文本渲染的特点：

1. 依靠双标签，且必须在开始标签中。

2. 可以调用函数。

3. 支持运算符。

4. 支持模板字符串。

5. v-text不会解析HTML结构的文本。

6. 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"></标签>

属性渲染的特点：

1. 依靠标签，但不仅依靠双标签。

2. 多个属性就要写多个多个命令。

3. 对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。

文本渲染的特点：

1. 依靠标签，但不仅依靠双标签。

2. 事件名可以加修饰符。常用修饰符如下：

   • .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>

效果展示