Vue如何处理数据、v-HTML的使用及总结

Vue如何处理数据、v-HTML的使用及总结

Vue是如何处理数据的

  • 这里我们先看一段代码
const app = Vue.createApp({data() {return {courseGoalA: '学习Vue,最终掌握Vue',courseGoalB: '掌握Vue,并构建相应的应用程序',vueLink: 'https://cn.vuejs.org/'};},methods: {outputGoal() {const ran = Math.random();if (ran > 0.5) {return this.courseGoalA;} else {return this.courseGoalB;}}}
});app.mount('#user-goal');

在这里插入图片描述

这里的courseGoalA和courseGoalB并不是变量,为什么在方法中可以调用他呢?为什么这个this可以指向正确的位置呢?Vue是如何处理这些数据的?

  1. 当调用 createApp() 创建实例时,Vue 会将 data() 返回对象的所有属性 代理到 Vue 实例 上。
  2. Vue 自动将 methods 中所有函数的 this 绑定到当前 Vue 实例。因此,在 outputGoal 中,this 指向 Vue 实例本身,可以通过 this.courseGoalA 访问代理的属性。
  • 如果你学习过JavaScript,其背后的基本原理是这样的
const vm = {}; // 代表 Vue 实例// 1. 将 data 属性转为响应式
const data = { courseGoalA: '学习Vue...', courseGoalB: '掌握Vue...',vueLink: 'https://...'
};
vm._data = reactive(data); // 转换为响应式对象// 2. 代理数据:将 _data 的属性映射到实例顶层
for (const key in data) {Object.defineProperty(vm, key, {get() { return vm._data[key]; },set(value) { vm._data[key] = value; }});
}// 3. 绑定 methods 的 this
vm.outputGoal = methods.outputGoal.bind(vm);

使用v-HTML输出原始HTML内容

const app = Vue.createApp({data() {return {courseGoalA: '学习Vue,最终掌握Vue',courseGoalB: '掌握Vue,并构建相应的应用程序',vueLink: 'https://cn.vuejs.org/'};},methods: {outputGoal() {const ran = Math.random();if (ran > 0.5) {return this.courseGoalA;} else {return '<h2>掌握Vue,并构建相应的应用程序</h2>';}}}
});app.mount('#user-goal');
  • 如果我们想在P标签中插入HTML的原始内容,仅使用插值的方式是不行的,我们需要使用v-html来显示HTML原始的内容
<section id="user-goal"><h2>My Course Goal</h2><p v-html="outputGoal()"></p><p>学习更多的关于Vue的知识<a v-bind:href="vueLink ">Vue官网</a></p></section>

在这里插入图片描述

使用v-html会绕过使用插值内置的跨站脚本防护

  1. v-html不会对内容进行转义,这也意味这插入的恶意JavaScript代码也会被执行;
  2. Vue 默认对所有插值表达式进行 HTML 转义,提供 XSS 防护,v-html 会绕过这种内置防护;
  3. 所以在使用V-html的时候,需要你保证插入的是可信的内容;

第一部分总结-我们学习了什么?

  1. 如何创建Vue APP,如何连接它;
  2. 使用mount将应用实例挂载到实际的DOM元素中;
  3. 使用插值语法输出响应式内容;
  4. 使用v-bind绑定指令;
  5. 使用v-html来输出原始的HTML内容;
  6. data选项和methods选项;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/531.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux基本命令篇 —— alias命令

alias是Linux/Unix系统中一个非常实用的命令&#xff0c;用于创建命令的别名。它允许用户为常用命令或命令组合创建简短的替代名称&#xff0c;从而提高工作效率。 目录 一、基本语法 二、常用用法 1. 创建临时别名 2. 查看已定义的别名 3. 查看特定别名 4. 删除别名 三、…

Springboot开发常见注解一览

注解用法常用参数Configuration用于标记类为配置类&#xff0c;其中通过Bean方法定义Spring管理的组件。它替代XML配置&#xff0c;用Java代码声明对象创建逻辑&#xff0c;并确保单例等容器特性生效。相当于给Spring提供一个“制造说明书”来组装应用部件RestControllerRestCo…

obs直播通过Wireshark获取推流码

选择当前使用的网络 应用显示过滤器中输入:rtmpt , 并回车&#xff0c; 打开直播伴侣&#xff0c;并开启直播&#xff08;无需任何操作&#xff0c;直接开启直播就行&#xff0c;其他设置可在obs中调试&#xff0c;直播画面&#xff09; 打开Wireshark&#xff0c;滚动条拉到最…

单链表和双向链表

目录 目录 目录 一、链表种类 二、单链表概念 三、单链表实现 3.1 单链表创建结点 3.2 单链表销毁 3.3 单链表尾插 3.4 单链表尾删 3.5 单链表头插 3.6 单链表头删 3.7 单链表寻找值 3.8 单链表任意插&#xff08;之前、之后&#xff09; 3.9 单链表任意删&#…

A模块 系统与网络安全 第三门课 网络通信原理-3

今日目标 IP数据包格式IP地址解析网络层常见协议路由原理和配置路由器转发数据分析配置默认路由 1 IP数据包格式 1.1 网络层概述 位于OSI模型第三层作用 √定义网络设备的逻辑地址&#xff0c;俗称网络层地址&#xff08;如P地址&#xff09; √在不同的网段之间选择最佳数据…

笔记/计算机网络

Content 计算机网络部分核心概念十大网络协议一览 计算机网络部分核心概念 1. 什么是计算机网络&#xff1f;它最基本的功能是什么&#xff1f; 计算机网络是指通过某种传输介质将多台独立的计算机或设备连接起来&#xff0c;实现数据交换和资源共享的系统。其最基本的功能是数…

反射,枚举和lambda表达式

1. 反射 1. Java 的反射机制 Java 的反射机制是在运行状态&#xff0c;对于任意一个类&#xff0c;都能够直到它所有的属性和方法&#xff1b; 对于任意一个对象&#xff0c;都能调用它的方法和属性&#xff1b; 这种动态获取信息及调用对象方法的功能&#xff0c;称为Java…

关于 java:8. Java 内存模型与 JVM 基础

一、堆 Java 堆是 JVM 中所有线程共享的运行时内存区域&#xff0c;用于存放所有对象实例、数组以及类的实例字段值。 在 Java 中&#xff1a; String str new String("abc");new String("abc") 创建的对象就分配在堆中。 1.1 堆的特点 特性说明共享…

大语言模型 API 进阶指南:DeepSeek 与 Qwen 的深度应用与封装实践

在昨天小宁已经教大家怎么去获取各个平台的API-kEY,然后也带大家了解了最简单的大模型的调用&#xff0c;那么今天就带大家进阶了解一些更加详细的功能。 在大语言模型的实际应用中&#xff0c;除了基础的问答功能&#xff0c;深度思考能力、推理过程的获取以及灵活的对话模式…

算法与数据结构:解决问题的黄金搭档

1. 算法的定义 算法&#xff08;Algorithm&#xff09; 是解决特定问题的精确步骤序列&#xff0c;本质是“解决问题的方法论”。 核心特征&#xff1a; 输入&#xff1a;接受数据&#xff08;如零个、多个参数&#xff09;。输出&#xff1a;必须产生明确结果&#xff08;如…

【MySQL】JDBC编程

MySQL(七)JDBC编程 一、驱动包 1.性质 1.1底层差异性 1.2JDBC接口统一性 2.导入 2.1复制导包 2.2标记作库 二、JDBC编程 1.寻找资源 1.1URL 1.1.1网址作用 1.1.2主机IP 1.1.3端口号 1.1.4数据库名 1.1.5访问资源参数 2.访问认证 2.1身份 2.2密码 3.连接通道…

RAG 架构地基工程-Retrieval 模块的系统设计分享

目录 一、知识注入的关键前奏——RAG 系统中的检索综述 &#xff08;一&#xff09;模块定位&#xff1a;连接语言模型与知识世界的桥梁 &#xff08;二&#xff09;核心任务&#xff1a;四大关键问题的协调解法 &#xff08;三&#xff09;系统特征&#xff1a;性能、精度…