Vue实战
1、Vue引言
渐进式 JavaScript框架
渐进式：
- 易用：html css JavaScript
- 高效：开发前端页面高效
- 灵活 开发灵活 多样性
总结：
Vue是一个JavaScript框架
后端服务开发人员：Vue 渐进式JavaScript框架 ：让我们通过操作很少的DOM，甚至不需要操作页面中任何DOM元素，就很容易的完成数据和视图绑定—》双向绑定 MVVM
注意：日后在使用Vue过程中页面不需在引入Jquery框架（Vue本身就不希望我们去操作页面任何DOM元素
Jquery需要频繁的操作页面的Dao元素，已经被淘汰了
发展阶段：
htmlcss-----> JavaScript -----> jquery -------> angularjs -------> Vue(可以说Vue的出现产生了翻天覆地的变化，企业80%都在使用)
2、Vue入门
2.1、下载Vue.js
//开发版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2、Vue第一个入门应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
小爽帅到拖网速！
<div id="app">
{
{msg}}
<span> {
{username}}</span>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
msg:"小爽帅到拖网速2",
username:"郑爽"
},
});
</script>
# 总结：
1、vue实例（对象）中的el属性： 代表Vue的作用范围，日后在Vue的作用访问内都可以使用Vue的语法
2、vue实例（对象）中的data属性： 用来给Vue实例绑定一些相关的数据，绑定的数据可以通过{
{变量名}}在vue的作用范围内去取出来
3、在使用{
{}}进行获取data中数据时，可以在{
{}}中书写表达式，运算符，以及逻辑运算等
4、el属性中可以书写任意CSS选择器[jquer选择器]，但是在使用Vue开发是推荐使用 id选择器
3、v-text和v-html
3.1、v-text
v-text: 用来获取data中数据将数据以文本的形式渲染到指定标签内部，类似于JavaScript 中的innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-text="msg"></h1>
<span>{
{msg}}</span>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
msg:"小爽帅到拖网速",
},
});
</script>
# 注意
1、{
{}}插值表达式和v-text获取数据的区别
a、使用v-text取值会将标签中原有的数据覆盖，使用{
{}}插值表达式的形式不会覆盖标签中原有的数据
b、使用v-text可以避免在网络环境较差的时候出现插值闪烁，没有就是没有，而{
{}}，会直接显示{
{}msg}
3.2、v-html
v-html : 用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于JavaScript中的innerhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<br>
<span>{
{a}}</span>
<br>
<span v-html="a"></span>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
a:"<a href='http://baidu.com'>百度欢迎你！</a>"
},
});
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DO3xGwx-1608881390113)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201126181515238.png)]
4、vue中的事件绑定（v-on）
4.1、绑定事件语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1、页面中提供按钮
2、按钮绑定单机事件
3、在单击事件中修改年龄的值，通过渲染页面
-->
<div id="app">
<h2>姓名：{
{msg}}</h2>
<input type="button" value = "点我改变年龄" v-on:click="changeage">
<h2>年龄：</h2>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
msg:"小爽帅到拖网速",
age:23
},
methods:{
//用来定义vue中的事件
changeage:function(){
alert("你好");
this.msg;
}
}
});
</script>
# 总结
事件三要素
事件源 ：发生事件dom元素(html标签)
事件：发生特定的动作 click，双击....
监听器 ：发生特定动作之后的事件处理程序(使用函数完成) 通常指js中的函数
1、在vue中绑定的事件是通过v-on指令来完成的，v-on：事件名 如 v-on：click
2、在v-on：事件名的赋值语句中是当前时间触发调用的函数名
3、在vue中事件的函数统一定义在Vue实例的methods属性中
4、在vue定义的事件中this指就是当前的Vue实例，日后可以在事件中通过使用this获取Vue实例变量的值
4.2、Vue事件的简化写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1、页面中提供按钮
2、按钮绑定单机事件
3、在单击事件中修改年龄的值，通过渲染页面
-->
<div id="app">
<h2>姓名：{
{msg}}</h2>
<input type="button" value = "通过v-on事件修改年龄每次+1" v-on:click="add">
<input type="button" value = "通过@绑定时间修改年龄每次-1" @click="mul">
<h2>年龄：{
{age}}</h2>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
msg:"小爽帅到拖网速",
age:23
},
methods:{
//用来定义vue中的事件
add:function(){
//在函数中获取vue实例中的数据
// console.log(this);
this.age ++;
},
mul:function () {
this.age--;
}
}
});
</script>
# 总结
1、日后在vue中绑定事件时可以通过@符号形式 简化 v-on的事件绑定
4.3、vue事件函数的两种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1、页面中提供按钮
2、按钮绑定单机事件
3、在单击事件中修改年龄的值，通过渲染页面
-->
<div id="app">
<h2>姓名：{
{msg}}</h2>
<input type="button" value = "通过v-on事件修改年龄每次+1" v-on:click="add">
<input type="button" value = "通过@绑定时间修改年龄每次-1" @click="mul">
<h2>年龄：{
{age}}</h2>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
msg:"小爽帅到拖网速",
age:23
},
methods:{
//用来定义vue中的事件
/*add:function(){
//在函数中获取vue实例中的数据
// console.log(this);
this.age ++;
},
mul:function () {
this.age--;
}*/
add() {
this.age++;
},
mul(){
this.age--;
}
}
});
</script>
# 总结
1、在vue中事件定义存在两种写法 一是 函数名：function（）{} 二是 函数名（）{} 推荐
4.4、事件参数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1、页面中提供按钮
2、按钮绑定单机事件
3、在单击事件中修改年龄的值，通过渲染页面
-->
<div id="app">
<h2>姓名：{
{msg}}</h2>
<input type="button" value = "改变age指定的值" @click="changeage(100,'小爽帅到脱网速2')">
<h2>年龄：{
{age}}</h2>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
msg:"小爽帅到拖网速",
age:23
},
methods:{
changeage(age,msg) {
this.age = age;
this.msg = msg;
}
}
});
</script>
# 总结
在使用事件时，可以直接在事件调用时给事件进行参数传递，在事件定义出通过定义对应变量接收传递的参数
4.5案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1、页面中提供按钮
2、按钮绑定单机事件
3、在单击事件中修改年龄的值，通过渲染页面
-->
<div id="app">
<input type="button" value = "+" @click="add">
<h1>{
{msg}}--------------> {
{age}}</h1>
<input type="button" value = "-" @click="mul">
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
msg:"小爽帅到拖网速",
age:1
},
methods:{
add(){
if (this.age<10){
this.age++;
}else {
alert("规定不能超过10！")
}
},
mul(){
if (this.age<0){
alert("age小于0，不能再减了！")
}else{
this.age--;
}
}
}
});
</script>
5、v-show & v-if & v-bind
5.1、v-show
用来控制页面元素是否展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1、页面中提供按钮
2、按钮绑定单机事件
3、在单击事件中修改年龄的值，通过渲染页面
-->
<div id="app">
<!--
v-show：用来控制标签展示还是隐藏
-->
<h1 v-show="false">{
{msg}}</h1>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--页面加载的顺序是从上到下，所以Vue的代码必须放在DOM渲染之后-->
<script>
const app = new Vue({
el:"#app",//用来给Vue实例定义一个作用范围
data:{
//用来给Vue实例定义一些相关的数据
msg:"小爽帅到拖网速",
age:1,
},
methods:{
}
});
</script>
# 总结
1、在使用v-show时可以直接书写boolean值控制元素展示，也可也通过变量控制标签展示和隐藏
2、在v-show中可以通过boolean表达式控制标签的展示隐藏
5.2 、v-if
v-if：用来控制页面元素是否展示 底层是控制Dom元素
5.3、v-bind
v-bind：用来给标签绑定相应属性
5.4、v-bing简化写法
vue 为了方便我们日后绑定标签属性提供了对属性绑定的简化写法 如：v-bind：属性名，简化之后 ：属性名
总结：
1、v-show 作用 : 用来控制页面中的标签是否展示 底层通过控制元素的display属性来进行标签的显示和不显示控制
2、v-if 作用 : 用来控制页面中的标签是否展示 底层通过对dom树节点进行添加和删除来控制展示和隐藏
3、v-bind 作用 : 用来给页面中标签元素绑定相应的属性给Vue,实现Dom树元素节点属性的动态变化