Weex學習第三篇：模版，樣式，腳本

這兩天把官方的教程都看了一遍，整體感受是信息量很大，可是大部分和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/do...