Yuenhood-CSDN博客

原创 Vue2过滤器、侦听器、计算属性总结

过滤器（Filter）是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。过滤器应该被添加在javaScript表达式的尾部，由“管道符”进行调用。二、侦听器watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作方法格式缺点1：不会自动触发缺点2：如果侦听器的是一个对象，如果对象中的属性发生了变化，不会触发侦听器对象格式优点1:可以通过immediate自动触发优点2：可以通过deep选项，让侦听器深度监听对象中每个属性

2022-06-16 15:37:45 230 1

原创小程序自定义组件之父子组件之间的通信

父子组件之间通信的 3 种方式① 属性绑定（父传子）⚫ 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据② 事件绑定（子传父）⚫ 用于子组件向父组件传递数据，可以传递任意数据③ 获取组件实例⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象⚫ 这样就可以直接访问子组件的任意数据和方法1. 属性绑定属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下：//父组件的data节点data:

2022-04-30 10:54:07 384

原创小程序自定义组件之插槽

1. 什么是插槽在自定义组件的 wxml 结构中，可以提供一个**< slot>** 节点（插槽），用于承载组件使用者提供的 wxml 结构。2. 单个插槽在小程序中，默认每个自定义组件中只允许使用一个 < slot> 进行占位，这种个数上的限制叫做单个插槽。2. 多个插槽在小程序的自定义组件中，需要使用多 < slot> 插槽时，可以在组件的 .js 文件中，通过如下方式进行启用。示例代码如下Components({ options: { mul

2022-04-30 10:26:17 1209

原创小程序组件及组件所在页面的生命周期

一、组件的生命周期1. 组件全部的生命周期函数小程序组件可用的全部生命周期如下表所示：生命周期函数参数描述说明created 无在组件实例刚刚被创建时执行attached 无在组件实例进入页面节点树时执行ready 无在组件在视图层布局完成后执行moved 无在组件实例被移动到节点树另一个位置时执行detached 无在组件实例被从页面节点树移除时执行error Object Error 每当组件方法抛出错误时执行2. 组件主要的生命周期函数在小程序组件中，最重要的生命周

2022-04-30 09:58:22 1568

原创小程序笔记之隔离选项、数据监听器、纯数据字段

一、修改组件的样式隔离选项默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下：//在组件的 .js 文件中新增如下配置Component({ options:({ styleIsolation:'isolated' })})//或在组件的 .json 文件中新增如下配置{ "styleIsolation":"isolated"}st

2022-04-30 09:36:11 340

原创小程序常用的组件

view⚫ 普通视图区域⚫ 类似于 HTML 中的 div，是一个块级元素⚫ 常用来实现页面的布局效果scroll-view⚫ 可滚动的视图区域⚫ 常用来实现滚动列表效果swiper 和 swiper-item⚫ 轮播图容器组件和轮播图 item 组件swiper 组件的常用属性属性类型默认值说明indicator-dots bo

2022-04-29 09:46:46 438

原创 Promise基本介绍及使用

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。1）Promise构造函数：Promise(excutor){}2）Promise.prototype.then方法3）Promise.prototype.catch方法Promise基本语法//实例化promise对象//调用resolve表示成功，调用reject表示失败const p = new Promise(function (resolve, reje

2022-04-20 19:43:24 404

原创 js常用正则表达式

//只要包含abc/abc///必须以abc开头的/^abc///必须是abc/^abc$///至少包含abc之一/[abc]///abc三选一/^[abc]$///26个小写字母返回任一个都是true/^[a-z]$///26个字母返回任一个都是true/^[a-zA-Z]$///26个字母、数字,'_','-'返回任一个都是true/^[a-zA-Z_-]$///26个字母、数字,'_','-'返回任一个都是true//^写在[]里，表示取反结果与上一

2022-04-19 22:04:51 951

原创 js改变函数内this指向：Call(),apply(),bind()方法及其应用

作用1：调用函数var o = { name: 'andy'}function fn(a, b) { console.log(this); console.log(a + b);}fn.call(o, 1, 2)//输出对象o和3作用2：实现继承function Father(uname, age, sex) { this.uname = uname this.age = age this.sex = sex}function Son(u

2022-04-19 11:27:01 47

原创 javascript js 函数的调用方式及this指向

1.普通函数function fn(){ console.log('人生巅峰')}//fn() fn.call()2.对象的方法var o = { sayHi:function(){ console.log('人生巅峰') }}o.sayHi()3.构造函数function Star(){}new Star()4.绑定事件函数//点击按钮触发btn.onclick=function(){}5.定时器函数//自动一秒钟调用一次setInterval(func

2022-04-19 11:07:03 850

原创 ES5新增方法遍历数组方法 forEach()、map()、filter()、some()、every()

# 数组方法迭代（遍历方法）：forEach()、map()、filter()、some()、every()arry**1.forEach():** array.forEach(function(Value,index,arr))```javascriptvar arr = [1, 2, 3]var sum = 0arr.forEach(function (value, index, array) { console.log('每个数组元素' + value); conso.....

2022-04-18 20:32:50 309

原创 es5构造函数、实例、原型对象的相互关系

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档构造函数、实例、原型对象的相互关系Star构造函数的Star.prototype属性指向Star的原型对象prototype,Star的原型对象的Star.prototype.constructor属性指回Star构造函数。Star构造函数的构造一个实例对象ldh,ldh.__proto__指向的是Star的原型对象，则ldh.proto.constructor指向的是Star构造函数。...

2022-04-18 15:28:33 78

weixin_44253584的博客