Vue笔记
Vue引言
渐进式JavaScript框架
# 渐进式
- 1 易用 html css javascript
2 高效 开发前端页面非常高效
3 灵活 开发灵活 多样性
# 总结
Vue是一个 javascript 框架
# 后端服务端开发人员 :
Vue 渐进式javascrpit框架 : 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 双向绑定 MVVM
- 注意 : 日后使用Vue过程中页面不要在引入jQuery框架
htmlcss ---> javascript ---> jQuery ---> angularjs ---> Vue
# vue作者
尤雨溪
Vue入门
下载Vue.js
# 开发版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
# 生产环境
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUe的第一个入门</title>
</head>
<body>
<h2>你{{ msg }}</h2>
<div id="app">
<h2>你{{ msg }}</h2>
</div>
</body>
</html>
<!--建议js放在最后面-->
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//用来给vue实例定义一个作用范围
data:{ //用来给vue实例定义一些相关数据
msg: "好呀，罗龙达!",
username: "vueueue",
pwd : "12345",
},
});
</script>
测试不同数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{ msg.toUppercase}}</h2><br>
<h2>id : {{user.id}} age : {{user.age}} sex : {{user.sex}}</h2><br>
<h2>{{ address[0] }} --- {{address[1]}} --- {{address[2]}}</h2><br>
<h2>{{users[0].name}}</h2>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//用来给vue实例定义一个作用范围
data:{ //用来给vue实例定义一些相关数据
msg: "hhhhhhhh",
user : {id : 1 ,age : 18 , sex : "male"},
address : ["西青区","天津工业大学","计算机学院"],
users : [{name : "longda"},{name : "zhangsan"}],
},
});
</script>
# 总结
1 vue实例中el属性 : 代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法
2 vue实例中data属性 : 用来给Vue实例绑定一些相关数据,绑定的数据可以通过 {{变量名}} 取出
3 在使用{{}}进行获取data中数据是,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
4 el属性中可以书写任意的CSS选择器,但是在Vue开发推荐使用 id选择器
v-text 和 v-html
v-text
v-text: 用来获取data中数据,将数据以文本的形式渲染到指定标签内部 类似于javascript
<body>
<div id="app">
<h2>{{message}}</h2>
<br>
<span v-text="message"></span>
</div>
</body>
</html>
<!--建议js放在最后面-->
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
message : "hello vue" ,
} ,
});
</script>
# 总结
1 {{}}(插值表达式) 和 v-text获取数据的区别在于:
a.使用v-text取值会将标签中原有的数据覆盖,使用{{}}插值表达式不会覆盖原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁
v-html
v-html: 用来获取data中数据,将数据中含有的html标签先解析在渲染到指定标签的内部
<body>
<div id="app">
<h2>{{message}}我叫罗龙达</h2>
<br>
<span v-text="message">我叫罗龙达</span><br>
<span v-html="message">xxxxx</span>
</div>
</body>
</html>
<!--建议js放在最后面-->
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
message : "<a href=''> hello vue</a>" ,
} ,
});
</script>
vue中事件绑定(v-on)
绑定事件语法
<body>
<br><br><br>
<!--
1.页面中提供按钮
2.按钮绑定单击事件
3.在单机事件中修改年龄的值 同时渲染页面
-->
<div id="app">
<h2>你{{ msg }}</h2>
<h2>你今年 {{ age }}岁了</h2><br>
<input type="button" value="点我改变年龄" v-on:click="change">
</div>
</body>
</html>
<!--建议js放在最后面-->
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//用来给vue实例定义一个作用范围
data:{ //用来给vue实例定义一些相关数据
msg: "好呀，罗龙达!",
age : 22,
},
methods : { //定义vue中事件
change : function () {
//在函数中获取vue实例中data的数据 在事件函数中this就是vue实例
this.age++;
},
}
});
</script>
# 总结 :
事件 事件源 : 发生事件dom元素 事件 : 发生特定的动作 click... 监听器 发生特定动作之后的事件处理程序 通常是js中函数
1 在vue中绑定事件是通过v-on指令来完成的 v-on:事件名
例如 : v-on:click
2 在v-on:事件名的赋值语句中是当前事件触发调用的函数名
3 在vue中事件的函数统一定义在Vue实例的methods中
4 在vue定义的事件中this指的就是Vue实例,日后可以在事件中通过this获取Vue实例中相关数据
vue中事件的简化语法
<body>
<br><br><br>
<!--
1.页面中提供按钮
2.按钮绑定单击事件
3.在单机事件中修改年龄的值 同时渲染页面
-->
<div id="app">
<h2>{{ age }}</h2><br>
<h2>{{ msg }}</h2>
<input type="button" value="通过v-on修改年龄" v-on:click="change">
<input type="button" value="通过@绑定事件修改年龄" @click="ageEdit">
</div>
</body>
</html>
<!--建议js放在最后面-->
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //指定vue的作用范围
data: {
msg: "hhhh",
age : 22,
}, //用来定义vue实例中相关数据
methods : {
change : function () {
this.age++;
},
ageEdit : function () {
this.age--;
}
}, //用来定义事件的处理函数
});
</script>
# 总结 :
1 日后在vue中绑定事件时可以通过@符号形式 简化
Vue事件参数传递
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>VUe的第一个入门</title>
</head>
<body>
<br><br><br>
<!--
1.页面中提供按钮
2.按钮绑定单击事件
3.在单机事件中修改年龄的值 同时渲染页面
-->
<div id="app">
<h2>{{ age }}</h2><br>
<h2>{{ msg }}</h2>
<input type="button" value="通过v-on修改年龄" v-on:click="change">
<input type="button" value="改变age为23" @click="changeTo(2,'longda')">
</div>
</body>
</html>
<!--建议js放在最后面-->
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //指定vue的作用范围
data: {
msg: "hhhh",
age : 22,
}, //用来定义vue实例中相关数据
methods : {
change : function () {
this.age++;
},
changeTo(NewAge,name){
this.age = NewAge;
alert(name)
}
}, //用来定义事件的处理函数
});
</script>
# 总结 :
1 在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接受传递的参数
购物车添加小案例
<body>
<div id="app">
<input type="button" value="-" @click="sub">
<h3>{{count}}</h3>
<input type="button" value="+" @click="add">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
count : 1,
},
methods : {
sub(){
if (this.count<1){
alert("不能再少了")
}else{
this.count--;
}
},
add(){
if (this.count>=10){
alert("每人最多10个")
}else {
this.count++;
}
}
},
});
</script>
v-show v-if v-bind
v-show: 用来控制页面中某个元素是否展示 底层控制是标签 display 属性来进行标签的显示与不显示
<body>
<div id="app">
<h3 v-show="show">你好</h3>
<h3 v-show="show">hello</h3>
<input type="button" value="显示/隐藏标签" @click="showHide">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
show : true,
},
methods : {
showHide(){
this.show = !this.show;
}
},
});
</script>
v-if: 用来控制页面中的标签元素是否展示 底层通过对dom树节点进行添加和删除来控制展示和隐藏
v-bind: 用来给页面中标签元素绑定相应的属性
v-for的使用
v-for:作用就是用来对对象进行遍历的
<body>
<div id="app">
<h2>{{user}}</h2>
<!-- 通过v-for遍历-->
<span v-for="(value,key,index) in user">
{{key}} {{value}} {{index}}
</span>
<br>
<ul>
<li v-for="a in address">{{a}}</li>
</ul>
<br>
<ul>
<!--
通过v-for遍历数组中对象
:key 便于vue内部做重用和排序
-->
<li v-for="us in users" :key="us.id">{{us.name}} {{us.age}} {{us.address}}</li>
</ul>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user: {name: "longda", age: 22, address: "天津工业大学"},
address: ["新疆", "北京", "天津", "南京"],
users: [{name: "longda", age: 22, address: "天津工业大学"},
{id: "1", name: "lina", age: 21, address: "天津理工大学"},
{id: "2", name: "masha", age: 32, address: "天津师范大学"},]
},
methods: {},
});
</script>
# 总结
1 在使用v-for的时候一定要注意加入 :key 用来给vue内部提供重用和排序的唯一key
v-model双向绑定
v-model:用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向绑定机制
<body>
<div id="app">
<input type="text" v-model="message">
<br>
<h2>{{message}}</h2>
<br>
<input type="button" @click="changeValue" value="点击显示姓名">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "",
},
methods: {
changeValue(){
this.message = "my name is longda";
}
},
});
</script>
# 总结
1 使用v-model指令可以实现数据的双向绑定
2 所谓双向绑定 即 表单中的数据变化--->vue实例data数据变化 vue实例中data数据的变化--->表单中数据变化
# MVVM架构
Model :数据 vue实例中绑定数据
VM : ViewModel 监听器
View : 页面 页面展示的数据
记事本案例
<body>
<div id="app">
<input type="text" v-model="msg"> <input type="button" value="添加到记事本" @click="addText">
<br>
<ul>
<li v-for="text,index in texts">{{index+1}} {{text}}<a href="#" @click="removeText(index)">删除</a></li>
</ul>
<br>
<span>总数量 :{{texts.length}} </span>
<br>
<input type="button" value="全部删除" @click="removeAll" v-show="texts.length !=0">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
texts :["第一次记事","龙达学vue"],
count : 2,
msg:"",
},
methods: {
//添加事件
addText(){
if (this.msg != '' && this.msg != " "){
this.texts.push(this.msg);
this.msg = '';
}else {
alert("数据不能为空")
}
},
//根据下标删除数组中某个元素
removeText(index){
this.texts.splice(index,1);
},
removeAll(){
this.texts=[];
}
},
});
</script>
事件修饰符
修饰符: 用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制
# 1 常用的事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
stop事件修饰符
用来阻止事件冒泡
<body>
<div id="app">
<div class="aa" @click="divClick">
<!--用来阻止事件冒泡-->
<input type="button" value="button" @click.stop="btnClick">
</div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {},
methods: {
btnClick() {
alert('按钮被点击');
},
divClick() {
alert('div被点击');
}
},
});
</script>
prevent事件修饰符
用来阻止标签的默认行为
<a href="http://www.baidu.com/" @click.prevent="aclick">点我点我点哦</a>
self事件修饰符
用来针对于当前标签的事件触发 只触发自己标签上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡
<div class="aa" @click.self="divClick">
<!--用来阻止事件冒泡-->
<input type="button" value="button" @click.stop="btnClick">
<input type="button" value="button" @click.stop="btnClick1">
</div>
once事件修饰符
让指定事件只触发一次
Axios基本使用
引言
Axios是一个异步请求技术,核心作用是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax
安装
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
GET方式的请求
// 为给定 ID 的 user 创建get请求
axios.get('http://localhost:8989/user/findAll?name=longda')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
POST方式的请求
// 为给定 ID 的 user 创建get请求
axios.post('http://localhost:8989/user/save',{username : "longda"
,age : 23
,email : '111111@qq.com'})
.then(function(response){
console.log(response.data);
})catch(function(error){
console.log(error);
})
Axios并发请求
并发请求: 将多个请求在同一时刻发送到后端服务器接口,最后集中处理每个请求的响应结果
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
console.log(acct.data);
console.log(perms.data);
// 两个请求现在都执行完成
}));
天气检索小案例
新建一个controller
@RestController
@RequestMapping("city")
public class CityController {
@GetMapping("find")
@CrossOrigin
public Map<String,String> findWeatherCity(String name){
Map<String, String> map = new HashMap<>();
String weather = getWeather(name);
map.put("name",weather);
return map;
}
public String getWeather(String name){
Map<String, String> weathers = new HashMap<>();
weathers.put("北京","晴,空气质量较差");
weathers.put("上海","多云转小雨,空气清新");
weathers.put("广州","晴转多云,空气一般");
weathers.put("深圳","小雨转暴雨,空气清新");
weathers.put("天津","小雨转多云,空气清新");
return weathers.get(name);
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios的GET方式请求</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" @keyup.delete="show" @keyup.enter="searchCity">
<input type="button" value="搜索" @click="searchCity">
<br>
<span v-for="city in hostCitys">
<a href="#" @click.prevent="searchCitys(city)"> {{ city }} </a>
</span>
<hr>
<span v-show="isShow">{{ name }} 今天的天气是 : {{ text }}</span>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
name: '',
text : '',
isShow : false,
hostCitys : ['北京','上海','广州','深圳','天津'],
},
methods: {
searchCity(){
//获取输入的城市信息
console.log(this.name);
let _this = this;
//发送axios请求
axios.get("http://localhost:8080/city/find?name=" + this.name).then(function (response) {
console.log(response.data);
_this.text=response.data.name;
_this.isShow=true
})
},
searchCitys(city){
this.name= city;
this.searchCity();
},
show(){
this.isShow=false;
}
},
});
</script>
Vue生命周期
生命周期--->生命周期函数
# vue生命周期总结
# 1 初始化阶段
const app = new Vue({
el: "#app",
data: {
msg : 'longda',
},
methods: {
changeData(){
this.msg='龙达';
}
},
/**
* 1 生命周期中第一个函数,
* 该函数在执行时vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,
* vue实例中还没有data el methods
*/
beforeCreate(){ //
console.log("beforeCraete:" + this.msg);
},
/**
* 生命周期中第二个函数,
* 该函数在执行时vue实例已经初始化了data属性和methods属性中相关方法
*/
created(){
console.log("created:" + this.msg);
},
/**
* 生命周期第三个函数,
* 该函数在执行时vue将El中指定作用范围作为模板编译
*/
beforeMount(){
console.log("beforeMount:"+document.getElementById("sp").innerText);
},
/**
* 生命周期第四个函数,
* 该函数在执行过程中,已经将数据渲染到界面中,并且已经更新了页面
*/
mounted(){
console.log("beforeMount:"+document.getElementById("sp").innerText);
},
# 2 运行阶段
/**
* 生命周期第五个函数,
* 该函数是data中数据发生变化时执行
* 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
*/
beforeUpdate(){
console.log("beforeUpdate" + this.msg);
console.log(+document.getElementById("sp").innerText);
},
/**
* 生命周期第六个函数,
* 该函数执行时data中数据发生变化,页面中数据也发生变化
* 页面中数据已经和data中一致了
*/
updated(){
console.log("Updated"+ this.msg);
console.log("Updated"+document.getElementById("sp").innerText);
}
# 3 销毁阶段
/**
* 生命周期第七个函数
* 该函数执行时，Vue中所有数据 methods component 都没销毁
*/
beforeDestroy(){
},
/**
* 生命周期第八个函数
* 该函数执行时,Vue实例彻底销毁
*/
destroyed(){
}
Vue组件
组件作用
用来
减少Vue实例对象中代码量，日后在使用Vue开发过程中，可以根据不同业务功能将页面中划分不同的多个组件，然后由多个组件去完成整个页面的布局,方便开发人员维护。
组件使用
全局组件注册
说明:全局组件注册给Vue实例,日后可以在任意Vue实例的范围内使用该组件
<body>
<div id="app">
<login></login>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/**
* 全局组件注册
* 参数1 : 组件名称
* 参数2 : 组件配置对象 template 用来书写组件的html代码 (注意 : 在template中必须存在一个容器)
*/
Vue.component('login',{
template: '<div><h1>用户登录</h1></div>'
})
const app = new Vue({
el: "#app",
data: {},
methods: {},
});
</script>
# 注意 :
1 Vue .component用来开发全局组件 参数 1 :组件的名称 参数 2:组件配置{} template:''用来书写组件的html代码 template中必须有且只有一个root元素
2 使用时需要在Vue的作用范围内根据组件名使用全局组件
3 如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写并加入 - 线进行使用
局部组件注册
说明: 通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加建议使用
- 第一种开发方式
//局部组件登录模板
let login= { //具体局部组件名称
template: '<div><h2>用户登录</h2></div>'
}
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: {
login: login //注册局部组件
}
});
//局部组件的使用 在vue实例范围内
<login></login>
- 第二种开发方式
# 1 声明局部组件模板 template 标签 注意 : 在Vue实力作用范围外声明
<!--通过模板标签形式注册局部组件-->
<template id="loginTemplate">
<h1>用户登录</h1>
</template>
# 2 定义变量用来保存模板配置对象
//局部组件登录模板
let login= { //具体局部组件名称
//template: '<div><h2>用户登录</h2></div>'
template:'#loginTemplate'
}
# 3 注册组件
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: {
login: login //注册局部组件
}
});
# 4 局部组件使用 在Vue实例范围内
<div id="app">
<login></login>
</div>
Prop的使用
作用 : props用来给组件传递相应静态数据或是动态数据
通过在组件上声明静态数据传递给组件内部
//1 声明组件模板配置对象
let login= { //具体局部组件名称
template:'<div><h1>欢迎: {{ userName }} , 年龄 : {{userAge}}</h1></div>',
props:['userName','userAge'] //props作用 用来接收使用组件时通过组件标签传递的数据
}
// 2 注册组件
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: {
login: login //注册局部组件
}
});
// 3 通过组件完成数据传递
<login user-name="龙达" user-age="23"></login>
# 总结
1 使用组件时可以在组件上定义多个属性以及对应数据
2 在组件内部使用props数组声明多个定义在足尖上的属性名 日后在组件中通过{{ 属性名 }} 的方式获取组件中属性值
通过在组件上声明动态数据传递给组件内部
// 1 声明模板对象
//局部组件登录模板
let login= { //具体局部组件名称
//template: '<div><h2>用户登录</h2></div>'
template:'<div><h1>欢迎: {{ name }} , 年龄 : {{age}}</h1></div>',
props:['name','age']
}
// 2 注册组件
const app = new Vue({
el: "#app",
data: {
username:'龙达',
age:25,
},
methods: {},
components: {
login: login //注册局部组件
}
});
// 3 使用组件
<login :name="username" :age="age"></login>
//使用v-bind形式将数据绑定Vue实例data属性,日后data属性发生变化,组件内部数据跟着变化
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
组件中定义数据和事件使用
组件中定义属于组建的数据
//局部组件登录模板
let login= { //具体局部组件名称
//template: '<div><h2>用户登录</h2></div>'
template:'<div><h1>欢迎: {{ name }}</h1><ul v-for="item,index in lists"><li>{{index+1}}{{item}}</li></ul></div>',
data(){ //使用data函数方式定义组建的数据 在template代码中通过插值表达式直接获取
return{
msg:'hello',
lists:['java','springboot','springMVC']
}
},
}
组件中事件的定义
const login ={
template:'<div><input type="button" value="点我触发组件中的事件" @click="change"></div>',
data(){
return{
name:'longda'
}
},
methods: {
change(){
alert('触发事件'+this.name)
}
}
}
# 总结
1 组件中定义事件和直接在Vue中定义事件基本一致 直接在组建内部对应的html代码上加上@事件名=函数名方式即可
2 在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例
向子组件中传递事件并在子组件中调用该事件
在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用
// 1 声明组件
const login ={
template:'<div><input type="button" value="点我触发组件中的事件" @click="change"></div>',
data(){
return{
name:'longda'
}
},
methods: {
change(){
//调用vue实例中函数
this.$emit('aaa'); //调用组件传递过来的其他函数时需要使用 this.$emit('函数名调用');
}
}
}
// 2 注册组件
const app = new Vue({
el: "#app",
data: {},
methods: {
findAll(){ //一个事件函数 将这个函数传递给子组件
alert('触发事件')
}
},
components:{
login
}
});
// 3 使用组件
<login @aaa="findAll"></login> --->在组件内部 使用 this.$emit('find')
Vue中路由(VueRouter)
路由: 根据请求的路径按照一定的路由规则进行请求的转发 从而帮助我们实现统一请求的管理
作用
用来在vue中实现组件之间动态切换
使用路由
- 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>
- 2.创建组件对象
//声明组件模板
const login={
template:'<div><h1>龙达</h1></div>'
}
const register={
template: '<div><h1>longda</h1></div>'
}
- 3.定义路由对象的规则
//创建路由对象
const router = new VueRouter({
routes:[
//path : 路由路径 component : 代表注册的组件
{path:'/login',component:login},
{path: '/register',component:register}
]
})
- 4.将路由对象注册到vue实例
const app = new Vue({
el: "#app",
data: {},
methods: {},
router:router //设置路由对象
});
- 5.在页面中显示路由组件并切换
<div id="app">
<a href="#/login">点我登陆</a>
<a href="#/register">点我注册</a>
<!-- 显示路由的组件-->
<router-view></router-view>
</div>
router-link使用
作用:用来替换我们在切换路由时使用a标签切换路由
好处 : 可以自动给路由路径加入#
<router-link to="/login">点我登陆</router-link>
<router-link to="/register" tag="button">点我注册</router-link>
# 总结 :
1 router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2 router-link to属性用来书写路由路径 tag属性用来将router-link标签
默认路由
作用: 用来在第一次进入界面时显示一个默认的组件
//创建路由对象
const router = new VueRouter({
routes:[
{path: '/',redirect:'/login'}, //用来当访问的是默认路由 '/' 时跳转到指定的路由展示
{path:'/login',component:login},
{path: '/register',component:register}
]
})
路由中参数传递
方式一:(传统方式)
- 通过?号形式拼接参数
<router-link to="/login?id=21&name=longda">点我登陆</router-link>
- 组件中获取参数
//声明组件模板
const login={
template:'<div><h1>{{this.$route.query.id}}</h1></div>',
data(){
return{}
},
created(){
console.log('=========>' + this.$route.query.id)
}
}
方式二:(Restful)
- 1.通过使用路径方式传递参数
<router-link to="/register/66/龙达" tag="button">点我注册</router-link>
const router = new VueRouter({
routes:[
{path: '/',redirect:'/login'}, //用来当访问的是默认路由 '/' 时跳转到指定的路由展示
{path: '/register/:id/:name',component:register}
]
})
- 2.组件中获取参数
const register={
template: '<div><h1>{{this.$route.params.id}} {{this.$route.params.name}}</h1></div>',
data(){
return{}
},
created(){
console.log('=========>' + this.$route.params.id)
}
}
嵌套路由
- 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: '<div><h3>商品添加</h3></div>'
}
const edit = {
template: '<div><h3>商品编辑</h3></div>'
}
- 2.创建路由对象含有嵌套路由
//创建路由对象
const router = new VueRouter({
routes: [
{
path: '/product', component: product, children: [
{path: 'add', component: add},
{path: 'edit', component: edit},
]
}
]
})
- 3.注册路由对象
const app = new Vue({
el: "#app",
data: {
id: '',
},
methods: {},
router: router //设置路由对象
});
- 4.测试路由
<router-link to="/product">商品管理</router-link>
<router-view></router-view>
浙公网安备 33010602011771号