学习笔记二－－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间用“，”隔开