小程序开发-6-组件数据、事件与属性

组件数据、事件与属性

数据来源的三种途径

  • 直接在wxml中填写数据
  • 在js中绑定数据
  • 服务器中传数据到js,然后填入wxml

数据绑定

//在js中
data:{
 count: 99
}
在wxml中
<View>{{count}}</View>

三元表达式和图片切换

<image src="{{like?'image/like.png':'image/dislike.png'}}"/>

组件的封闭性、开放性及粒度

组件封装的难度

  • 哪些在内部,哪些可以放在外部
  • 组件的粒度,可以封装简单功能或非常复杂的功能

组件的properties属性详解

properties: {
like: {
  type: Boolean,//类型必填,Number,String,Boolean,Object,Array,null(任意类型)
  value: false, //默认值,可以不填,boolean类型的默认值为false
  observer: function(){} //当传入的值改变的时候,微信小程序会重新执行
}
}

注意:properties可以在wxml中用{{}}来绑定,和data类似


let var 与组件事件应用

可以用this.properties.like获取properties中的like的值

let允许你声明一个作用域被限制在块级中的变量、语句或表达式。与var关键字不同的是,他申明的变量只能是全局或者整个函数块的

if(true){
  let a = 1;
 let b = 2;
}
console.log(b);//2
console.log(a);//报错

小程序开发-6-组件数据、事件与属性

上一篇:小程序开发-7-访问api数据与ES6在小程序中的应用


下一篇:微信小程序退款