目錄

1.1. Vue是什麼？？客戶端mvc框架，，功能類似springmvc 1

1.2. Why？為什麼使用它？？ 1

1.3. 包括哪些元件與內部構成與原理 1

2. Howto 怎麼使用 2

2.1. 引入vue。Js 2

2.2. 建立模板 2

2.3. 建立測試資料 2

2.4. 繫結模板與資料，開始渲染 2

2.5. 測試 3

2.6. 使用ajax獲取資料來渲染 3

2.7. 格式化 ，使用vue過濾器機制實現 3

1. 1. Vue是什麼？？客戶端mvc框架，，功能類似springmvc
   2. Why？為什麼使用它？？

熱部署，js是指令碼，無需編譯

簡單，js比java簡單，html比jstl簡單

跨平臺跨，手機打包在apk裡面可以用。。Jsp jstl spirngmvc無法在手機app中使用

1. 1. 包括哪些元件與內部構成與原理

模板資料繫結（常用）：  類似jstl繫結與freemarker、Thymeleaf  Velocity等模板

指令（比較常用）：html是個標記語言，只有順序，缺乏if eles foreach 流程控制，vue指令就是為了補充html這個語言的流程控制，條件選擇，迴圈等。。

路由  和spirngmvc類似，類似requestemapping對映配置

元件，動畫，ajax api等

1. Howto 怎麼使用
   1. 引入vue。Js

<script src="js/vue.js"></script>

1. 1. 建立模板

vue資料繫結最常見的形式是使用"Mustache"（小鬍子語法）{{}}

還有一種el  es6模板語法 ${}   ，mybatis模板  #{}  ${}

因為是列表需要迴圈繫結指令    <tr v-for="dataItem in list_data1">

1. 1. 建立測試資料

var testdataList=[{loginname:"user1",time:"2017"},{loginname:"user2","age":"19"}];

1. 1. 繫結模板與資料，開始渲染

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

//el就是表格id

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

var   VueObj1 =  new Vue({

          el: '#table1',

         data: {

  //測試

            list_data1:  testdataList

          }

   });

1. 1. 測試

1. 1. 使用ajax獲取資料來渲染

//ajax  更改

  VueObj1.$data.list_data1=[{loginname:"uuuu",time:"2017"},{loginname:"xxxx","age":"19",time:1477808630000}]

1. 1. 格式化 ，使用vue過濾器機制實現

{{dataItem.time|formatTime}}     管道符後面跟一個vue過濾器函式名

Vue過濾器的註冊

//格式化功能  ，通過vue的過濾器功能實現

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

   //把時間戳格式化轉變為字串

  return "2018年8月10日";

})