语法介绍
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间用“,”隔开