文档章节

Weex学习第四篇:计算属性,class定义style,if,repeat

孙启超
 孙启超
发布于 2017/01/10 17:58
字数 1322
阅读 68
收藏 1

首先来复习一个重要的知识点:

 

根节点:每个 Weex 页面最顶层的节点,我们称为根节点。下面是目前我们支持的三种根节点:

  • div:普通根节点,有确定的尺寸,不可滚动。
  • scroller:可滚动根节点,适用于需要全页滚动的场景。
  • list:列表根节点,适用于其中包含重复的子元素的列表场景。

目前 Weex 仅支持以上三种根节点。

注意事项:template 只支持一个根节点,多个根节点将无法被 Weex 正常的识别和处理。

 

本次要学习:

 

1.在template中使用class来设置样式。

 

2.onclick事件绑定,使用if判断一个标签是否隐藏显示。

 

3.repeat在list中使用

 

下面我们来看一下具体的使用和范例代码,“体验一下”这个链接可以点击到官方调试网站去看效果。

 

一.计算属性 

数据绑定表达式已经非常方便了,但如果希望在模板里实现更复杂的逻辑判断,你也可以使用计算属性。例如:

<template>
  <div style="flex-direction: row;">
    <text>{{fullName}}</text>
    <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      changeName: function() {
        this.firstName = 'Terry'
      }
    }
  }
</script>

体验一下

同样能够达到相同的效果。这里我们引入了一个叫做 fullName 的计算属性,由 firstName 和 lastName 计算而成,在数据绑定的时候,如果 firstName 或 lastName 发生改变,fullName 都会自动重新计算并触发改变。

另外计算属性还支持另外一种写法,就是同时定义一个计算属性的 getter 和 setter,这样的话当下面例子中的 fullName 被赋值时,data 里的 firstName 和 lastName 会被自动改变:

<template>
  <div style="flex-direction: row;">
    <text>{{fullName}}</text>
    <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    },
    computed: {
      fullName: {
        get: function() {
          return this.firstName + ' ' + this.lastName
        },

        set: function(v) {
          var s = v.split(' ')
          this.firstName = s[0]
          this.lastName = s[1]
        }
      }
    },
    methods: {
      changeName: function() {
        this.fullName = 'Terry King'
      }
    }
  }
</script>

体验一下

注意事项:datamethodscomputed 中的字段是不能相互重复的,因为它们都会通过组件实例的 this访问到。

二.数据绑定在 <template> 中的特殊用法

样式: style 或 class

组件的样式能够通过 style 特性进行绑定:

<template>
  <div>
    <text style="font-size: {{size}}; color: {{color}};">Hello World</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      size: 32,
      color: '#ff0000'
    }
  }
</script>

体验一下

样式也能够通过 class 特性实现样式绑定,多个 class 名通过空格分隔:

<template>
  <div>
    <text class="{{size}}">Hello</text>
    <text class="title {{status}}">World</text>
  </div>
</template>

<style>
  .large { font-size: 64; }
  .small { font-size: 32; }
  .title { font-weight: bold; }
  .success { color: #00ff00; }
  .error { color: #ff0000; }
</style>

<script>
  module.exports = {
    data: {
      size: 'large',
      status: 'success'
    }
  }
</script>

体验一下

在上面的代码中如果 {{size}} 和 {{status}} 是空值, 就只有 class="title" 会被解析。

延伸阅读:style 和 class

三.事件绑定:on...

以 on... 开头的就是用于绑定事件的特性,特性名中 on 之后的部分就是事件的类型,特性的值就是处理该事件的函数名。函数名外不需要添加 mustache 语法中的大括号。例如:

<template>
  <div>
    <text onclick="toggle">Toggle: {{result}}</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      result: true
    },
    methods: {
      toggle: function () {
        this.result = !this.result
      }
    }
  }
</script>

体验一下

除此之外 Weex 还支持更多的事件处理方式。

延伸阅读:事件处理

四.展示逻辑控制 if & repeat

if 特性能够通过特性值的真假来控制组建是否显示,且 mustache 大括号可以省略。例如:

<template>
  <div style="flex-direction: column;">
    <text onclick="toggle">Toggle</text>
    <image if="{{shown}}" src="{{imageUrl}}" class="logo"></image>
  </div>
</template>

<style>
  .logo { width: 512; height: 512; }
</style>

<script>
  module.exports = {
    data: {
      shown: true,
      imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'
    },
    methods: {
      toggle: function () {
        this.shown = !this.shown
      }
    }
  }
</script>

体验一下

