通过Proxy (代理): 拦对象中任意属性的变化，包括: 属性值的读写、属性的添加、属性的删除等通过Reflect (反射): 对源对象的属性进行操作示例代码： const p = new Proxy(person,{ //有人读取p的某个属性时调用 get(target,propName){ console.log(`有人读取了p身上的${propName}属性`); return Reflect.get(target,propName) }, //有人修改p的某个属性、或者给p追加某个属性时调用 set(target,propName,value){ console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`) // target[propName]=value Reflect.set(target,propName,value)
从定义数据角度对比:ref 用来定义: 基本类型数据reactive 用来定义: 对象 (或数组)类型数据备注: ref 也可以用来定义对象 (或数组)类型数据,它内部会自动通过 reative 转为代理对象从原理角度对比:ref 通过 object.defineProperty() 的 get 与 set 来实现响应式 (数据劫持)reactive通过使用Proxy来实现响应式(数据动持)，并通过Reflect操作源对象内部的数据从使用角度对比:ref定义的数据: 操作数据需要 .value，读取数据时模板中接读取不需要 .valuereactive定义的数据: 操作数据与读取数据: 均不需要 .value
接上回：vue双向绑定原理分析(一)—模板解析编译现在在button标签内添加@click事件：<button @click="handleClick">点击事件</button>在methods中：handleClick(){ alert('点击事件触发了') },主要是vue.js代码：class Vue{ constructor(options) { this.$el = document.querySelector(options.el) //获取el元素 this.$options=options this.compile(this.$el) } compile(node) { //对节点进行循环遍历 node.childNodes.forEach((item) => { /** * nodeType：可以获取到节点的类型，可以通过数字判断你这个节点到底是哪种类型的
vue底层是如何实现模板解析的呢？在html中写这样的代码： <div id="app"> {{str}} <h1>{{str}}</h1> <ul> <li>{{text}}</li> </ul> </div>js中：new Vue({ el:'#app', data:{ str:'你好，哈哈中国', text:'好的' } })引入vue.js：class Vue{ constructor(options) { this.$el = document.querySelector(options.el) //获取el元素 this.$data=options.data this.compile(this.$el) } compile(node
纯css实现弹跳，仿真重力碰撞效果，主要用到动画特效 animation ，它的6个属性为：animation: name duration timing-function delay iteration-count direction;值描述animation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。html代码：<div class="boxwrap"> <div class="ball"></div> <div class="ground"></div> </div>css代码：b
本例演示了filter:blur() 和filter:contrast()的用法，实现两个盒子融合的效果。html部分： <div class="container"> <div class="box1"></div> <div class="box2"></div> </div>css样式： body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 0; margin: 0; background: #111; } .container{ dis
彩虹 🌈🌈 草莓 🍓🍓电话 📞 📞枫叶 🍁 🍁脚印 👣 👣喇叭 📣 📣拇指 👍 👍ok 👌 👌红苹果 🍎 🍎青苹果 🍏 🍏日期 📆 📆日期 📅 📅时间 🕔 🕔手指 👉 👉统计 📊 📊问号 ❓ ❓文件夹 📂 📂西瓜 🍉 🍉邮箱 📧 📧直播 🎦 🎦
在 JavaScript 中，XMLHttpRequest 是客户端的一个 API，它为浏览器与服务器通信提供了一个便捷通道。现代浏览器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera。创建 XMLHttpRequest 对象XMLHttpRequest 用于在后台与服务器交换数据。创建 XMLHttpRequest 对象的方法如下：var xhr = new XMLHttpRequest (); IE 5.0 版本开始以 ActiveX 组件形式支持 XMLHttpRequest，IE 7.0 版本开始标准化 XMLHttpRequest。不过所有浏览器实现的 XMLHttpRequest 对象都提供相同的接口和用法。 示例下面示例使用工厂模式把定义 XMLHttpRequest 对象进行封装，这样只需要调用 creatXHR() 方法就可以返回一个 XMLHttpRequest 对象。//创建XMLHttpRequest 对象 //参数：无 //返回值：XMLHttpRequest 对象 function cr
点击按钮，请求远程图片接口并显示到页面上。html部分放一个空的div和一个按钮button即可，主要是js代码如下：const btn =document.querySelector('button') //获取按钮 btn.addEventListener('click',function(){ //创建Promise const p =new Promise((resolve,reject)=>{ //1.创建ajax请求对象 const xhr =new XMLHttpRequest() //2.初始化 xhr.open('get','https://api.vvhan.com/api/view?type=json') //3.发送 xhr.send() //4.处理响应结果 xhr.onreadystatechange=function(){ if(xhr.readyState === 4){
注：该实例需要在php环境运行目录结构如下图：先看页面部分，html代码如下：<body> <div id="container"> <div id="main"> <h1>请输入用户名输入数据</h1> </div> <div id="contorll"> <input type="text" id="uname"> <button>请求</button> </div> </div> <script src="demo.js"></script> </body>接下来是样式：body{ min-height: 100vh;
铅笔Naruto
前端攻城狮
