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选项;
相关推荐
烛阴34 分钟前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动1 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_2 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数2 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam3 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript