學習筆記二－－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間用“，”隔開