学习笔记二--Weex语法介绍
来源:互联网 发布:ubuntu怎么注销用户 编辑:程序博客网 时间:2024/05/16 04:21
语法介绍
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间用“,”隔开
- 学习笔记二--Weex语法介绍
- 学习笔记一--Weex介绍
- weex学习笔记-1.weex环境搭建
- Weex个人学习笔记
- Weex学习笔记
- weex 学习开发笔记
- weex学习笔记-Couldn't find preset "es2015" relative to directory
- Html 语法学习笔记二
- HttpClient学习笔记二--功能介绍
- weex学习(二):接入iOS端
- [每日学习笔记][2013.03.24]MYSQL的语法和简单介绍(二)
- Chap 5 学习笔记-XML语法介绍
- Scala 学习笔记(3)-语法介绍
- Shell 的语法学习笔记二
- erlang学习笔记二 ---精悍的语法
- PHP 学习笔记(二)基础语法
- java基础语法学习笔记(二)
- PHP学习笔记二(基础语法)
- Spring 的 bean 的测试 --IOC (一)
- jQuery 事件
- Kubernetes1.6新特性:POD高级调度-污点和容忍特性/报告节点问题特性
- 股神
- 贪心——洛谷P2255 [USACO14JAN]记录奥林比克Recording the M…
- 学习笔记二--Weex语法介绍
- 快速排序partition过程常见的两种写法
- Ubuntu16.04配置使用deepnlp
- CMake入门教程
- 关系运算符及循环,逻辑运算符
- python 常用库
- 557. Reverse Words in a String III
- gis地图图层(前台)
- jQuery 事件方法