Vue 框架

前端框架介绍

jquery 更简单的方式去操作 dom 对象；
extjs 更适合做后台管理系统；
eayui 模仿了extjs 免费；

mvc -> mvvm（model view ） vm(view model) 控制器
vue 国内开源的js框架
argularjs 国外js框架
提倡前后台分离

VUE

渐进式的js框架

使用

1. 引入vue.js

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

2. 创建Vue对象

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

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

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

        <!--  给属性赋值需要用 v-bind 指令 -->
        <img v-bind:src="photo">
    </div>

    {{name}}


    <script>
    // el -> element
    var vue = new Vue({
        el: '#app', /*vue 对象对应的视图是id为app的标签*/
        data: { /*data 中包含的是模型数据*/
            name:'zhangsan',
            age: 18,
            photo: '2_1.bmp'
        }
    });
    </script>

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

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

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 用来进行条件判断，条件成立，才会渲染视图，否则不会显示html代码;决定是否显示

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

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

vue方式处理格式：v-on:事件名称

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

<!--在methods里可以写多个方法-->
var vue=new Vue({
	el:"#app",
	data:{},
	methods:{
		方法一：function(){
		},
		方法二：function(){
		},
		方法三：function(){
		}
	}
});

8. 双向绑定 v-model

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

9. 简化写法

• v-bind:属性名 :属性名；
• v-on:事件名 @事件名 ；

10. axios
    添加包

<script src="axios.min.js"></script>

axios.request({
			<!--请求的路径-->
           	url:"http://localhost:8080/hero/findByPage",
          	method:"get"  <!--请求方式-->
          <!--返回后执行的函数-->
           }).then(function(response){
               vue.list = response.data;
           });