实习第三天

想…

已于 2022-07-31 00:08:27 修改

阅读量83

点赞数

分类专栏：实习日记文章标签：前端 vue.js javascript

于 2022-07-13 09:36:49 首次发布

本文链接：https://blog.csdn.net/weixin_53491844/article/details/125757061

版权

实习日记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue基础

1.组件

1.1 概述

vue是组件化开发，组件化开发就是把相同的模块抽取出来形成一个组件，在我们需要使用到的地方进行使用即可。

1.2 组件化开发的两种模式

1.全局组件 整个vue项目都可以使用
2.局部组件 在哪里注册在哪里使用

1.3 组件化开发的步骤

1.声明组件
2.注册组件
3.使用组件

1.4 组件的使用格式

1.全局组件

Vue.commponent('组件名称',组件对象);//全局注册，等于注册+声明

2.局部组件

var 父组件名称 = {template:'模板',data,methods,commponents:子组件}; //声明
在需要使用的位置激活/注册组件 components：需要注册的组件

3.注意事项

1.切记组件名称不能和我们的html标签一致
2.在定义组件的时候不要在结束写分号
3.单词不要写错

1.5 代码示范

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
	<script type="text/javascript">
		//定义组件
			var  headers = {
					template:`<div>我是头部组件</div>`,
					data(){
						return{
							
						}
					},
					methods:{
						
					},
				}
				//全局组件 注册+声明
			Vue.component('bodyer',{
				template:`
					<div>我是主体</div>
				`,
				data(){
					return{
						
					}
				}
			})
			var  footers = {
					template:`<div>我是底部组件</div>`,
					data(){
						return{
							
						}
					},
					methods:{
						
					}
				}
			new Vue({
				el:'#app',
				components:{ //激活组件/注册组件/加载子组件
					headers,
					footers,
				},
				//使用组件
				template:`
					<div>
						<headers></headers>
						<bodyer></bodyer>
						<footers></footers>
					</div>
				`,
			 
			});
		
	</script>
</html>

2.插槽

2.1 插槽的概述

slot就是插槽，他的作用就是给我们dom节点留下一个坑位，让我们定义的dom进行填充。

2.2 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插槽</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
	<script type="text/javascript">
		//切记：子组件一定要声明在父组件的前面
		//组件必须满足大驼峰
		var ChildComponent = {
			template:`
				<div>我是子组件</div>
			`,
			data(){
				return{
					msg:'hello',
				}
			}
		}
		var Parent = {
			
			template:`
				<div>
					我是父组件
					<slot name='hello'></slot> <!-- 定义插槽-->	
					<child-component>
					</child-component>
				</div>
			`,
			components:{
				ChildComponent, 
			}
		}
		
		new Vue({
			el:'#app',
			template:`
				<div>
					<div>下面是插槽内容</div>
				
					<parent>
						<div slot="hello">我是插槽的内容</div>
					</parent>
				</div>
			`,
			components:{
				Parent,
			}
		});
	</script>
</html>

3.ref对象和$parent 对象

3.1 ref对象

获取子组件的实例对象

3.2 $parent对象

获取父组件的实例对象

父组件在子组件里面获取：this.$parent //获取当前组件的父组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插槽</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
	<script type="text/javascript">
		//切记：子组件一定要声明在父组件的前面
		//组件必须满足大驼峰
		var ChildComponent = {
			template:`
				<div>我是子组件</div>
			`,
			data(){
				return{
					msg:'hello',
				}
			},
			created(){ //生命周期
				//console.log(this.$parent);
			}
		}
		var test = {
			template:`
				<div>我是第二个子组件</div>
			`,
			data(){
				return{
					msg:'hello',
				}
			},
			created(){ //生命周期
				//console.log(this.$parent);
			}
		}
		var Parent = {
			
			template:`
				<div>
					我是父组件
					<slot name='hello'></slot> <!-- 定义插槽-->	
					<child-component>
					</child-component>
					<test ref='childs'></test>
				</div>
			`,
			components:{
				ChildComponent, //注册组件 
				test,
			},
			created(){
				//console.log(this.$refs.childs);
			}
		}
		
		new Vue({
			el:'#app',
			template:`
				<div>
					<div>下面是插槽内容</div>
				
					<parent>
						<div slot="hello">我是插槽的内容</div>
					</parent>
				</div>
			`,
			components:{
				Parent,
			}
		});
	</script>
</html>

4.父子组件之间的通信

4.1 概述

父子组件之间数据交互

4.2 父组件传递数据给子组件

格式：

