文章目录
一、VUE
1.1使用jQuery 的复杂性问题
- 使用jQuery进行前后端分离开发,既可以实现前后端交互(ajax)又可以完成数据渲染;
- 存在的问题: jQuery需要通过HTML标签拼接,DOM节点 操作完成数据的显示,开发效率低容易出错,渲染效率低
- vue是继jQuery后的优秀前端框架,专注于前端数据的渲染——语法简单,渲染效率高
1.2VUE 简介
1.2.1 前端框架
- 前端三要素: HTML CSS JavaScript
- HTML 决定网页结构
- CSS 决定显示效率
- Javascript 决定网页功能(交互,数据显示)
- UI框架:
- Bootstrap
- amazeUI
- Layui
- JS框架
- jQuery
- React
- angular
- nodeis --后端开发
- vue 集各种前端框架的优势发展而来
1.2.2MVVM
项目结构经历的三个阶段:
后端MVC: 单体架构,流程控制使用控制器完成
前端MVC: 前后端分离开发,后端只负责接收响应请求
MVVM: 前端请求后端接口,后端返回数据,前端接收数据设置为"VM",HTML从vm中取值
-
M model 数据模型, 后端返回的数据
-
V view 视图
-
VM ViewModel 视图模型,数据模型和视图之间的桥梁,后端返回的model转换前端所需的VM 视图层可以直接从vm中提取数据
MVC MVVM [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2e7uHWXQ-1666322584411)(https://gitee.com/ajiemo/gic/raw/blogs/20221020115601.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tVNW9DgX-1666322584413)(https://gitee.com/ajiemo/gic/raw/blogs/2022102011564png)]
二、vue 的使用
2.1 vue的引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.2入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-1"/>
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="contaoner">
获取数据:{{str}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#contaoner",
data:{
str:"嗨嗨嗨"
}
});
</script>
</body>
</html>
三、vue 的语法
3.1 基本类型数据和字符
{{code}}
{{str}}
--------------
data:{
code:10,
str:"test"
}
3.2 对象类型数据
-
支持ognl语法
{{stu.stuName}}<br> {{stu.stuSex}} -------------- data:{ stu:{ stuName:"zhao", stuSex:"M", stuAge:20 } }
3.3条件v-if
<label v-if="stu.stuSex=='M'">男</label>
<label v-if="stu.stuSex=='F'">女</label>
--------------
data:{
stu:{
stuName:"zhao",
stuSex:"M",
stuAge:20
}
}
3.4 循环 v-for
<table border="1" cellspacing="0" width="400">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="stu,index in stus">
<td>{{index+1}}</td>
<td>{{stu.stuName}}</td>
<td>
<label v-if="stu.stuSex=='M'">男</label>
<label v-if="stu.stuSex=='F'">女</label>
</td>
<td>{{stu.stuAge}}</td>
</tr>
</table>
---------------------
data:{
stus: [
{
stuName: "zhao",
stuSex: "M",
stuAge: 20
},
{
stuName: "shi",
stuSex: "F",
stuAge: 21
},
{
stuName: "jie",
stuSex: "M",
stuAge: 22
}
]
}
3.5 v-bind 绑定标签页属性
-
v-bind: 可以简写为 :
<input type="text" v-bind:value="str"> <img height="30" :src="stu.stuImg"> ----------------- data:{ str:"haihia", stuImg:"img/01.jpg" }
3.6 表单标签的双向绑定 v-model
默认绑定在value 属性 v-model:value 可以简写为 v-model
<input type="text" v-model:value="str">
----------------------
data:{
str:"test"
}
四、 vue 实例
4.1Vue的生命周期
4.2钩子函数
<script type="text/javascript">
var vm = new Vue({
el: "#contaoner",
data: {
str:"你好"
},
beforeCreate:function(){
// data初始化之前执行,不能操作data
},
created:function(){
//data初始化之后执行 模板加载之前 可以获得/修改data中的值
this.str="hello";
},
beforeMount:function(){
// 模板加载之后,数据初始渲染之前 可以获得/修改data中的值
this.str="good";
},
mounted:function(){
// 数据初始渲染(挂载)之后 可以获得/修改data中的值 但是不对v-once中的数据有影响
this.str="nice"
},
beforeUpdate:function(){
//数据渲染之后,当data中的数据发生变化触发重新渲染,在渲染之前执行此函数
//data 数据被修改之后,重新渲染到页面之前
console.log("----"+this.str);
},
update:function(){
//data 数据被修改之后,重新渲染到页面之后
// 一般不进行修改
},
beforeDestroy:function(){
//实例销毁之前
},
destroyed:function(){
//实例销毁之后
}
});
</script>
五、计算属性和侦听器
5.1计算属性
data中的值可以通过声明获得,也可以通过computed通过计算获得、
特性;计算属性所依赖的属性值发生变化会影响计算属性的值同时发生变化
实例
<div id="container">
<input type="text" v-model="str1">
<input type="text" v-model="str2">
{{str3}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#container",
data:{
str1:"世杰",
str2:"你好"
},
computed:{
str3:function(){
return this.str2+this.str1;
}
}
});
</script>
5.2侦听器
侦听器,就是data中属性的监听,当data中的属性发生变化就会触发侦听器函数的执行
实例
<div id="container">
<input type="text" v-model="str1">
<input type="text" v-model="str2">
{{str3}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#container",
data:{
str1:"世杰",
str2:"你好"
str3:"你好世杰"
},
watch:{
str1:function(){
this.str3=this.str2+this.str1;
},
str2:function(){
this.str3=this.str2+this.str1;
}
}
});
</script>