08. 尚硅谷_微信小程序_数据绑定，事件分类.avi原创

来咱们一块看一下吧，就是我还是把这个问题提一下啊，可能有的同学上来说这是个阶层文件，我先给他一个大括号啊，然后呢，就着急的去注册页面，那这个时候我要说一下这个配S啊，大家应该都知道它是干嘛的，这里边是不是写入页面路径的呀？哎，那你会发现当你右键去创建一个页面的时候，它会自动把当前页面的路径写入。嗯，那如果说你这没有写这个配这个当前这个选项的时候，你右键一创建，它会发现它没有地方写，那我就不让你创建。啊，这第一个第二个问题是大家修改时候，你像这种啊，要习惯性的CTRLS去保存一下啊保存一下。再有一个问题是啥呢？有的同学说想设置这个窗口的颜色啊，我们都喜欢pink，在这写了个pink，你会发现它不生效。

发现没有上，上面是白的，为什么呢？是因为在这设置这个窗口背景颜色的时候，只能使用这种16进制，16进制的这种方式，就井号什么什么，你不能用其他的方式。在。咱也不知道他当初为什么这样设计，但是人家既然是这样，那我们必须要呃呃，遵循人家这个规范。不。OK，那这是一点大家容易犯错误的地方，然后呢，我们接着往下来看一下啊，往下来看一下，那这节课呢，我来到这个课件这登录页面，其实静态页面我们已经整完了，这节课呢，我们来看4.7这这个数据绑定。在这我给大家列成他的思想，同view一样，你可以去初始化数据，然后呢，在页面直接去使用，嗯，在页面直接去使用。OK，那我们来看一下来，咱们还是把这些关扰的全部关掉，我们来到注意你这处理数据肯定是在GS里面了啊，小程序这个开发工具挺严谨的，就是你看啊，当我回车的时候，他把注释啊，还有里面的一些选项什么都给我们整出来了。

来，下面这些我先不说啊，这是不是有个生命周期啊，那这个大家应该能理解什么是生命周期函数了，你是不是注册一个页面啊，这个页面从注册出来到页面销毁，它是有一定的过程啊，他要经历不同的阶段啊，如何去表示它处于哪一个阶段呢？就需要对应的生命周期函数，哎，这个是我们接下来要讲的，我们先来看第一个，哎。在这个page，也就在这，它有一个选项叫贝塔，上面也给出注释了页面的初始化数据。

那也就是说我是不是可以在这里面去整数去啊来，我随便写一个message啊，我这一把换一个，比如啊，待会我们要用它北方汉子，OK，大家看一下啊，我现在页面上啊，你看我随便点个地方，这为什么一直是我再让它编译一下。页面上这这个hello，小程序，这是个我写死的，那我现在不想写死数据，我想要我当前页面data中的数据，那怎么办？首先我问大家，我写个message，这肯定不行吧，你直接写message是不是就是一个普通的本本字母串啊，那怎么办？哎，很好，这叫什么来着？表达式对吧？OK，直接写message ctrl s保存。数据是不是过来了，哎，那这样的话就很方便很方便。

OK啊，这是我们要知道的一个知识点，嗯，就是它可以初始化页面的数据，并且在页面里面去使用它。嗯，来数据绑定不难啊，因为咱们学过V用，那么接下来我们来讲一个叫自定义事件，注意生命周期函数，这个我们待会来讲自定义事件，嗯。在小程序里面，它支持我们去绑定事件，嗯，那这呢是我给大家列了一些资料，包括你们要去官网上查看的地址，来，我带大家去官网上去找一下，注意点击这个框架。OK，初始化数据，我刚是不是提到了生命周期函数，没过没过没过，往下看有一个叫页面世界处理函数。啊呃，不是，这个是生命周期的啊，生命周期的我们往下来看，那个先不要管这是不是有个事件啊，这不是图财吗？数据绑定，刚才不讲的来事件，我们来看一下什么是事件，那就不用说了，比如我们对应的有个点击事件啊，获取焦点啊，这些往下看啊，小程序里面可以使用这个去绑定时间。

Bad t。BY什么意思？绑定keep啊，大家不是to接触过吗？它里面有有没有事件啊？有什么事情？Zip two。是不是有tap事件啊，Tap对应是不是就是一个点击事件啊。怎么了？很陌生吗？发一忘记了，有点忘记了是吧，没关系了，发一个这来我们往下来看一个东西吧，我往下发，这些都是事例啊，这个是需要你们自己去看的啊，重点我们来看这。

在小程序里面事件有分类啊，一共分为两大类，一个叫冒泡事件，一个叫非冒泡事件啊，那这呢有个概念叫冒泡，而这个呢也是我们必须要掌握的一个知识点，而且呢，这个在面试的时候经常会被问到。说到冒泡，其实更多的应该是问什么呢？首先我们世界有几个阶段啊，很好，三个阶段，哪三个阶段？铺货处理，然后呢，冒泡啊冒泡是不是从当前这一级可以向上去冒呀。嗯，冒到它的负极甚至是祖先元素上，OK，那呃，还有一个概念叫世界委托，我也提一下，这个大家知道吧，什么是世界委托？

