Atitit  專案介面h5化靜態html化計劃---vue.js 把ajax獲取到的資料 繫結到表格控制元件 v2 r33.docx

3. 其他 4

1. 場景：應用在專案列表查詢場景下

全面的的使用html h5介面分離前後端，使介面可以通用與pc端java php net 微信專案，以及 安卓 ios跨平臺以及hybrid app。。

也方便前端人員隨時介入調整java專案的介面，加快進度

儘可能的不再使用服務端介面技術（jsp struts wpf el等），一方面沒有完整的分離前後端，混雜，一方面服務端介面技術複雜度較大，不利於前端人員介入調整java專案介面

畢竟目前專案介面幾乎就佔據了50%的工作量，可以方便分散壓力

1.1. 預計初步掌握vue.js  幾小時即可

2. 繫結ajax列表資料到表格

2.1. List.html 使用v-for迴圈一下 

<table width="100%" border="0" id="table1">

  <tbody>

    <tr>

      <td>使用者id</td>

      <td> </td>

      <td>備註</td>

      <td>操作</td>

    </tr>

    <tr v-for="dataItem in list_data1">

      <td> </td>

      <td><span class="hide">{{dataItem.使用者名稱}}</span></td>

      <td><span class="hide">{{dataItem.備註}}</span></td>

      <td> </td>

</tr>

2.2. 預覽

2.3. 使用vue.js繫結

<script>

//建立vue與表格的繫結關係，同時設定初始值為空[]

//el就是表格id

//list_data1是自定義的資料列表

var   VueObj1 =  new Vue({

          el: '#table1',

         data: {

            list_data1: []

          }

   });

   //獲取資料，一般是從ajax從後端獲取資料

   var  list_data2=[{使用者名稱:"王一",備註:"管理員"},{使用者名稱:"王二",備註:"普通使用者"}];

   //將資料繫結到table控制元件

    VueObj1.$data.list_data1=list_data2;

2.4. 效果

2.5. 時間日期等其他欄位格式化 使用vue.js的 filter過濾器

1. v-bind 繫結元素屬性方法

2. v-text 輸出文字方法

  <td>{{itemdata.timex | timeFlt}}</td>

Vue.filter('timeFlt', function (value) {

        return fmtDate_local(value);

})

3. 其他

3.1.  9.Vuejs在變化檢測問題

3.1.1.1. 1.檢測陣列

由於JavaScript的限制，vuejs不能檢測到下面陣列的變化：

1. 

直接索引設定元素，如vm.item[0]={};

2. 

3. 

修改資料的長度，如vm.item.length。

4. 

為了解決問題1，Vuejs擴充套件了觀察陣列，為它新增一個$set()方法：

// 與 `example1.items[0] = ...` 相同，但是能觸發檢視更新

example1.items.$set(0, { childMsg: 'Changed!'})

問題2，需要一個空陣列替換items。

除了$set()，vuejs也為觀察陣列添加了$remove()方法，用於從目標陣列中查詢並刪除元素，在內部呼叫了splice()。因此，不必：

var index = this.items.indexOf(item)if (index !== -1) {

this.items.splice(index, 1)

}

只需：

this.items.$remove(item);

3.2. 參考資料

VUEJS 實戰教程第二章,修復錯誤並且美化時間 - FungLeo的部落格 - 部落格頻道 - CSDN.NET.html

vue.js - 為什麼vue的data資料變了html中用{{}}繫結的資料不會變呢？ - SegmentFault.html

Vue 列表渲染 - jiangxiaobo - 部落格園.html

Vue.js學習筆記：屬性繫結 v-bind.html

作者:: 綽號:老哇的爪子claw of Eagle 偶像破壞者Iconoclast image-smasher

捕鳥王"Bird Catcher  kok  虔誠者Pious 宗教信仰捍衛者 Defender Of the Faith. 卡拉卡拉紅斗篷 Caracalla red cloak 萬獸之王

簡稱：： Emir Attilax Akbar 埃米爾 阿提拉克斯 阿克巴

全名：：Emir Attilax Akbar bin Mahmud bin  attila bin Solomon bin adam Al Rapanui 埃米爾 阿提拉克斯 阿克巴 本 馬哈茂德 本 阿提拉 本 所羅門 本亞當  阿爾 拉帕努伊

常用名：艾提拉（艾龍），  EMAIL:[email protected]

頭銜：uke總部o2o負責人，全球網格化專案創始人，

uke交友協會會長  uke捕獵協會會長 Emir Uke部落首席大酋長，

uke宗教與文化融合事務部部長， uke宗教改革委員會副主席

uke制度與重大會議委員會委員長，uke保安部首席大隊長,uke制度檢查委員會副會長，

uke 首席cto   軟體部門總監 技術部副總監  研發部門總監主管  產品部副經理 專案部副經理   uke科技研究院院長 uke軟體培訓大師

uke波利尼西亞區大區連鎖負責人 湯加王國區域負責人 uke克爾格倫群島區連鎖負責人，萊恩群島區連鎖負責人，uke布維島和南喬治亞和南桑威奇群島大區連鎖負責人

 Uke軟體標準化協會理事長理事長 Uke 資料庫與儲存標準化協會副會長

uke終身教育學校副校長   Uke醫院 與醫學院方面的創始人

 uec學院校長， uecip影象處理機器視覺專業系主任   uke文件檢索專業系主任

Uke影象處理與機器視覺學院首席院長

Uke 戶外運動協會理事長  度假村首席大村長   uke出版社編輯總編

轉載請註明來源：attilax的專欄  ?http://blog.csdn.net/attilax

--Atiend  v8