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

Vue是如何处理数据的

这里我们先看一段代码

js 复制代码

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，其背后的基本原理是这样的

js 复制代码

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内容

js 复制代码

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原始的内容

vue 复制代码

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