小程序开发-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);//报错