委托是不是托付给别人啊？哎，世界委托其实就是将子元素的事件，是不是委托给他们的负元素啊？为什么要用世界杯？就是世界委托的好处是什么？啊，很好，第一个防止重复定义事件没问题。还有什么？嗯，有这样一种场景，你比如首先啊，第一个防止重复定义事件，你比如说我一个ul下面有100发拉，你如果说给子元素分别去绑定事件的话，你是不是得定义100次，而我给了负元素，是不只需要定义一次，这第一点，第二点我绑定的时候它是100个子元素。

那假如说新添加进来了，你不用世界委托的话，他能给新添添加的元素绑定这个世界吗？星期天进来的元素是不是没有那个时间呀？而我们用世界委托是否可以解决这个问题？OK，世界委托的原理是什么？哎，它是不是利用的就是冒泡机制啊，没问题，那我们回到这来看一下，首先什么是冒泡事件呢？这不用说了。就你点击一个元素上的事件的之后，它是不会向负节点去传递啊，非往后了就不传递。嗯，那如何去绑定冒号世界和非冒号世界呢？我们往下来看，这是对应的世界啊，这对应的世界用什么，我们直接去找看这。

世界绑定写法同组件的属性一样，以k value的形式，那这个是什么意思啊，就好像我们写的是你比如说我们要绑定一个什么事件啊，呃，假如说就可以的，事件对应的是不是要有个事件的回调函数啊，我们是不是是不是得给人家起一个名字啊，那这个叫K，这个叫你把这对应的叫head，这是不是叫value OK，那这个我们应该是知道，那么K以什么形式开头呢？有两个。一个叫bag，一个叫PH。嗯，使用带的绑定的世界，不会阻止世界向上冒泡，说明什么？他不会阻止冒泡，它是不会往上走啊，而catch呢？阻止冒泡，阻止冒泡就是非冒泡嘛，所以到这儿我们应该知道一个事情，使用B跟上一个事件，它绑定的事件呢是冒号事件，而catch绑定的是非冒号事件。

来我们来测一把，那这个时候来到我们的项目，打开当前的页面。大家看我这是不是有个负节点，有个子节点啊，首先我用bed去给它绑定一个事件，注意bad后边跟个tip，只是单纯的就叫点击事件，那这个时候呢，我这起个名字叫handler，比如说我们区分一下这个叫parent。PT，那我再给它的子节点去绑定一个事件啊，那这个呢，我们也来个by a take OK，那这个呢，我们叫做hi child，现在我是不是绑定了两个点击事件啊，OK，那这个事件要定义在哪了？肯定是GS文件了吧，来过了，注意定义的那些事件就相当于呃，和他们这些生命周期函数是同级的。

同级的，那这个呢，有点像，像谁呢，有点像那个RA。RA上来是不是也有内置的生命周期函数啊，是不是也有自自定义的时间啊，它它们是不是放动是平移的吧？嗯，OK，那我去写一下这个handle parent，哎，注意在当下这种场景，也有的同学容易犯错。我这儿本身传递是个对象对吧。对象那对象这是k value，注意后边一定要加一个什么逗号，你看我这不加，下面这是不是飘红，OK，我在这加一个，嗯。那我现在上来用这种方式写，大家能看懂吗？嗯，学完ES6以后就尽量去用ES6的语法，对吧，那我现在用这种叫什么呢。

按理来说，咱是不是应该是写成这样，你说我省略什么了。省略这个方式冒号对吧？这叫对象的节写方式吧？对象节写方式这最外边这不是一个对象吗？对象填写方式有两个特点，第一个是同名的属性，可以省略不写，第二个是可以省略函数的方式。啊，我会一边给大家讲新的，一边带你们去串一下你们之前旧的知识点。OK，那知道了这个以后，在这里边我就写一个简单的cons.log啊这个呢是负元素对吧，那其实对应的还应该有一个来，我们叫他什么呢？叫character child来把这个换一下，那把里边这个换一下。CTRLS保存。来，因为它是打印，所以呢，我要打开我们的调试器来到cos。

我现在问大家一个问题，我待会儿我去点击子元素的时候，我问你有几次打印。注意看，我是用爱绑定着世界。几次啊，两次来，我看是不是。子元素一次负元素说明什么？说明它是不是向上冒泡，把负元素身上那个事件也出发了，那我再往外稍微移一点点移到负元素，这靠，哎，没点进去，现在是不是只触发负元素的。来，我们再证明一个事情，我现在其他的地方不动，我把这个换成什么很好。他怎么会阻什么会呀。CTRLS1保存，那现在我再问一下的，我点击子元素有几次打印，那我们来看是不是它是不是不会向上去冒泡。

嗯，同样道理，你移出来点击元素的话，那只能是打印元素一次。但这也是小程序这个里面的一个特点，注意它的事件分为两种，冒泡事件和非冒泡，一个是卖的，一个是。嗯，OK，那讲到这儿呢，我把这个停一下。