目录 1.1. Vue是什么？？客户端mvc框架，，功能类似springmvc 1 1.2. Why？为什么使用它？？ 1 1.3. 包括哪些组件与内部构成与原理 1 2. Howto 怎么使用 2

目录

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日";

})