前端框架介绍
jquery 更简单的方式去操作 dom 对象;
extjs 更适合做后台管理系统;
eayui 模仿了extjs 免费;
mvc -> mvvm(model view ) vm(view model) 控制器
vue 国内开源的js框架
argularjs 国外js框架
提倡前后台分离
VUE
渐进式的js框架
使用
- 引入vue.js
<!-- 引入 vue.js -->
<script src="vue.js"></script>
- 创建Vue对象
var vue = new Vue({
el: 视图对应的标签
data: 模型数据
});
- 展示模型数据
两个标签之间的普通文字,要从模型中获取数据,语法使用 {{ 模型数据的名称 }}
标签的属性需要从模型中获取值: 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>
- v-for 用来遍历一个集合
v-for="(临时变量名,变量下标) in 集合名"
- v-if 用来进行条件判断,条件成立,才会渲染视图,否则不会生成html代码;决定是否生成
<div id="app">
<h3 v-if="hasError">用户名不正确</h3>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hasError:false /*没有错误*/
}
});
</script>
-
v-show 用来进行条件判断,条件成立,才会渲染视图,否则不会显示html代码;决定是否显示
-
事件处理
传统方式处理
<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(){
}
}
});
- 双向绑定 v-model
v-bind 模型数据发生改变,视图也会重新渲染,而反之不行;
v-model 不仅是数据改变视图,而且视图改变也会影响数据,尤其配合表单使用;
- 简化写法
v-bind:属性名
:属性名
;v-on:事件名
@事件名
;
- axios
添加包
<script src="axios.min.js"></script>
axios.request({
<!--请求的路径-->
url:"http://localhost:8080/hero/findByPage",
method:"get" <!--请求方式-->
<!--返回后执行的函数-->
}).then(function(response){
vue.list = response.data;
});