视频网站调用怎么发布视频号
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是如何处理这些数据的？
- 当调用
createApp()创建实例时，Vue 会将data()返回对象的所有属性 代理到 Vue 实例 上。 - 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会绕过使用插值内置的跨站脚本防护
- v-html不会对内容进行转义，这也意味这插入的恶意JavaScript代码也会被执行；
- Vue 默认对所有插值表达式进行 HTML 转义，提供 XSS 防护，v-html 会绕过这种内置防护；
- 所以在使用V-html的时候，需要你保证插入的是可信的内容；
第一部分总结-我们学习了什么？
- 如何创建Vue APP,如何连接它；
- 使用mount将应用实例挂载到实际的DOM元素中；
- 使用插值语法输出响应式内容；
- 使用v-bind绑定指令；
- 使用v-html来输出原始的HTML内容；
- data选项和methods选项；