- 博客(36)
- 收藏
- 关注
RSS订阅原创 key的原理
②.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM.key时虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成。1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示,会产生没有必要的真实DOM更新==〉界面效果没问题，但效率低。①若虚拟DOM中内容没变,直接使用之前的真实DOM!(2).旧虚拟DON中未找到与新虚拟DOM相同的key。...
2022-07-18 20:56:35
361
1
原创 列表渲染（基本）
2.语法(v-for="item,index"）inxxxkey="yyy"3.可以遍历数组、对象、字符串（用的很少）、指定次数（用的很少）1.用于展示列表数据。④遍历指定次数(用的比较少)③遍历字符串(用的比较少)
2022-07-18 20:53:54
567
原创 绑定样式 class与style
要绑定多个样式，个数确定，名字也确定，但是不确定用不用的时候。写法class='xxx'xxx可以是字符串、对象、数组。对象写法使用于要绑定多个样式，个数不确定，名字也不确定。style="{fontSizexxx}"其中xxx是动态值。字符串写法适用于类名不确定，要动态获取。style='[a,b]'其中a、b是样式对象。2.style样式。1.class样式。...
2022-07-16 17:25:44
254
原创 Vue监视属性与深度监视
1).Vue自身可以检测对象内部值的改变，但Vue提供的watch不可以。1.当被监视的属性变化时，回调函数自动调用，进行相关操作。(2).使用watch时根据数据具体结构，决定时候采用深度监视。（1）.newVue时传入watch配置。2.监视的属性必须存在，才能进行监视！（2）.通过vm.$watch监视。(1).Vue中的watch默认不检测对象内部值的改变(一层)(2).配置deeptrue可以监测对象内部值改变(多层)1.通过一个点击切换的案例来理解。...
2022-07-14 19:53:42
432
1
原创 Vue计算属性
2.如果计算属性要被修改，那么必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。2.原理底层借助了Objcet.defineProperty方法提供的getter和setter。4.优势与methods实现相比，内部有缓存机制(复用），效率更高，调试方便。1.计算属性最终会出现在vm上，直接读取使用即可。1.定义要用的属性不存在，要通过已有属性计算得来。（2）.当依赖的数据发生改变时会被再次调用。1.我们通过一个案例的不同写法来理解计算属性。2.通过插值的语法编写这个案例。...
2022-07-14 19:47:28
234
原创 Vue中的数据代理
通过object.fefineProperty()把data对象中所有的属性添加到vm上。在getter/setter内部去操作（读/写）data中对应的属性。为每一个添加到vm上的属性，都指定一个getter/setter。通过vm对象代理data对象中属性的操作。更加方便的操作data中的数据。...
2022-07-14 19:42:47
116
原创 Vue模板语法
功能：用于解析标签体内容 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性二、指令语法功能：用于解析标签(包括：标签属性、标签体内容、绑定事件.....) 举例：v-bind：href='xxx' 或 简写成 ：href='xxx' xxx同样要写成js表达式 且可以直接读取到data中的所有属性...
2022-07-11 19:54:25
108
原创 Vue数据绑定
单项绑定(v-bind)：数据只能从data流向页面二、双向绑定（v-model）双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data代码如下（示例）：三.注意事项 1.双向绑定一般都使用在表单类元素上(如：input select等) 2.v-model：value 可以简写成 v-model，因为v-model默认收集的就是value的值...
2022-07-11 19:46:49
193
原创 初始Vue
初始Vue 使用及其注意事项 1. 想让Vue工作，就必须创建一个Vue实例，并且传入一个配置对象 2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 3. root容器里的代码被称为【Vue模板】 4. Vue实例和容器是一一对应的 5. 真实开发中只有Vue实例，并且会配合着组件一起使用 6. {{xxx}}中的xxx要写成js表达式，且xxx可以自动读取data中的所有的属性 7. 一旦data中的数据发生改变，那么页面中用到该数
2022-07-11 19:32:44
64
原创 wxs脚本
wxs是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构wxml中无法调用在页面的.js中定义的函数，但是wxml中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是‘过滤器’。1.wxs有自己的数据类型number 数据类型 string 字符串类型 booean布尔类型 object 对象类型function 函数类型 array 数组类型 date日期类型 regexp正则2.wxs不支持类似于Es6及以上的语法形式不支持：let const 解构赋值 展开运算符 箭
2022-07-03 11:41:12
158
原创 生命周期函数的概念
生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行允许程序员在特定的时间点，执行某些特定的操作。例如：页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据注意：生命周期强调的是时间段，生命周期函数强调的是时间点特指小程序从启动 -》运行 -》销毁期间依次调用的那些函数特指小程序中，每个页面从加载->渲染->销毁期间依次调用的那些函数...
2022-07-02 20:59:43
388
原创 小程序的生命周期
生命周期（Life Cycle）是指一个对象从 创建 ->运行->销毁的整个阶段，强调的是一个时间段。例如：张三出生，表示这个人的声明周期开始 张三离世，表示这个人声明周期的结束 中间张三的一生就是张三的生命周期 小程序的启动，表示生命周期的开始 小程序的关闭，表示声明周期的结束 中间小程序的运行过程，就是小程序的声明周期小程序从启动 -> 运行 -> 销毁的过程特指小程序中，每个页面的加载 -> 渲
2022-07-02 20:47:17
173
原创 排他思想（算法）
如果同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想1. 所有元素全部清除样式(干掉所有人)2.给当前元素设置样式(留下我自己)3. 注意顺序不能颠倒，首先干掉其他人，在设置自己4.换肤案例这个案例是给一组元素注册事件 给四个小图片利用循环注册点击事件 当我们点击这个图片，让我门页面背景改为当前的图片核心算法：把当前图片的src路径取过来，给body作为背景...
2022-06-20 10:02:47
115
原创 循环精灵图案例
①首先精灵图图片排列有顺序②核心思路：利用 for循环 修改精灵图片的背景位置background-position③让循环里面的i索引号*44就是每个图片的y坐标
2022-06-19 13:16:59
176
原创 显示隐藏密码明文案例
核心思路：点击眼睛按钮，把密码类型改为文本框就可以看到里面的密码一个按钮两个状态，点击一次，切换文本框，再点击一次切换为密码框算法：利用一个flag变量，来判断flag的值，如果为1就切换为文本框，flag设置为0如果是0就切换为密码框 flag设置为1...
2022-06-18 16:41:01
311
原创 innerText和innerHTML的区别
innerText 不识别html标签 非标准 去除空格和换行innerHTML 识别html标签 W3C标准 保留空格和换行 这两个属性都是可读写的 可以获取元素的内容
2022-06-18 15:40:22
63
原创 事件的基础
事件是由三部分组成 事件源 事件类型 事件处理程序 我们也成为事件三要素(1)事件源 事件被触发的对象(2)事件类型 如何触发 比如鼠标点击触发 鼠标经过触发 等等(3)事件处理程序 通过一个函数赋值的方式 完成.........
2022-06-18 15:04:19
63
原创 DOM 获取元素
因为我们文档页面从上往下加载，所以得现有标签 所以我们script写道标签下面get 获得 Element元素 by 通过 驼峰命名法参数 id是大小写敏感的字符串根据标签名获取document.getElementsByTagName() 返回带有标签名的对象集合 以伪数组的形式存储如果页面中只有一个 li 返回的还是伪数组的形式如果页面中没有这个元素 返回的是一个空的伪数组 document.getElementsByTagName('标签名') 父元素必须是指定的单个元素通过HTML
2022-06-18 14:41:04
85
原创 简单数据类型与复杂数据类型
简单数据类型 null 返回的是一个空对象 object简单数据类型又叫基本数据类型或者值类型，复杂数据类型又叫做引用类型值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型比如包括：string number boolean undefined null如果有个变量我们以后打算存储对象 暂时还没有想好放什么 这个时候就可以给null引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用类型通过 new 关键字创建的对象(系统对象 自定义对象)如 Ob
2022-06-18 11:46:33
123
原创 字符串的操作方法
1. concat('字符串1','字符串2'....)2. substr('截取的起始位置','截取几个字符')3.替换字符 replace('被替换的字符','替换为的字符') 只会替换第一个字符4.有一个字符'abcdefoxyozzopp' 要求把里面的所有的 o 替换为 *5. 字符转换伪数组 split('分隔符') 前面我们学过 jion 把数组转换为字符串...
2022-06-18 11:43:04
99
原创 数组中的一些方法
1.返回数组元素索引方法indexOf(数组元素) 返回该数组元素的索引号它只能返回第一个满足条件的索引号它如果在该数组里面找不到元素,则返回的是-12.lastIndexOf(数组元素) 从后往前查找3.数组去重案例数组转换为字符串3. toSting() 数组转换为字符串4.join(分隔符)5. 脑袋风暴（计算字符出现的位置及字数）6.根据位置返回字符（1）charAt(index) 根据位置返回字符（2）charCodeAt(index) 返回相应索引号的字符AS
2022-06-17 17:11:57
39
原创 添加删除数组元素
1.push() 在数组末尾添加一个或多个数组元素(1)push 可以给数组追加元素(2)push()参数直按写数组元素就可以了(3)push完毕之后，返回的结果是新数组的长度(4)元素组也会发生变化2.unshift 在我们数组的开头添加一个或者多个数组元素(1)unshift 可以给数组前面追加元素(2)unshift()参数直按写数组元素就可以(3)unshift完毕之后，返回的结果是新数组的长度(4)元素组也会发生变化3. pop() 删除数组最后一个元素(1)pop 可以删除数组最后一个元素 一
2022-06-17 17:04:16
108
原创 检测数组的两种方式
(1)instanceof 运算符 它可以用来检测是否为数组 (2)Array.isArray(参数) H5新增的方法 ie9以上版本支持
2022-06-17 16:57:48
189
原创 Date()对象
Date()日期对象是一个构造函数 必须使用new 来调用创建我们的日期对象1.使用 Date(); 如果没有参数 返回系统当前时间2. .参数常用的写法 数字型 2019,10,01 或者是字符型 '2019-10-1 9:9:9'3. 格式化日期 年月日星期4. 封装一个函数返回当前的时分秒 格式 08：08：085. 写一个 xx年xx月xx日 星期x...
2022-06-16 20:41:44
57
原创 Math数学对象
1.Math数学对象不是一个构造函数﹐所以我们不需要new来调用而是直接使用里面的属性和方法即可2.封装数学对象 里面有 PI 最大值和最小值3.绝对值 Math.abs()4.Math.floor() 向下取整 往最小了取5. Math.ceil() 向上取整 往最大了取 6. Math.round() 四舍五入 其他数字都是四舍五入，但是.5特殊它往大了取7. Math对象随机数方法 random() 返回一个随机的小数 0 = < x ...
2022-06-16 20:38:53
84
原创 对象与创建对象的三种方式
1.对象就是一个具体的事物 是看得见摸得着的实物2.在JavaScript中，对象是一组无序的椎关属性和方法集合，所有的事物都是对象，例如字符串、数值、数组、函数等。3.对象 由 属性 和 方法组成4.为什么要使用对象？ JS中的对象表达结构更清晰创建对象的三种方式 (Object)1.利用字面量创建对象对象字面量∶就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。(1) 里面的属性或者方法我们采取键值对的形式 键 属性名：值 属性值(2) 多个属性或者方法中间用逗号隔开的(3) 方法冒号后面跟
2022-06-16 08:43:43
162
原创 预解析基础
1.js引擎运行js 分为两步 ： 预解析 代码执行2.js引擎会把js 里面所有的var 还有 function 提升到当前作用域的最前面3.代码执行 按照代码书写的顺序从上往下执行4.预解析分为变量预解析（变量提升)和函数预解析（函数提升)(1)变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作(2)函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数...
2022-06-15 20:48:38
27
原创 声明函数的两种方式
1.利用函数关键字自定义函数(命名函数)2.函数表达式(匿名函数) var 变量名 =function(){} (1) fun是变量名 不是函数名(2) 函数表达式声明方式跟声明变量差不多 只不过变量里面存的是值 而函数表达式里存的是函数(3)函数表达式也可以惊醒传递参数...
2022-06-15 19:57:03
781
原创 arguments的使用
1.arguments展示形式是一个伪数组伪数组具有的特点：具有length属性按索引方式存储数据不具有数组的push pop等方法*2.只有函数才有arguments对象 而且每个函数都内置好了arguments3.arguments的使用4.感受一下吧！！！利用函数求任意个数的最大值...
2022-06-15 19:53:42
64
原创 return 终止函数 注意事项
1.return 终止函数return 后面的代码不会被执行2.return 只能返回一个值 3.强化一下吧！！！我们求任意两个数的加减乘除结果4.函数如果有return 则返回 return后面的值 如果没有 return 则返回undefined5.break continue return 的区别berak ：结束当前的循环体continue ： 跳出本次循环 继续执行下次循环return ： 不仅可以退出本次循环 还能返回return语句中的值 同时还可以结束当前函数体的代码...
2022-06-15 19:52:15
521
原创 函数的返回值 return语句
1.函数是做某件事或者实现某种功能2.函数的返回值格式(1)函数只是实现某种功能，最终的结果需要返回给函数的调用者 函数名() 通过return 实现(2)只要函数遇到 return 就把后面的结果 返回给函数的调用者 函数名()=return后面的结果3.代码验证4.求任意两个数的和...
2022-06-15 19:50:08
1013
原创 函数形参和实参个数不匹配的问题
1.如果实参的个数和形参的个数一至 则正常输出结果2.如果实参的个数多余形参的个数 会取到形参的个数3.如果实参的个数小于形参的个数 多余的形参定义为undefined 最终的结果就是NaN4.形参可以看作是不用声明的变量 num2 是一个变量但是没有接收值 结果就是undefined*建议：我们尽量让实参的个数和形参的个数相匹配...
2022-06-15 19:47:47
1711
原创 用两个小案例巩固一下函数的使用
1.利用函数求任意两个数的和2.利用函数求任意两个数之间的和 *注意：1.多个参数之间用逗号隔开 2.形参可以看作是不用声明的变量
2022-06-15 19:45:48
26
原创 带参数的函数
1.函数可以执行不同的代码2.可以利用函数的参数实现函数重复不同的代码3.形参和实参的执行过程 4.函数的参数可以有 也可以没有 个数没有限制
2022-06-15 19:43:15
29
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人