Weex语法体验
来源:互联网 发布:电影同声语音翻译软件 编辑:程序博客网 时间:2024/05/18 01:34
Weex页面由<template>,<style>,<script>三个部分构成。
- <template>: 必须的, 使用类HTML的语法描述页面结构,内容由多个标签组成,不同的标签代表不同的组件。
- <style>: 可选的, 使用类CSS的语法描述页面的具体展现形式。
- <script>: 可选的 , 使用JavaScript描述页面中的数据和页面的行为,Weex中的数据定义也在<script>中进行。
- <template>
- <!--(required) the structure of page-->
- </template>
- <style>
- /* (optional) stylesheet */
- </style>
- <script>
- /* (optional) the definition of data, methods and life-circle */
- </script>
<template>
- <template>
- <container>
- <image style="width: 200; height: 200;" src="http://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image>
- <text>Alibaba Weex Team</text>
- </container>
- </template>
container 标签是一个根节点,其下包含描述图片的 image标签和描述一段文字的 text 标签。
和HTML中类似,不同标签代表的元素/组件有各自的属性,其中一些组件还能有子组件.
根节点: 每个 template 标签中的最顶层标签,我们称为根节点。下面是目前我们支持的三种不同的根节点:目前Weex仅支持以上三种根节点
- <container>: 普通根节点
- <scroller>: 滚动器根节点,适用于需要全页滚动的场景
- <list>: 列表根节点,适用于其中包含重复的子元素的列表场景
内置组件列表.<style>
你能把Weex中的样式语法理解为CSS的一个子集,两者有一些细微的区别
第一种写法是,你能在标签上,直接通过内联style属性编写样式. 第二种写法,通过标签中的class属性与style标签中定义的样式建立对应关系,让style标签中定义的样式作用于特定标签之上.
以下是例子:上面的两个text组件都被设置了同样的字体大小,但分别用了两种不同的方式.
- <template>
- <container>
- <text style="font-size: 64;">Alibaba</text>
- <text class="large">Weex Team</text>
- </container>
- </template>
- <style>
- .large {font-size: 64;}
- </style>
weex 遵循 HTML属性 命名规范 , 所以属性命名时 请不要使用陀峰格式(CamelCase) , 采用以“-”分割的long-name形式.<script>
<script>中的代码遵循 JavaScript(ES5)语法. 描述页面中的数据和页面的行为。 下面是一个例子:上面<script>标签中定义了被赋值给 module.exports 的对象.其作用是让三个<text>标签显示当前时间,'Alibaba' 和 'Weex Team'. <script>中的data存储可以用于在<template>标签中进行数据绑定的数据, 当这些数据变更时,被进行了数据绑定的标签也会自动更新. 这些数据在<script>中的各个方法内可以通过this.x读写.
- <template>
- <container>
- <text>The time is {{datetime}}</text>
- <text>{{title}}</text>
- <text>{{getTitle()}}</text>
- </container>
- </template>
- <script>
- module.exports = {
- data: {
- title: 'Alibaba',
- datetime: null
- },
- methods: {
- getTitle: function () {
- return 'Weex Team'
- }
- },
- created: function() {
- this.datetime = new Date().toLocaleString()
- }
- }
- </script>
阅读全文
0 0
- Weex语法体验
- Weex Android初体验
- Weex初体验
- Weex入门初体验
- weex语法概述
- weex的使用初体验
- 阿里Weex框架Android平台初体验
- Weex的体验和环境搭建
- Weex框架快速体验与环境搭建
- Windows下搭建Weex环境【初体验】
- Weex和Web开发体验的异同
- Weex
- weex
- WEEX
- weex
- weex sdk集成到Android工程一. 阿里Weex框架快速体验与环境搭建
- 阿里Weex框架快速体验与环境搭建
- 阿里Weex框架快速体验与环境搭建
- jdbc连接数据库
- 只能进行赋值,+1,固定次数的循环三种原子操作,只能操作0和正整数
- selenium2java通过第三方登录绕过知乎登陆验证码
- IDEA 本地git库项目关联及码云项目上传下载
- java环境配置
- Weex语法体验
- Swift3.0 监控键盘的弹出与收回
- 4561 [JLoi2016] 圆的异或并
- Python3.X 爬虫实战(动态页面爬取解析)
- 25张图让你读懂神经网络架构
- 程序字符集问题
- rabbitmq(安装)
- 比特位操作——二进制表示
- CString分割切分 实现SplitCString