Weex學習第四篇：計算屬性，class定義style，if，repeat

首先來複習一個重要的知識點：

根節點：每一個 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>

體驗一下

注意事項：data、methods、computed 中的字段是不能相互重複的，由於它們都會經過組件實例的 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/do...