weex 在开发过程中采用的是Vue 2.0 的单文件组件语法来编写代码的
weex 代码的三部分构成:<template> <style> <script>
No.1 template
1. vue 2.0的每个组件必须只有一个根元素
2. template只支持一个根节点,多个根节点无法被weex 正确识别和处理
3. 目前仅支持3种根节点:
div------普通根节点,有确定的尺寸, 不可滚动;历史版本中,<div> 别名是 <container>,目前已
经弃用
scroller--------可滚动根节点,适合于需要全页滚动的场景;可作为根元素和嵌套元素使用,滚动方向
为垂直方向
list-------列表根节点,适用于其中包含重复的子元素的列表场景
4. 官方解释--必须的,使用HTML语法描述页面结构,内容由多个标签组成,不同的标签代表不同的组件
No.2 style
1. 官方解释--可选的,使用CSS语法描述页面的具体展现形式
2. 属于样式层,可以自定义class,虽然是可选的,但是建议是必须的,养成好习惯不要把所有代码都写到html
里面,这样维护会很麻烦,层次不清晰。
3. 两个属性:
scoped: 添加scoped属性以后,表示限制了该样式作用域只在该组件中
lang: 普通的style标签只支持普通的样式,如果想要启用scss或less,需要为style元素,设置lang属性
No.3 script
1. 官方解释--可选的,使用 JavaScript 描述页面中的数据和页面的行为,Weex 中的数据定义也在 <script>
中进行。
2. 包含数据绑定和点击事件处理,包括数据校验等,处理业务逻辑
。