学习笔记二--Weex语法介绍
2017-06-01 08:37
246 查看
语法介绍
1、
例子
注意:style和src之间没有逗号
知识点:
(1)
支持的根节点:
(2)
2、
注意:Weex 遵循 HTML 特性 命名规范,所以特性命名时请不要使用陀峰格式 (CamelCase),采用以“-”分割的 long-name 形式。
知识点:有两种写法
(1)在标签里面通过style特性编写样式
(2)通过标签中class特性与
知识点:
(1)module.exports对象,是一个ViewModel选项,让三个标签显示当前时间、“Alibaba”、“Weex Team”
(2)module.exports选项中data用于存储数据,这些数据可以通过数据绑定和标签中内容绑定
(3)methods中列举上下文可执行的函数
(4)created是生命周期函数,会在数据初始化之后,界面被绑定数据并渲染前执行。
感悟:作为iOS开发者,习惯了OC语言以及对应的编程习惯,初次接触Weex,因为它类似于前段的编程,有点不适应;但是IT这一行本来就是需要不断的学习。
编程注意:
(1)
(2)函数名后面加“:”,然后加function();比如
(3)data、methods间用“,”隔开
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间用“,”隔开
相关文章推荐
- Scala 学习笔记(3)-语法介绍
- [每日学习笔记][2013.03.24]MYSQL的语法和简单介绍(二)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- Java学习笔记一:基本语法:类和对象的介绍、数组、引用类型
- HTML5学习笔记简明版(1):HTML5介绍与语法
- HTML5学习笔记简明版(1):HTML5介绍与语法
- iOS学习笔记:Object-C基础语法(OC介绍与Foundation初步)
- React学习笔记(3)-- JSX语法及特点介绍
- StringTemplate.Net 学习笔记(2):语法介绍(表格)
- 黑马程序员----Objective-C学习笔记之点语法的介绍和使用
- HTML5学习笔记简明版(1):HTML5介绍与语法
- HTML5学习笔记简明版(1):HTML5介绍与语法
- openTSDB/Bosun报警语法 介绍/学习笔记
- python学习笔记一 介绍、基本语法、流程控制
- HTML5学习笔记简明版(1):HTML5介绍与语法
- iptables 学习笔记——语法的详细介绍
- HTML5学习笔记(1):HTML5介绍与语法
- Linux系统学习笔记网络相关 ,firewalld和netfilter,netfilter5表5链介绍,iptables语法
- StringTemplate.Net 学习笔记(2):语法介绍(表格)