通过属性进行传递。
父组件通过声明属性进行数据传递，子组件必须定义一个属性的属性进行接收即可。
在使用的过程中，直接使用即可。
属性名可以任意，又称为自定义属性。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件通信</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<Parent></Parent>
			
		</div>
	</body>
	<script type="text/javascript">
		var Child = {
			template:`
				<div>
					我是子组件
					<hr/>
					接收父组件传递的数据{{sendChild}}{{id}}
					{{user.name}}
				</div>
			`,
			props:['sendChild','id','user'],          //属性，专门用来接收父组件传递的数据
			
			methods:{
				show(){
					this.sendChild;
				}
			}
		}
		var Parent = {
			template:`
				<div>
					我是父组件
					<child :sendChild='sendData' :id='msg' :user='person'></child>
				</div>
			`,
			components:{
				Child,
			},
			data:function(){
				return{
					msg:1,
					sendData:'爸爸爱你！',
					person:{id:1,name:'jack'},
				}
			},
			
		}
		new Vue({
			el:'#app',
			components:{
				Parent,
			}
		});
	</script>
</html>

4.3 子组件给父组件传递数据

子组件给父组件通信：
	子组件通过自定义事件进行发送数据
	$emit('自定义事件名',变量1,变量2,......)
	父组件进行接收：
	@自定义事件名='自定义事件名'监听

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件通信</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<Parent></Parent>
			
		</div>
	</body>
	<script type="text/javascript">
		var Child = {
			template:`
				<div>
					我是子组件
					<hr/>
					接收父组件传递的数据{{sendChild}}{{id}}
					{{user.name}}
					<button @click='sendParent'>发送给父组件</button>
				</div>
			`,
			props:['sendChild','id','user'],          //属性，专门用来接收父组件传递的数据
			data(){
				return{
					teacher:{id:1,name:'tom'},
				}
			},
			methods:{
				sendParent(){
					//传递数据给父组件
					this.$emit('father','这是子组件给父组件的数据！',this.teacher)
				},
			}
		}
		var Parent = {
			template:`
				<div>
					我是父组件
					{{teacher}}
					{{dataSource}}
					<child :sendChild='sendData' :id='msg' :user='person' @father='getSonData'></child>
				</div>
			`,
			components:{
				Child,
			},
			data:function(){
				return{
					msg:1,
					sendData:'爸爸爱你！',
					person:{id:1,name:'jack'},
					teacher:'',
					dataSource:'',
				}
			},
			methods:{
				getSonData(val,tea){
					this.teacher = tea ;
					this.dataSource = val;
					console.log(val);
					console.log(tea);
				}
			}
			
		}
		new Vue({
			el:'#app',
			components:{
				Parent,
			}
		});
	</script>
</html>

5.非父子组件的通信

5.1 格式

1.非父子组件通信必须出现一个中间组件 $bus(中央事件总线)
2.利用$emit发送数据 ，$on的触发和建通去实现非父子组件的通信

Vue.prototype.$bus = new Vue(); 在vue对象中挂载一个中间组件
this.$bus.$emit('自定义事件','参数')  //发送数据
this.$bus.$on('自定义事件名',fn) //接收数据

5.2 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非父子组件通信</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-header></my-header>
			<my-body></my-body>
		</div>
	</body>
	<script type="text/javascript">
		Vue.prototype.$bus = new Vue(); //从这一部开始，所有的vue对象都拥有了$Bus属性
		var MyHeader = {
			template:`
				<div>
					我是头部
					{{getData}}
				</div>
			`,
			created(){ //当这个vue组件被初始化完成以后自动接收非父子组件提交的数据
			/* 	this.$bus.$on('sending',function(val){
					console.log(val);
					this.getData = val ;
					console.log(this.getData);
				}); */
				this.$bus.$on('sending',(val1,val2)=>{
						this.getData = val2 ; 
					
				});
				
			},
			data(){
				return{
					getData:'',
				}
			}
			
		}
		var MyBody = {
			template:`
				<div>
					我是正文部分
					<button @click='sendHead'>我要和头部进行通信</button>
				</div>
			`,
			methods:{
				sendHead(){
					this.$bus.$emit('sending',this.msg,"哈哈今天好热饿");//发送数据给非父子组件
				}
			},	
			data(){
					return{
						msg:'我是非父子组件通信的产物！',
					}
			}
		}
		new Vue({
			el:'#app',
			components:{
				MyHeader,
				MyBody,
			},
			created(){
				//console.log(this.$bus);
			}
		});
		
	</script>
</html>

6.vue的生命周期

6.1 图解

在这里插入图片描述

6.2 方法讲解

1.钩子函数
	当只想到某个生周期的阶段自动调用的方法我们称为钩子函数

