前言

终于有时间,可以继续学习Weex,但是为什么Weex又要更新了,而且还报错了!

npm ERR! Darwin 16.1.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "weex-toolkit"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! path /usr/local/lib/node_modules/weex-toolkit/node_modules/asn1.js
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/weex-toolkit/node_modules/asn1.js'
npm ERR!     at Error (native)
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules/weex-toolkit/node_modules/asn1.js'
npm ERR!     at Error (native)
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/weex-toolkit/node_modules/asn1.js' }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

感觉是权限问题试了试

sudo npm install -g weex-toolkit

不知道是否有用,但是感觉是成功了,趁着这个时间,继续看文档

Weex基本构成

前文提到,weex由3个部分组成,<template>,<style>,<script>

<template>：必须的，使用 HTML 语法描述页面结构，内容由多个标签组成，不同的标签代表不同的组件。
<style>：可选的，使用 CSS 语法描述页面的具体展现形式。
<script>：可选的，使用 JavaScript 描述页面中的数据和页面的行为，Weex 中的数据定义也在<script>中进行

`template`模板

根节点

每个 Weex 页面最顶层的节点，我们称为根节点。下面是目前我们支持的三种根节点：

<div>：普通根节点，有确定的尺寸，不可滚动。

<scroller>：可滚动根节点，适用于需要全页滚动的场景。

<list>：列表根节点，适用于其中包含重复的子元素的列表场景。
目前 Weex 仅支持以上三种根节点。

注意事项 <template>只支持一个根节点，多个根节点将无法被 Weex 正常的识别和处理。

`style`样式

<style>
    .text-aa{
        font-size: 199;
    }
    .large-text{
        font-size: 612;
    }
</style>

原文说可以把样式理解为 CSS的子集,但是我不知道什么是CSS啊

试了一下,类似iOS中的先定义属性,再调用属性

另外值得注意的的是

注意：Weex 遵循 HTML 特性命名规范，所以特性命名时请不要使用陀峰格式 (CamelCase)，采用以“-”分割的 long-name 形式。

`script`脚本

<template>
    <div>
        <text>The time is { {datetime}}</text>
        <text>{ {title}}</text>
        <text>{ {getTitle()}}</text>
      </div>
</template>

<style>
    .text-aa{
        font-size: 199;
    }
    .large-text{
        font-size: 612;
    }
</style>

<script>
    module.exports = {
        data: {
          title: '这个data是为什么',
          datetime: null
        },
        methods: {
          getTitle: function () {
            return '应该是这个'
          }
        },
        created: function() {
          this.datetime = new Date().toLocaleString()
        }
      }
</script>

上面 <script> 标签中定义了被赋值给 module.exports 的对象，这个对象其实就是一个 ViewModel 选项，让三个 <text>标签显示当前时间、“Alibaba”字样和“Weex Team”字样。

选项中的 data 用于存储数据，这些数据可以通过数据绑定机制和 <template> 标签中的内容绑定起来。当这些数据变更时，被绑定的模板内容也会自动更新。这些数据在 <script> 中的各个方法中可以通过类似 this.x 的方式进行读写操作。

而选项中的 methods 里则列出了当前上下文可执行的各种函数，比如 getTitle()。

选项中最后的 created 是生命周期函数，会在数据初始化之后、界面被绑定数据并渲染之前执行。类似的生命周期函数还有 init、ready 等，在这个例子中，datetime 会在界面渲染之前被更新为当前的时间。

weex3个基本部分就熟悉完成了,下来看看具体的语法

数据绑定

刚刚开始看到数据绑定这个单词,不知道是什么意思,但是看了文档描述,感觉是类似iOS中的get,set方法,像懒加载一样,{ {...}}}类型与点语法,去调用属性,然后在script中去set属性

数据绑定路径

script中的格式貌似固定的

<template>
  <div>
    <text style="font-size: { {size}}">{ {title}}</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      size: 48,
      title: 'Alibaba Weex Team'
    }
  }
</script>

这个module.export似乎是固定的,下面的data就是表示属性

哈哈,刚刚才说了类型是属性的点属性,下面就演示了类似的用法

<template>
  <div>
    <text style="font-size: { {title.size}}">{ {title.value}}</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      title: {
        size: 48,
        value: 'Alibaba Weex Team'
      }
    }
  }
</script>

数据绑定表达式

真是郁闷了,文档表示Weex支持一些简单的JavaScript,天啊,幸好只是简单的,不然笔者都看不懂了.

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    }
  }
</script>

计算属性

<template>
  <div style="flex-direction: row;">
    <text>{ {fullName}}</text>
    <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      changeName: function() {
        this.firstName = 'Terry'
      }
    }
  }
</script>

看完代码,我以为是运行了,之后用Terry替换John,但是运行之后依旧是John,但是当我点击changeName之后,就发生变化了.
(还是因为不懂JS啊).

用我这个外行人,感觉是onclik给予CHANGE NAME字符串一个点击事件,这个点击事件就是懒FirstName变值.

原来这里面真的有get,set =.=

<template>
  <div style="flex-direction: row;">
    <text>{ {fullName}}</text>
    <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    },
    computed: {
      fullName: {
        get: function() {
          return this.firstName + ' ' + this.lastName
        },

        set: function(v) {
          var s = v.split(' ')
          this.firstName = s[0]
          this.lastName = s[1]
        }
      }
    },
    methods: {
      changeName: function() {
        this.fullName = 'Terry King'
      }
    }
  }
</script>

其实set方法将fullName分为2段,但是我不明白的是,他在哪取到了fullName.

试验了一下,感觉就是v传过去的参数,但是没有看到调用fullName.

疑问这个`v`到底是什么东西

注意事项：data、methods、computed 中的字段是不能相互重复的，因为它们都会通过组件实例的 this 访问到。

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

前言