repeat 特性可以根据一组数组数据重复生成相同或相似的顺序排列的界面。例如:

<template>
  <div>
    <text repeat="(k,v) in list">{{k}} - {{v}}</text>
  </div>
</template>
<script>
  module.exports = {
    data: {
      list: ['a', 'b', 'c']
    }
  }
</script>

体验一下

延伸阅读:展示逻辑控制

五.静态模板优化 static 

static 特性可以一次性把数据设置到模板相应的位置上,但是今后不会随着数据的变化而更新。这样可以减少无谓的数据绑定,有效控制和优化长列表、纯静态页面在运行时的开销。不过你也要小心使用不要导致原本需要更新的视图没有触发更新。

<template>
  <div static>
    <text>{{ word }}</text>
  </div>
</template>

<script>
  module.exports = {
    ready: function() {
      this.word = 'Data changes' // UI won't be updated
    },
    data: {
      word: 'Hello static'
    }
  }
</script>

体验一下

如上所示,添加 static 关键字,渲染结果会是“Hello static”字样,相当于渲染一个静态的节点,ready 函数中对数据 word 的改变不会更新到视图。

 

建议大家在最开始的时候多理解核心概念和运作的方式,关键的标签一定要牢记,达到一出现这个标签就知道涵义,如果还要去翻文档才知道意思的话,那效率就太低了。还有一些核心概念一定要了解清楚,包括数据绑定的机制,变量的表示,如果对应关系,以及命名规则等。基础很重要。

 

 

 

 

 

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

© 著作权归作者所有

共有 人打赏支持
孙启超
粉丝 122
博文 172
码字总数 276126
作品 0
浦东
高级程序员
私信 提问
weex中UISegmentControl实现及遇到的问题

在最近主导的一个项目中,App端的实现使用了weex。通过近一个月的实践,我们发现如果对于人机交互较少的App,即使较少前端经验的人也能迅速进入开发(当然需要一定时间 才能上手weex)。在开发...

scorpiozj
2018/11/20
0
0
css3简单知识学习

CSS3简单学习 倾斜div div { transform:rotate(30deg); } css3圆角边框 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; / Old Firefox / } 边框阴影 div { box-shad......

writeademo
2016/08/02
16
0
Weex快速上手教程(Weex Tutorial)

我们将使用Weex编写一个简单的列表 , 类似的列表经常能在电商类移动应用中见到。 开始 我们先编写一个列表项。 请创建一个名为 tech_list.we 的文件( .we 是Weex推荐的后缀名 ) ,请复制粘贴...

阿里百川
2016/06/14
5.7K
0
Java程序员从笨鸟到菜鸟之(十六)CSS基础积累总结(上)

一:CSS的工作原理 1.基本的CSS语法 比方说,我们要用红色作为网页的背景色: 用HTML的话,我们可以这样: 用CSS的话,我们可以这样获得同样的效果: body {background-color: #FF0000;} 上例...

长平狐
2012/11/12
63
0
Weex 中别具匠心的 JS Framework | 掘金技术征文

前言 Weex为了提高Native的极致性能,做了很多优化的工作 为了达到所有页面在用户端达到秒开,也就是网络(JS Bundle下载)和首屏渲染(展现在用户第一屏的渲染时间)时间和小于1s。 手淘团队...

一缕殇流化隐半边冰霜
2017/04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day11

architect刘源源
今天
6
0
论学好Linux系统的超级重要性

不知道各位在日常的工作生活中有没有接触过“rm -rf /*”这个命令,因为这个命令搞出来的事情可还不少呢!前段时间就在一个群里看到了有个小伙子,老板让他去维护一下服务器,这小伙也不太懂...

Linux就该这么学
昨天
6
0
git 使用

1,首先在github配置好信息和仓库,然后在本地进行操作 git init git config user.name 'zhangwuer' git config user.email '56789053@qq.com' 2,与远程分支建立连接 git checkout -b test......

天王盖地虎626
昨天
3
0
git checkout 命令详解

在日常的git操作中,git checkout——检出,是我们的常用命令。最为常用的两种情形是创建分支和切换分支。 在下面的命令中,使用了一些简写,在这里说明一下: git st # git statusgit ci ...

shzwork
昨天
10
0
【Nginx】Nginx多级代理,获取客户端真实请求IP以及每级代理IP

Nginx多级代理,获取客户端真实请求IP以及每级代理IP 如图所示,每一级nginx里的location配置里需要加上对应的配置,最后一级nginx是直接到应用,测试时为了方便,直接用echo模块去测试,打印...

薛定谔的旺
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部