//created和beforeCreated 钩子函数
var Test ={
			template:`
				<div>
					我是test组件
					
					<button @click='test'>{{msg}}</button>
				</div>
			`,
			data(){
				return{
					msg:1,
					goodsList:[],
				}
			},
			methods:{
				getId(){
					alert("我是方法！")
				},
				test(){
					this.msg = this.msg + 1 ;
				}
			},
			//组件创建前
			beforeCreate(){
				//console.log("该组件被创建前！");
				//console.log(this.msg);
			},
			created(){ //组件被初始化完成 初始data和props里面的数据 也不是最好的。
				//console.log("该组件被创建完成！");
				//console.log(this.msg);
			},
			beforeMount(){ //DOM挂载前，目前dom在js内存中，不在html文档中
				//console.log("挂在前");
				//console.log(document.body.innerHTML);
				//console.log(this.msg);
			},
			mounted(){
				console.log("渲染后");
				//console.log(document.body.innerHTML);
				//console.log(this.msg);
			},
			beforeUpdate(){ //数据更新前
				console.log("更新前");
				console.log(document.body.innerHTML);
			},
			updated(){
				console.log("更新后");
				console.log(document.body.innerHTML);
			},
			beforeDestory(){
				console.log("销毁前");
			},
			deactivated(){ //组件停用
				console.log("组件停用");
			},
			activated(){
				console.log("组件激活");
			}
			
		}
	
	new Vue({
		el:'#app',
		components:{
			Test,
		},
		template:`
			<div>
				<keep-alive><Test v-if='testshow'></Test></keep-alive><br/>
				<button @click='clickbut'>销毁组件</button>
			</div>
		`,
		data(){
			return{
				testshow:true,
			}
		},
		methods:{
			clickbut(){
				this.testshow = !this.testshow;
			}
		}
	});

7.路由

7.1 概述

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分
直白：路由其实就是组件之间的来回跳转类似我们的a标签。

7.2 路由的跳转模式

1.哈希模式： 利用hashchange事件的监听去进行url地址的改变。
2.history模式：通过历史记录进行路由跳转。

7.3 路由哈希模式的跳转原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由的跳转原理</title>
	</head>
	<body>
		
		<a href="#/login">登录</a>
		<a href="#/register">注册</a>
		<div id="app">
			
		</div>
	</body>
	<script type="text/javascript">
		var appdiv = document.getElementById("app");
		window.addEventListener('hashchange',function(e){
			console.log(location.hash);
			switch(location.hash){
				case '#/login':
				appdiv.innerHTML = "我是登录页面!";
				break;
				case '#/register':
				appdiv.innerHTML = "我是注册页面!";
				break;
			}
		});
		
	</script>
</html>

7.4 路由的使用步骤

1.下载路由  npm i vue-router -S
2.安装路由 Vue.use(VueRouter);
3.创建路由对象 var router = new VueRouter();
4.配置路由规则 router.addRoutes([路由对象规则])
	path:锚点值 , component:需要最终展示的组件
5.将配置号的路由交予路由对象管理
6.留坑，路由跳转后组件展示的位置 <router-view>	</router-view>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由的使用</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<p>告知路由最终的组件展示的位置</p>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		var Login = {
			template:`
				<div>我是登录页面</div>
			`,
		}
		var Register = {
			template:`
				<div>我是注册页面</div>
			`,
		}
		Vue.use(VueRouter);//安装路由
		var router = new VueRouter({//创建路由对象
			//配置路由规则
			routes:[
				{path:'/login',name:'login',component:Login},
				{path:'/register',name:'register',component:Register}
			],
			}
		);
		
		new Vue({
			el:'#app',
			router,//把路由对象交予vue对象实例管理
			
		});
	</script>
</html>

8.路由的跳转

8.1 概述

路由的跳转就是通过某些事件或者方法进行组件的来回切换。

8.2 路由跳转的方法

1.通过标签跳转 <router-link to='路由的path地址'></router-link>
2.通过JavaScript代码进行跳转 $router.push({path:'路由的地址'})

注意：
	push：跳转到指定的url，会向历史记录添加一条记录
	replace： 同样会跳转到指定的url，但是不会向history对象中添加记录，所以回退的时候会回退到上上一个。
	go(-1) ,通常用来进行回退的。

8.3 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由的跳转</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			
			<p>
				<router-link to='/login'>登录</router-link>|
				<button @click='goRegister'>注册</button>|
				<button @click='goBack'>返回</button>
			</p>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		var Login = {
			template:`
				<div>我是登录页面</div>
			`,
		}
		var Register = {
			template:`
				<div>我是注册页面</div>
			`,
		}
		Vue.use(VueRouter);//安装路由
		var router = new VueRouter({//创建路由对象
			//配置路由规则
			routes:[
				{path:'/login',name:'login',component:Login},
				{path:'/register',name:'register',component:Register}
			],
			}
		);
		
		new Vue({
			el:'#app',
			router,//把路由对象交予vue对象实例管理
			methods:{
				goRegister(){
					//this.$router.push({path:'/register'});
					this.$router.replace({path:'/register'});
				},
				goBack(){
					this.$router.go(-1);
				}
			}
		});
	</script>
</html>

9.路由的传递参数和获取参数

9.1 查询参数

配置参数：
	:to="{name:login,query:{参数的建:参数的值}}"

获取参数：
	$route.query.参数的键;

9.2 路由参数

想…

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录