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

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是如何处理这些数据的?

  1. 当调用 createApp() 创建实例时,Vue 会将 data() 返回对象的所有属性 代理到 Vue 实例 上。
  2. 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会绕过使用插值内置的跨站脚本防护

  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选项;
相关推荐
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css