《Vue零基础入门教程》第五课:挂载

news/2024/11/26 19:41:52/

1) 基本语法

一个应用实例必须在调用了 .mount() 方法后才会渲染

  • 传入参数: 可以是一个 CSS 选择器字符串(常用) 或者 一个实际的 DOM 元素
  • 返回值: 根组件实例
// 挂载应用, 返回根组件实例
const instance = app.mount('#app')
console.log(instance)

分析结果. 可知

  1. instance是一个Proxy对象
  2. 在选项中定义的内容会被挂载到instance对象上

2) 根组件实例

之前, 我们通过调试工具改变data中的定义的状态时, 视图会响应变化.

如何通过代码实现同样的功能呢?

示例

setTimeout(() => {instance.msg = 'world'
}, 1000)

在data中定义的状态会被代理到instance上.

当改变代理对象的状态值时, 可以拦截到set操作, 从而自定义set操作.

在自定义的set操作中更新DOM

3) 响应式原理初步

示例

<script>const data = {msg: 'hello',}const pData = new Proxy(data, {get: function (target, key) {return target[key]},set: function (target, key, value) {target[key] = valueconsole.log('更新DOM')document.querySelector('#app').innerHTML = value},})setTimeout(() => {pData.msg = 'world'}, 1000)console.log(data, pData)
</script>
  • data模拟原始数据
  • pData模拟代理数据

初次渲染时, 从data中获取数据, 后续修改代理对象的值, 会被拦截到, 并且更新DOM

4) 注意点

  1. 如果不调用.mount(), 不会解析模板
  2. mount()方法应该在应用配置的最后被调用

http://www.ppmy.cn/news/1550126.html

相关文章

Android8设置拔出充电器自动关机

通常Android机器拔出充电后&#xff0c;将进入断开充电流程&#xff0c;关闭充电灯和充电图标。 那么需要实现拔出充电器直接进入关机&#xff0c;则需要在充电判断机制中额外增加实现代码。 || || 修改方案如下&#xff1a; 在系统中存在服务时刻监听的充电状态&#xff…

C#里怎么样使用正则表达式?

C#里怎么样使用正则表达式? 正则表达式是由普通字符(如英文字母)以及特殊字符(也称为元字符)组成的一种文字模式 这种文字模式可用于检查字符串的值是否满足一定的规则,例如: 验证输入的邮箱是否合法 输入的身份证号码是否合法 输入的用户名是否满足条件等 也可以…

即时通讯服务器被ddos攻击了怎么办?

攻击即时通讯系统的主要手段 击键记录 目前盗取即时通讯工具帐号信息的最主要方法是通过特洛伊木马等恶意软件&#xff0c;例如QQ木马&#xff0c;这类程序能够盗取QQ密码信息&#xff0c;常见的能够盗取最新版本QQ密码的木马程序有十几种之多。几乎所有主要的QQ木马程序都采…

跨域相关的一些问题 ✅

当网页从一个源&#xff08;https://baidu.com&#xff09;请求另一个源&#xff08;如 https://taobao/api&#xff09;的资源时&#xff0c;就发生了跨域。由于安全原因&#xff08;防止恶意网站通过脚本访问用户在其他网站上的数据&#xff09;&#xff0c;浏览器对跨域请求…

《基于FPGA的便携式PWM方波信号发生器》论文分析(三)——数码管稳定显示与系统调试

一、论文概述 基于FPGA的便携式PWM方波信号发生器是一篇由任青颖、庹忠曜、黄洵桢、李智禺和张贤宇 等人发表的一篇期刊论文。该论文主要研究了一种新型的信号发生器&#xff0c;旨在解决传统PWM信号发生器在移动设备信号调控中存在的精准度低和便携性差的问题 。其基于现场可编…

三种蓝牙架构实现方案

一、蓝牙架构方案 1、hostcontroller双芯片标准架构 手机里面包含很多SoC或者模块&#xff0c;每颗SoC或者模块都有自己独有的功能&#xff0c;比如手机应用跑在AP芯片上&#xff0c;显示屏&#xff0c;3G/4G通信&#xff0c;WiFi/蓝牙等都有自己专门的SoC或者模块&#xff0…

(功能测试)第五章 APP项目测试

熟悉APP项目 模型介绍 更新速度取决于开发模型 上面所说的京东&#xff0c;就是做一次发布一次&#xff0c;传统行业用的是瀑布模型&#xff0c;互联网行业用的是敏捷模型&#xff0c; 瀑布模型就像是瀑布一般&#xff0c;从上到下&#xff0c;上一个环节没有完成下一个环节是没…

牛客周赛69第一题:JAVA

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 小歪有两个整数 a 和 b &#xff0c;他想找到这样一个整数 c &#xff0c;使得这三个整数在经过排序后能成为一个等差数列。 输入描述: 在一行上输入两个整数 a,b(1≦a,b≦106)a,b\left(1 \l…