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选项；