Weex学习第三篇:模版,样式,脚本

原创
2017/01/07 16:42
阅读数 152

这两天把官方的教程都看了一遍,总体感觉是信息量很大,但是大部分和iOS原生开发有相似的地方,像UI,touch事件,数据绑定,数据处理等流程都是存在,区别在于语言和语法,虽然知识点,用法,API很多,有的常用的还需要记住,但是只要有耐心,一个一个的克服,结果肯定是好的。而且最近感受最深的是,写出来的博客是要经过自己反复验证的,保证99.99%正确后才能发出来,不能像以前那样跟发相声似的,所以后面出一篇文章可能用3,4天时间也很正常,尤其是在一开始,就有小伙伴支持鼓励,对我影响很大,也加重了我的责任感。

 

今天我们来介绍一下weex代码的三部分构成:<template>、<style>、<script>

第一部分:template

官方解释--必须的,使用 HTML 语法描述页面结构,内容由多个标签组成,不同的标签代表不同的组件。

可以看出里面其实就是html的代码,像title,body,表单等元素。

 

第二部分:style

官方解释--可选的,使用 CSS 语法描述页面的具体展现形式。

属于样式层,可以自定义class,虽然是可选的,但是建议是必须的,养成好习惯不要把所有代码都写到html里面,这样维护会很麻烦,层次不清晰。

 

第三部分:script

官方解释--可选的,使用 JavaScript 描述页面中的数据和页面的行为,Weex 中的数据定义也在 <script> 中进行。

是数据绑定和点击事件处理,包括数据校验等,处理业务逻辑。

 

总结下来:这是一个典型的 M-V-VM 架构:通过 ViewModel 把 Model 和 View 建立更直接有效的关系,ViewModel 的实现以 <script> 的内容为主。

 

数据绑定

 

接下来再看看官方介绍的数据绑定,

1.数据绑定路径---就是在template用变量来设置,然后在script里给变量赋值,用双大括号来表示 “ {{ x }} ”

2.数据绑定表达式---用简单JS的表达式绑定

 

Weex使用 mustache 的语法 ({{...}}) 来对 <template> 中的模板和 <script> 里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。

数据绑定路径

<template>
  <div>
    <text style="font-size: {{size}}">{{title}}</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      size: 48,
      title: 'Alibaba Weex Team'
    }
  }
</script>

体验一下

上面的代码会把 title 和 size 的数值绑定到模板内容上。

我们也可以通过 . 符号来绑定数据结构中的字段。看一下下面的代码片段:

<template>
  <div>
    <text style="font-size: {{title.size}}">{{title.value}}</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      title: {
        size: 48,
        value: 'Alibaba Weex Team'
      }
    }
  }
</script>

体验一下

数据绑定表达式

进行数据绑定时,Weex 支持一些简单的 JavaScript 表达式,例如:

<template>
  <div style="flex-direction: row;">
    <text>{{firstName + ' ' + lastName}}</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    }
  }
</script>

体验一下

这些表达式会在当前的上下文中进行运算。

 

总结:了解template,style,script各个模块的作用,把基础打好,就像刚开始学习MVC模式时,如果能坚持各个模块的代码分离,控制好相互之间调用的权限,对后面的编程会提高很多。

 

 

参考链接:https://weex-project.io/cn/doc/syntax/data-binding.html

 

 

 

展开阅读全文
打赏
1
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部