Weex第三天

话接上文.

数据绑定在 `<template>` 中的特殊用法

组件的样式能够通过 style 特性进行绑定：

<template>
  <div>
    <text style="font-size: { {size}}; color: { {color}};">Hello World</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      size: 32,
      color: '#ff0000'
    }
  }
</script>

样式也能够通过 class 特性实现样式绑定，多个 class 名通过空格分隔：

<template>
  <div>
    <text class="{ {size}}">Hello</text>
    <text class="title { {status}}">World</text>
  </div>
</template>

<style>
  .large { font-size: 64; }
  .small { font-size: 32; }
  .title { font-weight: bold; }
  .success { color: #00ff00; }
  .error { color: #ff0000; }
</style>

<script>
  module.exports = {
    data: {
      size: 'large',
      status: 'success'
    }
  }
</script>

在上面的代码中如果 { {size}} 和 { {status}} 是空值, 就只有 class=”title” 会被解析。

事件绑定：on…

以 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>

大概分类就是这么多,接下来,我们看看具体的文章

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 像素。

class 特性

<template> 标签中的 class 特性值用来匹配 <style> 样式表中的一个或多个 class 名，多个 class name 之间由空格分隔。例如：

<template>
  <div class="wrapper">
    <text class="title">...</text>
    <text class="title highlight">...</text>
  </div>
</template>
<style>
  .wrapper { width: 600; }
  .title { width: 400; height: 50; }
  .highlight { color: #ff0000; }
</style>

这段代码的含义是

组件的宽度是 600 像素，两个组件的尺寸为 400x50，其中第二个文本组件是红色字。

注意事项

为了简化页面设计和实现，屏幕的宽度统一为 750 像素，不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。
标准 CSS 支持很多样式选择器，但 Weex 目前只支持单个 class name 的选择器。
标准 CSS 支持很多的长度单位，但 Weex 目前只支持像素，并且 px 单位可以忽略不写，直接使用对应的数值。更多详情请查看通用样式。
子元素的样式不会继承自父元素，这一点与标准 CSS 不同，比如 color 和 font-size 等样式作用在上层的
上是无效的。
标准 CSS 包含了非常多的样式属性，但 Weex 只支持了其中的一部分，比如盒模型、flexbox、position 等布局属性，以及 font-size、color 等其它样式。

这里有点像iOS的类,声明类的属性,再调用属性.然后我试了下如果同时使用1种类型的style,但是数值不一样,会依次赋值,谁最后,用谁

与数据绑定结合

<template>
  <div>
    <text style="font-size: { {fontSize}};">Alibaba</text>
    <text class="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>

这段感觉很容易理解

啊啊啊啊啊啊啊,发现看不进去了,感觉东西太多了.

待续