一.VUE
vue概述(vue.js)
vue是前端JavaScript框架,对JavaScript进行封装,是一套用于构建用户界面的渐进式框架.vue的核心只关注图示层,不仅易上手,还便于与第三方库或既有的项目整合.
vue.js和Angular.js,React.js一起,并称为前端三大主流框架
注意: 在此初步学习的是vue2并不是vue3,vue3属于入门级
vue.js特点
- 体积小(封装的文件小) 压缩后33k
- 更高的运行效率,不直接频繁的对网页上的标签进行操作,基于dom技术进行优化
- 实现数据双向绑定,程序员只关心要操作的数据即可,把数据渲染到标签上交给vue框架处理
- 生态丰富,学习成本低
vue.js如何实现数据绑定
通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,把更多的精力投入到业务逻辑上.
MVVM是Model-View-ViewModel的缩写.MVVM就是将其中的View的状态和行为抽象化,让我们将视图UI和业务逻辑分开.
二.VUE搭建
方式1:直接用<script>引入
进入vue.js官网https://v2.cn.vuejs.org/
找到安装
将下载得到的文件复制或移入项目中的js目录
在需要使用vue框架的项目中导入js文件<script src="js/vue.js"></script>
三.第一个VUE程序
vue.js的核心是一个允许采用简洁模板语法来声明式地将数据渲染进DOM的系统
- 导入开发版本的vue.js
- 创建vue实例对象,设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js库 -->
<script src="js/vue@2.js"></script>
<!-- 导入一个文件后,下方不能再写一个js文件 -->
</head>
<body>
<!-- {{变量}}必须写在命中标签的内部-->
<div id="app">
<div>
{{message}},
</div>
<p>
{{a}}
</p>
</div>
<!-- 以后的Script标签写在标签的后面,先加载网页的内容,再加载js -->
<script type="text/javascript">
/*创建vue对象,把页面指定id的标签与vue对象进行绑定
el是vue对象中的属性,可以选择#id,或.类,建议使用id选择器
el命中标签不能是body
data属性中定义使用的数据 键:值 键值对之间需要使用","隔开最后一个键值对后不添加","正常数据都要定义在data中
{{变量名}} 插值表达式,获取到data中定义的数据
*/
let app = new Vue({
el:"#app",
data:{
a:"abc",
message:"hello vue"
}
});
</script>
</body>
</html>
示例代码解析:
{{变量}},插值表达式用于获取data数据
new Vue();创建Vue对象(VM对象)
el:数据挂载的dom对象
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用ID选择器
可以使用其他的闭合标签,不能使用HTML和BODY
data:{message:'hello world'} model数据
Vue中用到的数据定义在data中
data中可以写复杂类型的数据,如对象,数组
四.VUE指令
VUE指令是指带有v-开头,以代表它们是VUE提供的特殊属性.
插值表达式{{message}}
{{message}} 插值表达式不会覆盖标签体中的内容,只是在标签内部插入一个值,在标签中有值得情况也可以添加插值表达式,不会影响原本数据的显示
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<!-- {{变量}}必须写在命中标签的内部-->
<div id="app">
<div>
{{message}}不影响比标签中的其他内容
</div>
<p>
{{a}}
</p>
</div>
<script type="text/javascript">
/*
{{变量名}} 插值表达式,获取到data中定义的数据
*/
let app = new Vue({
el:"#app",
data:{
a:"abc",
message:"hello vue"
}
});
</script>
</body>
</html>效果演示:
v-text指令
该指令的作用是设置标签的文本内容,此写法会替换标签中的全部内容
内部支持写插值表达式
<p v-text="message">被替换的内容</p>
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<div v-text="Message1">这是一段被替代的话</div>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
Message1:"v-text指令会替代标签中的内容"
}
});
</script>
</body>
</html>使用v-text前效果:
使用后的效果:
v-html指令
该指令的作用是设置元素的innerHTML,变量中的内容中存在html结构会被解析为标签
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<div v-html="Message2">这是一段被替代的话</div>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
Message2:"<b>这是一段被加粗的文字</b>"
}
});
</script>
</body>
</html>效果演示:
插值表达式,v-html,v-text的区别
{{message}} 插值表达式 不会覆盖标签体中的内容,只是在标签内部插入一个值
v-html与v-text 会用数据覆盖标签体中的内容
v-html与v-text的区别:
v-html:能解析字符串中的标签
v-text:不能解析字符串中的标签
v-on指令
该指令的作用是为元素绑定事件,事件名不需要写on指令可以简写为@
绑定方法定义在methods属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="text(1,2)"/>向方法中传入参数的用法
<input type="button" value="按钮" @click="text"/>简写且不传入参数的写法
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js库 -->
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<!--
添加事件的两种方式
v-on:click 点击事件
@click
-->
<input type="button" value="按钮1" v-on:click="test1()"/>
<input type="button" value="按钮2" @click="test2(1)"/>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
message:"hello vue",
},
methods:{
test1(){//this表示vue对象
alert(this.message);
},
test2(a){//传参
alert(a);
}
}
});
</script>
</body>
</html>
注意: 在methods属性中添加函数时不需要使用function关键字,且在函数中使用在data中定义好的变量或methods属性中定义的其他方法时,需要使用this关键字
v-model指令
该指令的作用是便捷的设置和获取表单元素的值,绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js库 -->
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<p><!--还可以使用v-text-->
{{name}}
</p>
<!-- v-model可以将输入标签中的值(value) 绑定到指定的属性上 (这里通过vue框架将文本输入框的值,变量name,p标签中的内容插值表达式绑定)-->
<input type="text" value="" v-model="name"/>
<input type="button" value="测试" @click="test3"/>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
name:""
},
methods:{
test3(){//改变name变量的值
this.name = "jim";
}
}
});
</script>
</body>
</html>
在此案例中通过v-model指令将输入框的value属性,变量name的值,p标签的值相互绑定,只要name变量的值发生改变其他两个标签的值也会发生改变
v-show指令
该指令的作用是根据布尔值显示或隐藏当前标签,原理是修改元素的display,实现显示隐藏,指令后面的内容,最终都会解析为布尔值,值为true元素显示,值为false元素隐藏,数据改变后,对应元素的显示状态会同步更新
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<!--
v-show="布尔值" 根据布尔值显示或隐藏当前标签
通过display的值控制标签显示或隐藏,每次不需要重新创建标签,效率高
-->
<div v-show="isshow">123</div>
<div v-show="a>5">456</div>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
isshow:false,
a:10
}
});
</script>
</body>
</html>在此案例中,v-show="false"时,标签会显示,通过改变标签的dispaly属性来实现标签的隐藏,由于a变量的值为10,a>5最终也会被解析为布尔值true.
v-if与v-else指令
v-if指令的作用是根据表达式的真假切换元素的显示状态,本质是通过操纵dom元素来切换,显示状态表达式的值为true,元素存在于dom中,为false,从dom中移除.频繁的切换使用v-show,反之使用v-if,前者的切换消耗更小
v-if和v-else标签必须挨着满足则显示if标签内容,否则显示else内容
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<!--
v-if="布尔值" 根据布尔值显示或隐藏当前标签
每次从网页中要删除/创建标签,数量多了效率低
v-if 和 v-else标签必须挨着满足则显示if标签内容,否则显示else内容
-->
<div v-if="isshow">789</div>
<div v-if="a>5">101</div>
<div v-else>aaa</div>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
isshow:true,
a:4
}
});
</script>
</body>
</html>注意: v-else需要紧挨着v-if使用,当v-if="false"时显示v-else指令的标签
v-show与v-if的区别
v-show标签是通过display属性来实现显示或隐藏标签
而v-if标签每次都要从网页中删除/创建标签,数量多了效率太低.
在频繁的切换标签隐藏或显示,v-show标签相比于v-if标签效率更高.
但v-if标签可以搭配v-else标签使用,实现通过逻辑控制标签的隐藏与消失.
v-bind指令
该指令的作用是为元素绑定属性,完整写法是 v-bind:属性名
简写的话可以直接省略v-bind,只保留: 属性名
示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<!-- <img src="imgsrc"/> 错误写法,不能将data中的属性填充到普通标签属性中-->
<!-- <img v-bind:src="imgsrc"/> 通过v-bind对标签的属性进行操作-->
<!-- 简单写法 -->
<img :src="imgsrc" :title="title"/>
<input type="button" value="下一张" @click="next"/>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
imgsrc:"img/图片1.png",
title:"第一张图片"
},
methods:{
next(){
this.imgsrc = "img/图片2.png";
this.title = "第二张图片";
}
}
});
</script>
</body>
</html>在此案例中,通过v-bind指令对图片的src以及title属性进行操作,并通过v-on指令为按钮添加了点击事件实现了图片的属性切换.这里使用的v-bind指令采用的简单写法, 直接省略v-bind,只保留: 属性名
我们还可以传给v-bind:class一个对象,以动态地切换class:
示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.active{
color: red;
}
</style>
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<!-- 通过isActive控制是否为标签添加指定的类名 active是类名-->
<div v-bind:class="{active:isActive}">状态</div>
<!--为按钮添加点击事件,实现点击按钮改变标签样式的功能-->
<input type="button" @click="next"/>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
isActive:false//控制是否添加样式表
},
methods:{
next(){//使用this关键字调用data中定义的变量
this.isActive="true";
}
}
});
</script>
</body>
</html>在此案例中,需要注意v-bind:class="{active:isActive}" 其中active是标签的类名,isActive是data键值对中定义的变量名,通过改变变量的布尔值,实现此标签样式的存在或消失
v-for指令
该指令的作用是根据数据生成列表结构,数组经常和v-for结合,其语法是 (item,index) in 数据
item和index可以结合其他指令一起使用,数组长度的更新会同步到页面上是响应式的
为循环绑定一个Key值 :Key="值" 尽可能唯一
示例1:通过v-for指令循环遍历数据到列表项中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<!-- 5点18 -->
<div id="app">
<!-- 使用v-for指令循环遍历数据到列表项中,在列表项内容中添加插值表达式,p指的是数组中的一个字符串数据-->
<ul>
<!--不添加数组索引的写法-->
<!-- <li v-for="p in provinces">{{p}}</li> -->
<!--添加数组索引的写法,在循环时为它添加序号-->
<li v-for="(p,index) in provinces">{{index+1}}{{p}}</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
//模拟从服务器后端响应回来的数据,在前端把后端响应的数据动态的响应在网页上
provinces:['北京','天津','上海']//字符串类型数组
}
});
</script>
</body>
</html>在此案例中,通过v-for指令将字符串类型数组provinces的数据循环遍历在列表项中,并添加了数组的索引值,由于数组的索引值是从零开始的,我们在插值表达式中为索引值加1,实现添加的数字序号从1开始.
v-for="(p,index) in provinces" 其中p为字符串数组中的一个字符串数据,这里的用法与增强for循环遍历数据类似
示例2:表格使用v-for遍历数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr v-for="(student,index) in students">
<td>{{index}}</td>
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
//对象类型数组
students:[{id:101,name:'jim',gender:'男'},{id:102,name:'tom',gender:'男'},{id:103,name:'jery',gender:'女'}]
}
});
</script>
</body>
</html>在此案例中,data中定义的数据类型是students对象类型的数组,每一个大括号代表一个对象,其中的id,name,gender等是该对象的属性.
注意: v-for指令应当写在行标签中,将插值表达式写在列标签中,在插值表达式中通过student.id来获取students对象类型数组中一个对象student的属性id值.
五.VUE 实例生命周期
每个Vue 实例在被创建时都要经过一系列的初始化过程-例如,需要设置数据监听,编译模板,将实例挂载到DOM 并在数据变化实更新DOM 等.同时,在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己代码的机会.
下面图示表示不同的生命周期钩子函数的所处位置:
用户通过这八个生命周期函数,实现在不同的阶段添加代码,实现代码功能
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue@2.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
/*
vue对象生命周期
*/
let app = new Vue({
el:"#app",//vue对象绑定标签
data:{
},
methods:{//自定义函数
},//vue对象生命周期钩子函数
beforeCreate(){//vue对象创建之前执行
console.log("beforeCreate")
},
created(){//在vue对象创建后执行
console.log("created")
},
beforeMount(){//这个是vue对象与标签绑定前执行,这里的绑定指el绑定
console.log("beforeMount")
},
mounted(){//这个是vue对象与标签绑定后执行,这是我们后面需要的,在网页打开后,自动执行某些操作
//如自定义的向后端发送请求加载数据
console.log("mounted")
}
});
</script>
</body>
</html>
在此案例中使用了四个生命周期钩子函数,在不同的阶段执行了代码中的功能,代码中注释了这四个函数在不同的阶段执行.