VUE2教程
1.Vue介绍
渐进式 JavaScript 框架 来源 vue官网
渐进式
1. 易用 html css javascript
2. 高效 开发前端页面 非常搞笑
3. 灵活 开发灵活 多样性
总结
Vue属于是javascript框架 简化js页面的操作
bootstrap 是一个css框架 封装css
vue出现
打破了市面上 前后端分离的现状 大家一直用的都是jquery框架, 可以让程序员 很轻松的就完成数据和视图绑定 双向绑定《==》 MVVM
Vue作者
尤雨溪
前端发展史
html + js ===》 html+css+jquery ===> vue(前后端分离) 前端系统 发送json格式的请求 发送到后端 后端处理数据
14出的 vue2大成的 18.19火的
现在出到vue3了,但是市面上用vue2的还是非常多 因为稳定
2.Vue入门
2.1下载vue.js
//开发版本
<!--开发环境版本 包含完整的警告和调试模式-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
//生产版本
<!--生产环境版本 包含完整的警告和调试模式-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7"></script>2.2Vue的第一个入门应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue入门</title>
<!-- 引入vue.js -->
<script src="../lib/vue.js"></script>
</head>
<body >
<h2>{{msg}}</h2>
<div id="app" >
<h2>{{msg}}</h2>
<h3>{{msg}}</h3>
<div>
{{msg}}
</div>
<div>
<span>
<a href="">{{msg}}</a>
</span>
</div>
<div>{{count}}</div>
<div>{{count+1}}</div>
<h3>{{content}}</h3>
<h3>{{content.toUpperCase()}}</h3>
<h3>{{content.length}}</h3>
<h3>{{content == "wulaoda quanshijie zuiniubi1"}}</h3>
</div>
<h2>{{msg}}</h2>
</body>
</html>
<!-- 书写vue代码 -->
<script>
new Vue({
el:"#app",//el :element 元素 代表vue实例的作用范围
data:{
msg:"仵老大1",
count:0,
content:"wulaoda quanshijie zuiniubi"
} //data 代表 数据 自定义各种数据
});//创建一个vue实例
// {{}}插值表达式
</script>
总结
1.一个页面只能存在一个Vue实例 ,不能创建多个Vue实例
2.Vue实例中el属性 代表Vue实例的作用范围,如果想在vue实例的范围内进行使用 可以使用 {{data属性中的变量名}} 直接进行调用
3.如果使用{{}}进行data的数据获取的时候,可以在{{}}取值语法中 进行 各种运算 逻辑运算 相关的方法进行调用
2.3 处理Date属性定义对象、数组相关的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1>{{count}}</h1>
<h1>{{user.id}} ====== {{user.name}} ====== {{user.age +1}}</h1>
<h1>{{diqu[0] == '北京' }} ===== {{diqu[1]}} ===== {{diqu[2].length}} </h1>
<h1>{{userlist[0].id}} == {{userlist[0].name}} == {{userlist[1].name}} == </h1>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"hello Vue",
count:0,
user:{id:001,name:"仵航",age:22},
diqu:["北京","上海","深圳"],
userlist:[
{id:001,name:"仵航",age:22},
{id:002,name:"王博",age:22},
{id:003,name:"张萌萌",age:22},
]
}
})
</script>3.v-text 和 v-html
总结
1.{{}} 插值表达式 和 v-text的区别
a.使用v-text取值会将标签中原有的数据进行覆盖,使用插值表达式不会覆盖掉原有的数据
{{msg}} ==> 仵老大全世界最牛逼
3.1 v-text
v-text :用来获取data中的数据 将数据以文本的形式渲染到 标签 类似于js的innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{msg}} 全世界最牛逼</span><br>
<span v-text="msg"> </span><br>
<span v-html="msg"></span><br>
<!-- <a href="#">点击跳转</a> -->
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"点击跳转"
}
})
</script>3.2 v-html
v-html 用来获取data中数据里含有html标签的 先解析在渲染到指定标签的内部 类似于js的 innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{msg}} 全世界最牛逼</span><br>
<span v-text="msg"> </span><br>
<span v-html="msg"></span><br>
<!-- <a href="#">点击跳转</a> -->
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"<a href='#'>点击跳转</a>"
}
})
</script>4.vue中事件绑定(v-on)
总结
事件 事件源发生事件的dom 事件发生的特定动作 click监听 js函数 方法
1.在vue中使用 v-on来进行绑定事件 v-on:事件名
2.在vue中 v-on:事件名 赋值的这个语句 就是调用的函数名
3.在vue中 定义的所有函数 统一放在methods 属性中
4.在vue定义的this指的是当前的vue实例 往后的时间,大家如果想获取vue实例中的属性或者方法,都可以 进行this调用
4.1 v-on简单入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
事件 事件源发生事件的dom 事件发生的特定动作 click监听 js函数 方法
1.在vue中使用 v-on来进行绑定事件 v-on:事件名
2.在vue中 v-on:事件名 赋值的这个语句 就是调用的函数名
3.在vue中 定义的所有函数 统一放在methods 属性中
-->
<input type="button" value="点我触发" v-on:click="chufa">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"wuhang",
},
methods:{ //方法必须定义在这个里面
chufa:function(){
alert("点击了")
}
}
})
</script>4.2 v-on 事件调用 this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>年龄 {{age}} 岁</h2>
<input type="button" value="点我增加年龄" v-on:click="chufa">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"wuhang",
age:22
},
methods:{ //方法必须定义在这个里面
chufa:function(){
// this
console.log(this)
this.age++
this.tixing();
},
tixing:function(){
console.log("提醒你操作成功")
}
}
})
</script>4.3Vue中事件的简化语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>年龄 {{age}} 岁</h2>
<input type="button" value="点我增加年龄" @click="chufa">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"wuhang",
age:22
},
methods:{ //方法必须定义在这个里面
chufa:function(){
// this
console.log(this)
this.age++
this.tixing();
},
tixing:function(){
console.log("提醒你操作成功")
}
}
})
</script># 总结
可以把 v-on 事件绑定 简写成 @符号 比如 @click = “” 建议使用简写4.4Vue事件函数的两种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>年龄 {{age}} 岁</h2>
<input type="button" value="点我增加年龄" @click="chufa">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"wuhang",
age:22
},
methods:{ //方法必须定义在这个里面
// chufa:function(){
// console.log(this)
// this.age++
// },
chufa(){
this.age++
}
}
})
</script># 总结
在定义vue事件函数的时候,有两种写法
一种是 函数名 : function(){}
第二种是 函数名(){} 推荐第二种写法4.5Vue事件传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>年龄 {{age}} 岁</h2>
<input type="button" value="点我每次增加20岁" @click="chufa(20,'全世界最牛逼')">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"wuhang",
age:22
},
methods:{ //方法必须定义在这个里面
chufa(sui20,niubi){
this.age = this.age + sui20;
this.msg = this.msg + niubi;
}
}
})
</script># 总结
在使用事件的时候,可以直接在事件调用的地方给事件进行参数传递,在事件定义的地方给对应的变量传递参数5.v-show v-if v-bind
5.1 v-show
v-show是用来控制页面中某个元素是否展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
v-show是用来控制标签 是展示还是隐藏的
-->
<h1 v-show="false">仵老大全世界最牛逼</h1>
<h1 v-show="show">仵老大全世界最牛逼展示出来的</h1>
<input type="button" value="展示出来隐藏的标签" @click="showwulaoda">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
show:false
},
methods:{
showwulaoda(){
this.show = !this.show
// if(this.show){
// this.show = false
// }else{
// this.show = true
// }
}
}
})
</script># 总结
使用v-show的时候,可以直接书写 boolean值来控制元素展示,也可以 通过变量进行控制标签的隐藏或者展示
在v-show可以控制boolean表达式来控制标签的展示与隐藏5.2 v-if
v-if用来控制 页面元素 是否展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
v-if是用来控制标签 是展示还是隐藏的
-->
<h1 v-if="false">仵老大全世界最牛逼</h1>
<h1 v-if="show">仵老大全世界最牛逼展示出来的</h1>
<input type="button" value="展示出来隐藏的标签" @click="showwulaoda">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
show:false
},
methods:{
showwulaoda(){
this.show = !this.show
// if(this.show){
// this.show = false
// }else{
// this.show = true
// }
}
}
})
</script>5.3 v-bind
v-bind用来绑定标签的属性,从而通过vue进行动态修改标签的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<img width="300" v-bind:src="imgs" alt="">
<img width="300" :src="imgs" alt="">
<br>
<br>
<br>
<br>
<br>
<input type="button" value="点击切换图片" @click="gaibiantupian">
<input type="button" value="点击切换图片" @click="gaibiantupian1">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
imgs:'./bg.jpeg'
},
methods:{
gaibiantupian(){
this.imgs = './2.jpg'
},
gaibiantupian1(){
this.imgs = './bg.jpeg'
}
}
})
</script>6.v-for的使用
v-for的作用就是用来对 对象进行遍历 数组也是属于对象的一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{user.id}} {{user.name}} {{user.dizhi}}</span>
<br>
<!-- 通过v-for 遍历对象
(值 键直对的键 下标) in 对象名
-->
<span v-for="(value,key,index) in user">
{{index}}:{{value}}:{{key}}:
</span>
<br>
<span v-for="value in user">
{{value}}:
</span>
<!-- 用 v-for遍历 数组 -->
<ul>
<li v-for="a in arr">{{a}}</li>
</ul>
<ul>
<li v-for="a,index in arr">{{a}}: {{index}}</li>
</ul>
<!-- 通过v-for 遍历数组中的对象
-->
<ul>
<li v-for=" user,index in userlist" >
{{user.id}} {{user.name}} ==== {{user.dizhi}}
</li>
</ul>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
user:{id:'1',name:"仵航",dizhi:"北京"},
arr:["北京","上海","深圳"],
userlist:[
{id:'3',name:"仵航",dizhi:"北京"},
{id:'4',name:"王博",dizhi:"山东"},
]
},
methods:{
}
})
</script># 总结
在使用v-for的时候 要注意 加入 :key 用来给vue内部提供重用和排序的唯一key7、v-model双向绑定
v-model作用 用来绑定标签元素 和 vue实例对象 中data 数据 保持一致 从而实现双向绑定的数据机制 MVVM
# 总结
1.使用v-model可以实现数据的双向绑定
2双向绑定的意思就是 当表单中的数据发生变化 vue的实例中的data数据 也会进行变化 vue中的data数据发生变化 表单的也会进行修改 这就是双向绑定
# MVVM 架构 双向绑定机制
Model 数据 vue中 实例绑定数据
VM ViewModel 监听器
View 页面 页面展示的数据 浏览器7.1v-model的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-model -->
<span>{{msg}}</span><br>
<input type="text" v-model="msg">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"仵老大"
},
methods:{
}
})
</script>7.2 v-model表单传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-model -->
<form>
用户名: <input type="text" v-model="userList.name"><br>
密码: <input type="text" v-model="userList.pass"><br>
邮箱: <input type="text" v-model="userList.emal"><br>
手机号: <input type="text" v-model="userList.phone"><br>
网名: <input type="text" v-model="userList.username"><br>
<input type="button" @click="submits" value="提交">
</form>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
userList:{}
},
methods:{
submits(){
// 获取值
console.log(this.userList)
// 发送ajax axios请求
}
}
})
</script>8、vue便利贴小实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
请输入内容 <input type="text" v-model="content"> <button @click="tianjia">添加新的便利贴</button>
<ul v-show="bianlitielist.length != 0">
<li v-for="(content,index) in bianlitielist" :key="index">
{{index+1}}.{{content}} <a href="javascript:;" @click="delcontent(index)">删除</a>
</li>
</ul>
<ul v-if="bianlitielist.length == 0">
<li >
<font style="color:red ;">当前便利贴没有任何数据</font>
</li>
</ul>
<a v-show="bianlitielist.length != 0" href="javascript:;" @click="bianlitielist = []">清空便利贴</a>
<h3>当前便利贴共:{{bianlitielist.length}}条数据</h3>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
bianlitielist:["今天要录制vue视频","今天要去充天然气","下午三点送货"],//定义原始数据
content:""
},
methods:{
tianjia(){
// console.log(this.content)
if(!this.content){
alert("请输入内容")
return false;
}else{
this.bianlitielist.push(this.content)
this.content = " ";
}
},
delcontent(index){
// console.log(index);
this.bianlitielist.splice(index,1)
}
}
})
</script>9、事件修饰符
修饰符作用就是和事件连用,用来确定 事件触发或者是阻止事件触发的机制
# 常用的事件修饰符
.stop 停止 冒泡
.pervent 阻止
.self 独自
.once 一次9、1stop事件修饰符
用来阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div style="width:200px ;height:200px;background:rgb(199, 83, 83);" @click="parent">
<div style="width:100px ;height:100px;background:rgb(35, 106, 188);" @click.stop="child">
<div style="width:50px ;height:50px;background:rgb(34, 201, 40);" @click="child1">
</div>
</div>
</div>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
},
methods:{
parent(){
console.log("parent")
},
child(){
console.log("child")
},
child1(){
console.log("child1")
}
}
})
</script>9、2prevent事件修饰符
用来阻止标签的默认行为
<!-- prevent -->
<h1>prevent事件修饰符</h1>
<!-- 用来阻止标签的默认行为 -->
<a href="https://www.baidu.com/" @click.prevent="tiaozhuan">点我跳转</a>
9、3self修饰符
用来针对当前标签发生事件触发 只触发自己标签上特定的动作 不监听冒泡
<h1>self修饰符</h1>
<div @click.self="divClick">
<!-- 用来阻止事件冒泡 -->
<input type="button" value="按钮" @click.stop="btnClick">
<input type="button" value="按钮1" @click="btnClick1">
</div>9、4once事件修饰符
once一次作用 让这个事件只触发一次
<h1>once修饰符</h1>
<a href="https://www.baidu.com/" @click.once.prevent="tiaozhuan">点我跳转</a>10、按键修饰符
作用 用来跟键盘中的按键事件进行绑定,用来修饰特定的按键修饰符
# 按键修饰符
.enter 回车键
.tab
.delete 删除键
.esc 返回
.space 空格
.up 上
.down 下
.left 左
.right 右10.1演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- .enter 回车键
.tab
.delete 删除键
.esc 返回
.space 空格
.up 上
.down 下
.left 左
.right 右 -->
<input type="text" v-model="msg" @keyup.esc.enter.space="keyups">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:""
},
methods:{
keyups(){
console.log(this.msg)
}
}
})
</script>11.Axios
11.1引言
Axios是一种异步请求技术,核心作用就是用来给页面 发送异步请求的,并获取 对应数据在页面中的渲染, 页面局部更新的Ajax 封装来的
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
11.2Axios的程序
中文网站:https://www.kancloud.cn/yunye/axios/234845
http://www.axios-js.com/zh-cn/docs/
安装: https://unpkg.com/axios/dist/axios.min.js
11.2.1GET请求方式
axios.get('http://127.0.0.1:9201/user').then(function(resp){
console.log(resp)
}).catch(function(error){
console.log(error,"123123")
})11.2.2POST请求方式
axios.post('http://127.0.0.1:9201/user1', {
id: '01',
name: '仵航'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});11.2.3axios并发请求
并发请求将多个请求在同一时间发送到后端接口 最后集中处理每个请求的响应结果
function getUserAccount() {
return axios.get('http://127.0.0.1:9201/user');
}
function getUserPermissions() {
return axios.post('http://127.0.0.1:9201/user1', {
id: '01',
name: '仵航'
});
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
console.log("两个请求现在都执行完成")
console.log(acct)
console.log(perms)
}));11.2.4 创建实例封装BaseURL
const axioss = axios.create({
baseURL:"http://127.0.0.1:9201",
timeout: 1000
})
axioss.get('/user').then(function(resp){
console.log("进入了user",resp)
}).catch(function(error){
console.log(error,"123123")
})
axioss.post('/user1', {
id: '01',
name: '仵航'
})
.then(function (response) {
console.log("进入了user1",response);
})11.2.5拦截器
//添加请求拦截器
axioss.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.url += "?token=1234"
return config;
});
// 添加响应拦截器
axioss.interceptors.response.use(function (response) {
对响应数据做点什么
if(response.status==500){
alert("服务器错误")
}
response = "******"
return response;
});12.Vue生命周期
Vue实例的生命周期, (初始化阶段 运行阶段 销毁阶段) 生命周期钩子 生命周期函数
Vue 从 创建实例 到最后的销毁 会自动触发一些函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 id="h1">{{msg}}</h1>
<input type="text" v-model="msg">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"仵航"
},
methods:{
abc(){
console.log("1231")
}
},
// 初始化阶段
beforeCreate(){
// 1.生命周期函数中第一个函数 这个函数他在执行vue实例的,仅仅完成了自身事件的绑定
// 和生命周期函数的初始工作,这时候实例里还没有el,data,methods这些相关属性
console.log(this.msg)
},
created(){
// 2.生命周期中第二个函数,这个函数在执行的时候 Vue他的实例已经初始化了data和methods中的相关方法
console.log(this.msg)
},
beforeMount(){
// 3.生命周期中的第三个函数 这个函数在执行vue将el中指定范围作为模版翻译
console.log("beforeMount"+document.getElementById("h1").innerText)
},
mounted(){
//4.生命周期中的第四个函数,这个函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
console.log("mounted"+document.getElementById("h1").innerText)
// this.abc()
},
// 运行阶段
beforeUpdate(){
// 5.生命周期中的第5个函数 这个函数是data中数据发生变化时候执行,
// 这个事件执行仅仅只是vue实例中data数据变化页面显示的仍然是原始数据
console.log("beforeUpdate"+this.msg)
console.log("beforeUpdate"+document.getElementById("h1").innerText)
},
updated(){
//6.生命周期中的第6个函数 这个函数是data中数据发生变化时候执行
//,页面中的数据已经和data中的数据保持一致
console.log("updated"+this.msg)
console.log("updated"+document.getElementById("h1").innerText)
},
//3销毁阶段
beforeDestory(){
// 7.生命周期的第7个函数 该函数执行的时候,vue中所有的数据 methods component都没有销毁
console.log("执行了销毁前beforeDestory")
},
destoryed(){
// 8.生命周期的第8个函数 该函数执行的时候,vue中实例彻底销毁
console.log("执行了销毁后destoryed")
}
})
</script>13.Vue中组件(component)
13.1组件的作用
用来减少实例对象中的代码量 将不同的业务功能划分成不同的组件,由多个组件去进行整个页面的布局 便于咱们日更在vue开发中进行页面管理,方便咱们维护
13.2组件使用
13.2.1全局组件注册
全局组件注册给Vue实例 咱们可以在Vue实例中的任何位置(范围内) 使用这个组件
//1.定义全局组件
Vue.component('login',{
template:` <div> <h1>用户登陆1231</h1> <form action=""></form></div>`
});
//2.使用全局组件 一定要在vue的范围内
<login></login>
# 总结
1.Vue.component 用来开发全局组件, 参数1 组件名称 参数2 组件配置{} template :`` 用来书写组件的html代码 template中必须有且只能有一个root div元素
2.使用vue的作用范围根据俄组件名使用全局组件
3.如果咱们在定义组件名的时候,需要用到驼峰命名法的时候,需要在所有单词小写的地方加一个 _ 下划线 进行使用13.2.2局部组件注册
通过组件注册 Vue实例中一个components属性来完成注册 ,这种方式不会对vue实例造成累加不会重复获取
第一种
// 定义局部模版名称
let login1 = {
template:` <div> <h1>用户登陆1231</h1> <form action=""></form></div>`
}
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
},
methods:{
},
components:{ 用来注册局部组件
// 页面里的标签名字 : 定义的局部组件名字
login:login1
}
})
//使用局部组件
<login></login>
第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.声明局部模版 template 标签 要在 vue实例作用范围外声明 -->
<template id="loginmoban">
<h1>用户登陆</h1>
</template>
<div id="app">
<!--4 局部组件的使用 -->
<login></login>
<h1>用户注册</h1>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
// 2.定义变量用来保存模版配置对象
let login1 = {
template: '#loginmoban' //使用咱们自定义的选择id
}
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
},
methods:{
},
// 3 注册组件
components:{
// 页面里的标签名字 : 定义的局部组件名字
login:login1
}
})
</script>13.3Props的使用
props用来给组件传递静态数据或者动态数据的
13.3.1通过在组件上声明静态数据传递给组件内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3使用 -->
<login user-name="仵航" age="22"></login>
<h1 >用户注册</h1>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
// 1定义
let login1 = {
template:` <div> <h1>用户{{userName}} 年龄:{{age}}</h1></div>`,
props:["userName","age"]
// 作用 用来接收组件使用时通过组件标签传递的数据
}
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
},
methods:{
},
//2赋值
components:{
// 页面里的标签名字 : 定义的局部组件名字
login:login1
}
})
</script># 总结
1.使用组件时候可以在组件上定义多个属性或者是对应的数据
2.在组件内部可以使用props数组把属性名定义上去 之后在使用的时候 直接 {{属性名}} 的方式进行获取值13.3.2通过在组件上声明动态数据传递给组件内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3使用 -->
<login :name="username" :age="age"></login>
<!-- 使用的v-bind方式进行数据绑定 然后当data中的数据发生边改 组件内的数据也是会发生改变的 -->
<input type="text" v-model="username">
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
// 1定义
let login1 = {
template:` <div> <h1>用户{{name}} 年龄:{{age}}</h1></div>`,
props:["name","age"]
// 作用 用来接收组件使用时通过组件标签传递的数据
}
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
username:"仵老大",
age:23
},
methods:{
},
//2赋值
components:{
// 页面里的标签名字 : 定义的局部组件名字
login:login1
}
})
</script>13.3.3prop的单项数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
13.4组件中定义数据和事件
1.组件中定义属于组件的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3使用 -->
<login ></login>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
// 1定义
const login = {
template:` <div> <h1>用户 {{name}} </h1> <ul> <li v-for="item,index,index in lists">{{index}}{{item}}</li> </ul>
</div>`,
data(){//data函数 定义子组件的数据 使用的时候直接使用template通过插值表达式可以直接获取
return {
name:"仵航",
lists:["仵航","22岁","北京"]
}//组件自己的数据
}
}
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
},
methods:{
},
//2赋值
components:{
login
}
})
</script>2.组件里定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3使用 -->
<login ></login>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
// 1定义
const login = {
template:` <div> <h1>用户 {{name}} </h1>
<input type="button" @click="tanchuang" value="点击触发子组件事件">
</div>`,
data(){//data函数 定义子组件的数据 使用的时候直接使用template通过插值表达式可以直接获取
return {
name:"仵航",
}//组件自己的数据
},
methods:{
tanchuang(){
alert(this.name)
alert("恭喜你触发成功")
}
}
}
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
},
methods:{
},
//2赋值
components:{
login
}
})
</script># 总结
1.在组件内定义事件和vue中定义事件基本一致,直接在组件内部使用对应的html中 @click = “函数名“ 就可以调用
2.在组件中使用methods属性 进行定义事件写函数 事件函数中也可以使用this来进行调用当前组件的实例13.5子组件调用父组件的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<login @zizujian="fuzujian"></login>
<!-- 在组件内部使用this.$emit("函数名") -->
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
const login = {
// 调用子组件的事件名
template:` <div> <h1>用户 {{name}} </h1>
<input type="button" @click="tanchuang" value="点击触发子组件事件">
</div>`,
data(){//data函数 定义子组件的数据 使用的时候直接使用template通过插值表达式可以直接获取
return {
name:"仵航",
}//组件自己的数据
},
methods:{
// 2.调用组件传递过来的其他函数
// 需要我们使用this.$emit("函数名")
tanchuang(){
this.$emit('zizujian')
}
}
}
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
},
methods:{
// 1.在父组件定义一个事件
fuzujian(){
alert("调用了父组件的事件函数")
}
},
components:{
login
}
})
</script>13.4插槽slot
相当于电脑的usb接口 哪里需要在哪里插入对应的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 插槽默认值 -->
<login ></login>
<hr>
<!-- 基础的 直接定义slot 然后上面使用就可以 -->
<login >{{msg}}</login>
<hr>
<!-- 根据名字定义插槽位置 -->
<login ><span slot="aa"> 这是aaa</span> 默认值消失</login>
<!-- 触发事件 -->
<login ><input slot="aa" type="button" value="点我触发父级事件函数" @click="fuji"></login>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
const login = {
// 调用子组件的事件名
template:` <div>
<slot name="aa"></slot>
<h1>用户登陆</h1>
<slot>这是默认值</slot>
</div>`,
}
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{ // 用来vue实例定义一系列数据
msg:"组件slot中的插槽"
},
methods:{
fuji(){
alert("你调用成功了")
}
},
components:{
login
}
})
</script>14、Vue路由(Vue Router)
14.1路由
路由根据请求对路径按照一定的路由规则进行转发或者进行页面跳转
14.2作用
在vue的中实现组件之间的动态切换
14.3如何使用路由
1.引入路由
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> //vue 路由js2.创建了一个组件对象
// 声明一个模版
const login = {
template:'<h1>登陆</h1>'
}
const register = {
template:'<h1>注册</h1>'
}
const wuxiao = {
template:'<h1>请确认你输入的地址是否有效</h1>'
}3.定义了路由规则
// 创建路由对象
const router = new VueRouter({
routes: [
{path:'/login',component:login},
{path:'/register',component:register},
{path:'*',component:wuxiao}
]
})4.讲路由对象创建到vue实例
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{},
methods:{},
router:router //设置路由对象
})5.在页面进行展示
<!-- 显示路由的组件 -->
<router-view></router-view>6.根据链接进行切换路由
<a href="#/login">登陆</a>
<a href="#/register">注册</a>14.4.使用router-link进行展示
用来替换a标签切换路由 好处 就是可以自动给路径添加# 不需要手动添加
<router-link to="/login" tag="button" >跳转登陆</router-link>
<router-link to="/register" tag="button" >跳转注册</router-link>14.5默认路由
作用就是 第一次进入网站,重定向的使用的默认组件
// 创建路由对象
const router = new VueRouter({
routes: [
//path : 路由的路径 component:路径对应的组件
// {path:'/',component:login},
// redirect 用来当作访问时候的默认路由 / 的时候 就会跳转到指定的路由 推荐使用
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
{path:'*',component:wuxiao}
]
})14.6截止到目前完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>Vue路由</h1>
<!-- <a href="#/login">登陆</a>
<a href="#/register">注册</a> -->
<router-link to="/login" tag="button" >跳转登陆</router-link>
<router-link to="/register" tag="button" >跳转注册</router-link>
<!-- 显示路由的组件 -->
<router-view></router-view>
<!-- <login ></login>
<register ></register> -->
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<!-- 引入vue路由文件 -->
<script src="../lib/vue-router.js"></script>
<script>
// 声明一个模版
const login = {
template:'<h1>登陆</h1>'
}
const register = {
template:'<h1>注册</h1>'
}
const wuxiao = {
template:'<h1>请确认你输入的地址是否有效</h1>'
}
// 创建路由对象
const router = new VueRouter({
routes: [
//path : 路由的路径 component:路径对应的组件
// {path:'/',component:login},
// redirect 用来当作访问时候的默认路由 / 的时候 就会跳转到指定的路由 推荐使用
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
{path:'*',component:wuxiao}
]
})
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{},
methods:{},
router:router //设置路由对象
})
</script>14.7路由中参数传递
- 第一种传统的传递方式
1.通过?传递参数
<router-link to="/login?id=12&name=wuhang" tag="button" >跳转登陆</router-link>2.在组件中获取参数的值
const login = {
template:'<h1>登陆</h1>',
data(){
return{}
},
methods:{
},
created(){
console.log("=====>",this.$route.query.id,"=====>",this.$route.query.name)
console.log(this.$route.query.id)
}
}- 第二种传递方式
1.通过使用路径传递参数
<router-link to="/register/22/仵航" tag="button" >跳转注册</router-link>
// 创建路由对象
const router = new VueRouter({
routes: [
{path:'/register/:age/:name',component:register},
]
})2.在组件中获取参数的值
const register = {
template:'<h1>注册</h1>',
created(){
console.log(this.$route.params.age)
console.log(this.$route.params.name)
}
}
14.8嵌套路由
1.声明 最外层和内层路由
<!-- 声明最外层和内层的路由 -->
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品添加</router-link>
<router-link to="/product/edit">商品编辑</router-link>
<router-view></router-view>
</div>
</template>
// 声明一个模版
const product = {
template:'#product'
}
const add = {
template:'<h4>商品添加</h4>'
}
const edit = {
template:'<h4>商品修改</h4>'
}
const jingyingguanli = {
template:'<h1>经营管理</h1>',
}
2.创建路由对象包含嵌套路由
// 创建路由对象
const router = new VueRouter({
routes: [
{
path:'/product',
component:product,
children:[
{path:'add',component:add},
{path:'edit',component:edit}
]
},
{path:'/jingyingguanli',component:jingyingguanli}
]
})3.路由赋值
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{},
methods:{},
router:router
})4.使用
<div id="app">
<h1>Vue路由嵌套</h1>
<router-link to="/product">商品管理</router-link>
<router-link to="/jingyingguanli">经营管理</router-link>
<router-view></router-view>
</div>完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 声明最外层和内层的路由 -->
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品添加</router-link>
<router-link to="/product/edit">商品编辑</router-link>
<router-view></router-view>
</div>
</template>
<div id="app">
<h1>Vue路由嵌套</h1>
<router-link to="/product">商品管理</router-link>
<router-link to="/jingyingguanli">经营管理</router-link>
<router-view></router-view>
</div>
</body>
</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<!-- 引入vue路由文件 -->
<script src="../lib/vue-router.js"></script>
<script>
// 声明一个模版
const product = {
template:'#product'
}
const add = {
template:'<h4>商品添加</h4>'
}
const edit = {
template:'<h4>商品修改</h4>'
}
const jingyingguanli = {
template:'<h1>经营管理</h1>',
}
// 创建路由对象
const router = new VueRouter({
routes: [
{
path:'/product',
component:product,
children:[
{path:'add',component:add},
{path:'edit',component:edit}
]
},
{path:'/jingyingguanli',component:jingyingguanli}
]
})
var app = new Vue({
el:'#app',//指定vue实例的作用范围
data:{},
methods:{},
router:router
})
</script>15.VueCli脚手架
15.1什么CLi
命令行语言.在图形用户界面没有普及之前,没有鼠标,直接输入命令,计算机得到指令之后,进行执行某个操作,字符用户界面(CLI)
15.2 什么是VueCli 《====》maven项目构建工具
Vue Cli是基于vue.js进行快速开发的完整系统,使用Vue脚手架,所有的页面都是一个完整(项目) 前端系统
15.3VueCli的优势
- 通过
@vue/cli实现的交互式的项目脚手架。 - 通过
@vue/cli+@vue/cli-service-global实现的零配置原型开发。 - 一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
15.4vuecli安装
【腾讯文档】如何搭建VUE框架
https://docs.qq.com/doc/DTHhCU1FFZGZPYVB1
15.5引入Element UI
【腾讯文档】Vue框架引入element-ui
https://docs.qq.com/doc/DTGlQenZJWlVzVENC15.6引入一下Axios
【腾讯文档】Vue框架引入Axios
https://docs.qq.com/doc/DTHZjVnlnbmV4SlZI16.VueCli的项目部署
# 总结
1.启动打包命令
npm run build
注意 Vue脚手架打包的时候,打包出来的文件必须在服务器中运行 不能双击执行
2.打包之后项目出现的变化,
dist目录 dist这个文件夹就是vue脚手架打包之后出现的可以直接部署的目录17.VueX状态管理
17.1简介&安装
# 1.简介
-Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
# 2.安装vuex
一种是创建脚手架的时候直接安装
一种是命令提示符安装
npm install vuex@next --save
# 在vue cli中创建 store的文件夹
# 4.在store的文件夹中创建index.js文件import Vue from 'vue'
import Vuex from 'vuex'
//1.安装vuex
Vue.use(Vuex)
//2.创建和暴露store对象
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
# 5.在main.js中引入store并注册到vue实例import Vue from 'vue'
import App from './App.vue'
import router from './router'
//这个是引入store的
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
import VueAxios from 'vue-axios'
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueAxios,axios)
new Vue({
router,
// 这个是引入store的
store,
render: h => h(App)
}).$mount('#app')
17.2state属性
# 1 .state属性
作用 用来全局定义一些共享的数据状态
# 2.语法
state: {
couter:5,//定义共享状态
},
# 3.使用
<h1>{{$store.state.couter}} ==> {{this.$store.state.couter}}</h1>
17.3mutations属性
# 1.mutations属性
// 用来定义 对共享数据进行修改的一系列函数
# 2.语法
mutations: {
zengjia(state){
state.couter++;
},
jkianshao(state){
state.couter--;
}
},
# 3.使用
this.$store.commit("zengjia");
<el-button type="primary" @click="add()" >增加一个人数</el-button>
add(){
this.$store.commit("zengjia");
}
# 4.mutations属性 传递参数
# 先定义参数
zengjiajia(state,coutera){
//zengjiajia (参数1state对象 , 参数2:自定义参数)
return state.couter += coutera;
},
# 调用
this.$store.commit("zengjiajia",5);17.4getters属性
# 1.4getters属性
允许我们在store中定义getter 可以计算的属性,
作用 用来定义对共享数据的计算相关的一些列函数 相当于 computed属性
# 2.语法
getters:{
//平方
mathSqrts(state){
console.log("--------");
return state.counter*state.counter;
},
//乘以一个数字
mathSqrtsNumber(state,getters){
return getters.mathSqrts*3;
},
//传递参数
mathSqrtsNumbers(state,getters){
return function (number){
return number;
}
}
}
# 3.使用
- 1.{{$store.getters.mathSqrts}}
- 2.{{$store.getters.mathSqrtsNumber}}
- 3.{{$store.getters.mathSqrtsNumbers(3)}}
