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