微信小程序之数据的绑定（与vue做对比）

数据绑定与vue的对比

Page({
      /**
        * 页面的初始数据
        */
     data: {
        a:1,
        b:2,
        target:true,
        list:[
              {
                  id:1,
                  name:"wq",
                  age:18
              },
              {
                  id:2,
                  name:"ce",
                  age:20
              }
        ]
     },
})

• 基础绑定

  • vue的数据绑定：vue是使用{{}}双花括号内写data中的属性 {{a+b}}或者{{1+2*3}}
  • 微信小程序数据绑定：也是使用{{}}写定义在data中的属性 {{a+b}}或者{{1+2}}

  可以看出基础绑定两者没有什么差别，也可以进行计算，就像js中的eval函数，可以把字符串转变成js代码来执行

• 组件绑定 -动态绑定class与id

  • vue中使用的是单花括号{}键值对的形式：key是class, value是对应是否为true的值,而且必须在class之前添加冒号(:class) 如：

    target的值为true显示红色，否则显示蓝色
    ; 绑定id直接在id之前加上冒号(:id) 然后就放入动态的id, 
    target的值为true时id为redId，否则显示blueId

  • 小程序中用的还是{{}}双花括号形式,但这个它不需要使用冒号(:)直接在class里面添加双花括号就可以了； 如：target的值为true显示红色，否则显示蓝色 绑定id与class一样直接使用双花括号就可以了target的值为true时id为redId，否则显示blueId

  • if的使用与v-show和hidden

    • 在vue中对于if是属于vue的一个指令，所以使用就直接用v-if="target" 然后就可以控制标签的显示与消失
    • 对于微信小程序中，也有自己的指令名字:wx，使用if则直接使用wx:if="{{target}}",当然还是得加上双花括号，不然他就是一个字符串
    • v-show 是vue中用来处理页面中出现频繁切换隐藏显示标签的一个指令，因为v-if是直接把dom元素给删除， 如果频繁的去添加与删除dom会极其影响性能，所以使用v-show就可以解决这个问题，应为v-show是其只是让 其display属性变为none,虽然页面中看不到该元素，但是其元素还存在dom树中，所以微信小程序也考虑到 这个原因，也使用了一个属性叫hidden,也可以达到v-show的效果

  • for绑定数据

    • vue中使用for 用的是for in 循环,使用 
      {{item}}
       在这个标签内部就可以直接拿到这个数组的每一项(item)进行数据显示，i对应的是数组下标， key的作用是在生成dom树的时候看是否是新的dom节点，具体的这里就不多讲
    • 微信小程序中的for:wx:for="{{data中的数组}}"  {{item}},这是通用写法，默认循环后的每一项的名字是item 如果想要修改这个名字就可以使用 wx:for-item="person" 在标签内部就可以使用person来代替item了  {{person}} 如果想要获取到数组的下标 wx:for-index="pIndex" 在标签中就可以获取到数组的下标了  {{pIndex}}

  • 组件模板中绑定数据

  • 在vue中想要在模板中传入数据可以使用 :propName="list" 也可以使用 v-model="list" 来进行数据传值，具体如何再次不做讲解

  • 微信小程序中想要给模板传入值可以使用data="{{list}}"  is使用来去掉哪个模板的，把值传入到模板中后，在模板内部就可以对这个值进行循环遍历展示

通过以上的对比可以知道,vue与微信小程序上的绑定值中除了基础绑定是一样的其他绑定值的时候都得带上{{}}双花括号其他的和vue差不多，学过vue的对于这个就非常简单了