复习上篇文章学习的数据绑定，感觉比较重要的是
1.计算属性的的使用，类似响应式编程，就是一个变量的值会随着它相关的那个变量的值的变化而变化，不需要去update，比如fullName = firstName+lastName，一个text=fullName，如果firstName变化，那么fullName就会变。
2.if& repeat使用，if判断这个标签是否显示隐藏，repeat用在数组中生成表格数据类似的场景使用
本次要学习的是css样式和class使用,内联事件处理函数
重点，多个class名使用，在个个类名之间用空格分开像这样class="title highlight"
在class里也可以使用变量来代替像这样class="large {{textClass}}"
下面来看一下具体官方教程使用
CSS样式和类
基础语法
CSS样式可以理解为一系列的键值对，其中的每一对描述了一个特定的样式，例如组件的宽或者高。
width:400; height:50; ...
键值对的形式是prop-name: prop-value;。键名是prop-name，键值是prop-value。一般情况下，键名按照连接符的方式进行命名，键和值之间由冒号:进行分隔，每对键值之间由分号;进行分隔。
在Weex页面上样式有两种形式：
●template中的style特性
●style样式表
template中的style特性
在style特性中编写样式，例如：
template
div style="width: 400; height: 50;"
...
/div
/template
这段代码的意思是div组件的宽和高分别为400像素和50像素。
style样式表
例如:
style
.wrapper { width:600; }
.title { width:400; height:50; }
.highlight { color: #ff0000; }
/style
样式表包含了多个样式规则，每条规则有一个对应的类，以及由{...}包括的若干条样式。例如：
.title { width:400; height:50; }
class特性
template标签中的class特性值用来匹配style样式表中的一个或多个class名，多个classname之间由空格分隔。例如：
template
divclass="wrapper"
textclass="title"... /text
textclass="title highlight"... /text
/div
/template
style
.wrapper { width:600; }
.title { width:400; height:50; }
.highlight { color: #ff0000; }
/style
体验一下
这段代码的含义是div组件的宽度是600像素，两个text组件的尺寸为400x50，其中第二个文本组件是红色字。
注意事项
●为了简化页面设计和实现，屏幕的宽度统一为750像素，不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。
●标准CSS支持很多样式选择器，但Weex目前只支持单个classname的选择器。
●标准CSS支持很多的长度单位，但Weex目前只支持像素，并且px单位可以忽略不写，直接使用对应的数值。更多详情请查看通用样式。
●子元素的样式不会继承自父元素，这一点与标准CSS不同，比如color和font-size等样式作用在text上层的div上是无效的。
●标准CSS包含了非常多的样式属性，但Weex只支持了其中的一部分，比如盒模型、flexbox、position等布局属性，以及font-size、color等其它样式。
与数据绑定结合
请查阅数据绑定中有关style和class特性的相关部分。这里简单举个例子：
template
div
text style="font-size: {{fontSize}};"Alibaba /text
textclass="large {{textClass}}"Weex Team /text
/div
/template
style
.large {font-size:32;}
.highlight {color: #ff0000;}
/style
script
module.exports = {
data: {
fontSize:32,
textClass:'highlight'
}
}
/script
体验一下
今天看到一个特殊的内联事件处理参数，$event是默认的事件处理函数的第一个参数，这个参数包含三个属性type，target，timestamp。这个属性是固定存在的，格式也是固定的就是通过$event这样传的。看一下具体用法：
事件处理
Weex允许对template中的元素绑定事件处理函数。
基本语法
以on...开头的就是用于绑定事件的特性，特性名中on之后的部分就是事件的类型，特性的值就是处理该事件的函数名。函数名外不需要添加mustache语法中的大括号。例如：
template
div
text onclick="toggle"Toggle: {{result}} /text
/div
/template
script
module.exports = {
data: {
result:true
},
methods: {
toggle: function () {
this.result = !this.result
}
}
}
/script
体验一下
内联事件处理参数
同时我们也支持在事件绑定的特性值中内联写明被传入的参数。例如：
template
div
text onclick="update(1, 2)"Result: {{result}} /text
/div
/template
script
module.exports = {
data: {
result:' empty '
},
methods: {
update: function (x, y) {
this.result = x + y
}
}
}
/script
体验一下
特殊的内联事件处理参数
额外的，在这种内联的事件绑定写法中，你可以使用一个特殊的参数$event，代表事件描述对象，即默认事件处理函数的第一个参数。所以template中的onclick="foo"和onclick="foo($event)"是等价的，$event的用法可以更多参考下面的例子
template
div
text onclick="update($event, 1, 2)"Result: {{result}} /text
/div
/template
script
module.exports = {
data: {
result:' empty '
},
methods: {
update: function (e, x, y) {
this.result = e.type + (x + y)
}
}
}
/script
体验一下
事件描述对象
每当一次事件被触发的时候，都会产生一个事件描述对象，该对象会默认作为第一个参数传递给事件处理函数，或以$event形参的方式出现在内联事件处理函数中。
每个事件描述对象至少包含以下几个特性：
●type (string):事件名称,如: click
●target (Element):目标元素
●timestamp (number):事件触发时的时间戳数字
网友评论