学习笔记二－－Weex语法介绍

语法介绍
1、<template>模板
例子

<template>
  <div>
    <image style="width:200;height:200;"  src="https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image>
    <text>练习template例子</text>
  </div>
</template>

注意：style和src之间没有逗号

知识点：
（1）<div>标签是根节点，里面包含<image>和<text>标签

 根节点：每个Weex页面最顶层的节点，称之为根节点

支持的根节点：
<div>:普通根节点，又确定尺寸，不可滚动 <scroller>:可滚动的根节点，适用于全页滚动的环境
<list>：列表根节点，适用于包含重复的子元素的列表场景

（2）<template>只支持一个根节点，多个根节点将无法被 Weex 正常的识别和处理

2、

<template>
  <div>
    <text style= "font-size:200;">Alibaba</text>
    <text class="large">Weex Team</text>
  </div>
</template>

<style>
.large{font-size:60;}
</style>

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

知识点：有两种写法
（1）在标签里面通过style特性编写样式
（2）通过标签中class特性与

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

<script>
  module.exports = {

    data:{

       title:'Alibaba',
       datetime:null

     },

    methods:{

      getTitle:function(){
        return 'Weex Team'
      }

    },

    created:function(){
      this.datetime = new Date().toLocaleString()
    }
 }
</script>

知识点：<script>是为template标签添加数据以及逻辑的；
（1）module.exports对象，是一个ViewModel选项,让三个标签显示当前时间、“Alibaba”、“Weex Team”
（2）module.exports选项中data用于存储数据，这些数据可以通过数据绑定和标签中内容绑定
（3）methods中列举上下文可执行的函数
（4）created是生命周期函数，会在数据初始化之后，界面被绑定数据并渲染前执行。

感悟：作为iOS开发者，习惯了OC语言以及对应的编程习惯，初次接触Weex，因为它类似于前段的编程，有点不适应；但是IT这一行本来就是需要不断的学习。

编程注意：
(1)<template>中标签中要显示的内容用嵌套花括号括住
(2)函数名后面加“：”，然后加function();比如getTitle:function()
(3)data、methods间用“，”隔开