美文网首页
Weex学习第四篇:计算属性,class定义style,if,r

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

作者: a762b3c4bd19 | 来源:发表于2017-01-10 18:05 被阅读52次

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

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

div:普通根节点,有确定的尺寸,不可滚动。

scroller:可滚动根节点,适用于需要全页滚动的场景。

list:列表根节点,适用于其中包含重复的子元素的列表场景。

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

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

本次要学习:

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

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

3.repeat在list中使用

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

一.计算属性

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

{{fullName}}

CHANGE NAME

module.exports = {

data: {

firstName: 'John',

lastName: 'Smith'

},

computed: {

fullName: function() {

return this.firstName + ' ' + this.lastName

}

},

methods: {

changeName: function() {

this.firstName = 'Terry'

}

}

}

体验一下

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

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

{{fullName}}

CHANGE NAME

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'

}

}

}

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

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

样式:style或class

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

Hello World

module.exports = {

data: {

size: 32,

color: '#ff0000'

}

}

体验一下

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

Hello

World

.large { font-size: 64; }

.small { font-size: 32; }

.title { font-weight: bold; }

.success { color: #00ff00; }

.error { color: #ff0000; }

module.exports = {

data: {

size: 'large',

status: 'success'

}

}

体验一下

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

延伸阅读:style 和 class

三.事件绑定:on...

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

Toggle: {{result}}

module.exports = {

data: {

result: true

},

methods: {

toggle: function () {

this.result = !this.result

}

}

}

体验一下

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

延伸阅读:事件处理

四.展示逻辑控制if&repeat

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

Toggle

.logo { width: 512; height: 512; }

module.exports = {

data: {

shown: true,

imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'

},

methods: {

toggle: function () {

this.shown = !this.shown

}

}

}

体验一下

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

{{k}} - {{v}}

module.exports = {

data: {

list: ['a', 'b', 'c']

}

}

体验一下

延伸阅读:展示逻辑控制

五.静态模板优化static

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

{{ word }}

module.exports = {

ready: function() {

this.word = 'Data changes' // UI won't be updated

},

data: {

word: 'Hello static'

}

}

体验一下

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

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

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

相关文章

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

    首先来复习一个重要的知识点: 根节点:每个 Weex 页面最顶层的节点,我们称为根节点。下面是目前我们支持的三种根...

  • View自定义属性

    #View自定义属性 ##1.在style中声明 ``` true ``` ##2. class中获取对应的属性声...

  • vuejs—绑定class和style样式

    上篇文章 介绍了通过vuejs计算属性,这篇中我们将一起学习vue.js实现绑定class和style样式。 绑定...

  • Vue

    基础 语法 指令 计算属性 条件判断,循环 Class,Style 事件处理 组件 全局注册 局部注册 过滤器 全...

  • vue style样式的运用

    style样式和class不同的是属性已经加进data里面 不需要定义class的样式调试的时候就能够看出,给对应...

  • react_03jsx核心语法(三)

    绑定属性: 在state中定义的变量可以用来绑定在标签的普通属性、class名、style 在标签属性中也可以用使...

  • vue2.0常用知识点与实践总结

    vue实例 模板语法2.1 插值2.2 指令 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲...

  • 八:vue.js基础

    1.Helloword 2.模板语法 3.条件渲染 4.class与style绑定 5.计算属性和监视

  • vuejs 基础必备

    1、active-class 是哪个组件的属性?嵌套路由怎么定义 (1)、active-class 是 vue-r...

  • 知识梳理

    1、active-class 是哪个组件的属性?嵌套路由怎么定义 (1)、active-class 是 vue-r...

网友评论

      本文标题:Weex学习第四篇:计算属性,class定义style,if,r

      本文链接:https://www.haomeiwen.com/subject/umxlbttx.html