微信小程序基础心得(二)

微信小程序基础(二)

单向数据绑定

在默认情况之下，小程序当中的data数据是单向绑定的，也就是说，我们改变了data这个对象里面的数据以后，页上面的数据并不会发生改变，这只是一个单向的过程

而在Vue里面，只要改变data当中的数据，那么，页面必然会发生渲染（除非使用v-once绑定的），小程序默认情况之下它只会渲染一次（相当于Vue当中的v-once）,如果要做到数据的双向绑定，我们需要设置特定的方法来改变data里面的值

---

在此之前，小程序里面，所有的数据都是初次拿到data当中的数据以后再进行渲染（第一次渲染），如果后期改变data里面的数据以后，你希望它重新用这些数据渲染面面，则需要调用一个方法setData。

this.data.userName="张三";

上面的这种方式，只是单向的设置了data中的值，并不会重新渲染页面，如果需要重新渲染页面，则需要使用setData这个方法来赋值，代码如下：

this.setData({
   
    userName:"李四"
});

上面这种方式的赋值，它就可以在赋完值以后重新用新的值去渲染页面，这个时候，页面上面显示的就是新的值

经验之谈：在开发小程序的时候，如果仅仅是要改变值而不需要重新渲染页面，我们可以直接使用data.属性名赋值，而要改变页面，则调用setData的方法！

一般input表单会直接使用data属性赋值，其它的地方则使用setData

小程序当中的事件冒泡与阻止事件冒泡

在小程序当中，我们绑定事件通用方法是使用bind关键来进行事件绑定，使用这个方法在进行事件的时候，它会有一个事件冒泡的过程！

在小程序里面，有一套专门用来阻止事件冒泡的处理机制！它使用catch代表bind就可以做到阻止事件冒泡了

<view class='v1' bindtap='v1test'>
    <view class='v2' catchtap='v2test'></view>
</view> 

在上面的代码当中，我们的bindtap与catchtap的区别就是，catch绑定的事件不会做事件冒泡，而bindtap绑定的事件是会有事件冒泡的，如果想阻止事件冒泡，就应该使用catch进事件绑定

小程序页面跳转

微信小程序本质上面与Vue一样，也是SPA的单页面开发，它的每个页面其实就是封装好的一系列组件，那么，在小程序里面，我们如何做到页面的跳转呢？

在小程序当中，要做到页面跳转有以下几种情况

1. 直接跳转【导航】

   wx.navigateTo({
        
       url: '/pages/b/b'
   });
   

   这一种跳转方式非常好，它不关闭之前的页面，而去打开一个新的页面，可以通过头的返回直接返回到上级页面

   缺点:它最多只能打开6个

2. 重定向跳转

   wx.redirectTo({
        
       url: '/pages/b/b'