Vu

1.前端框架介绍

老牌
jquery -> 更简单的方式去操作 dom 对象（标签对象）
extjs -> 更适合做后台管理系统
easyui -> 模仿了 extjs 免费

mvc -> mvvm m模型 v视图 vm(view model) 控制器
vue 国内开源的js框架
argularjs 国外js框架
提倡前后台分离，

传统的后台开发人员：
controller -> jsp， service， dao -> 页面展示部分，需要用jsp等技术负责数据展示

前后台分离之后，后台开发人员
service, dao -> 负责准备模型数据即可

前台开发人员，负责页面之间的跳转、从后台获取模型数据，展示数据

2.VUE

渐进式的js框架

• 传统 <script src="js路径"> 成本低
• js 分模块，编译，集成less，打包，发布，npm， 成本太高

webstorm(html,css,js) 和 idea (java)

3. 使用

1. 引入vue.js

<!-- 引入 vue.js -->
<script src="vue.js"></script>

2. 创建Vue对象

var vue = new Vue({
    el: 视图对应的标签
    data: 模型数据
});

3. 展示模型数据
   两标签之间的普通文字，要从模型中获取数据，语法使用 {{模型数据的名称}}
   标签的属性需要从模型中获取值：v-bind:属性名 (v-bind 绑定指令)

<!-- 视图 -->
<div id="app">
    <!-- 给文本赋值 用  {{模型变量名}}-->
    <h1>姓名：{{name}}, 年龄: {{age}}, 图片 {{photo}}</h1>

    <!--  给属性赋值需要用 v-bind 指令 -->
    <img v-bind:src="photo">
</div>
<script>
// el -> element
var vue = new Vue({
    el: '#app', /*vue 对象对应的视图是id为app的标签*/
    data: { /*data 中包含的是模型数据*/
        name:'zhangsan',
        age: 18,
        photo: '2_1.bmp'
    }
});
</script>

当模型数据发现变化，那么视图也会跟着变动(被重新渲染(render) )

4. v-for 用来遍历一个集合

v-for="(临时变量名,下标变量) in 集合名"

其中下标变量从0开始

5. v-if
   用来进行条件判断，当条件成立，才会渲染视图，如果条件不成立，不会生成html代码

<div id="app">
    <h3 v-if="hasError">用户名不正确</h3>
</div>

<script>
var vue = new Vue({
    el:"#app",
    data:{
        hasError:false /*没有错误*/
    }
});
</script>

6. v-show
   用来进行条件判断，当条件成立，把此标签显示出来，如果条件不成立，会把此标签隐藏起来

7. 事件处理
   传统方式处理事件

<input type="button" onclick="函数()">

vue 来处理事件 格式：v-on:事件名称， 事件名称前不需要再加on了

<input type="button" v-on:click="方法名">
<input type="button" v-on:mouseout="方法名">

var vue = new Vue({
    el:
    data:
    methods:{
        方法1：function(){},
        方法2：funciton(){},
        ...
    }
});

8. 双向绑定 v-model

• v-bind 模型数据发生了改变，视图也会重新渲染，模型会影响视图，而反之不行
• v-model, 不仅是数据改变影响视图，而且视图改变也会影响数据，尤其配合表单使用

9. 简化写法

• v-bind:属性名 可以被简化为 :属性名
• v-on:事件名 可以被简化为 @事件名

// 使用最底层的 api 与服务器交互

    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var array = JSON.parse(xhr.responseText);
        vue.list = array;
    }

    xhr.open("get", "http://localhost:8080/hero/findByPage", true);
    xhr.send();

    // 响应返回时会触发 then 中的函数调用，函数的参数是服务器返回的json结果
    axios.request({
        url:"http://localhost:8080/hero/findByPage",
        method:"get"
    }).then(function(response){
        vue.list = response.data;
    });