ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

海康威视前端实习电话面

2021-05-22 15:02:59  阅读:270  来源: 互联网

标签:居中 50% cpn 威视 元素 海康 组件 item 实习


Vue的生命周期

  • beforeCreat
  • created
  • beforeCount
  • counted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

CSS水平垂直居中的方法(行内元素?)

参考了CSS水平居中+垂直居中+水平/垂直居中的方法总结,这篇文章总结的很清楚。

首先,块级元素:

1.水平居中
(1)margin:0 auto;,这个方法的前提是必须给元素添加宽度。
(2)子元素设置成行内块,父元素文本居中text-align: center;
(3)定位:子绝父相,子元素设置left:50%;transform:translateX(-50%)
left是让子元素最左边的一条线水平居中,translateX向左移动自身的一半,这就完成了整个子元素的居中。
(4)定位:子绝父相,子元素设置left:50%;margin-left:-自身宽度的一半px;,这种方法也必须设置子元素的宽度。margin如果按百分值设置的话,默认是基于其父元素的宽度计算的,而不是自身宽度。
(5)flex布局:给要居中的父元素添加display: flex; justify-content: center;

2.垂直居中
(1)定位:子绝父相。子元素:top: 50%; transform: translateY(-50%);
(2)flex布局,父元素:display: flex; align-items: center;

其次,行内元素:

1.水平居中
(1)父元素设置:text-align: center;,当然,父级必须要是块级元素或者行内块。
2.垂直居中
(1)行内元素(单行):行高等于盒子高度line-height
(2)行内元素(多行):表格布局,让父元素成为表格的单元格,也就是父元素设置display:table-cell;vertical-align: middle;,子元素就会垂直居中。或者,父元素display:table;,子元素display:table-cell; vertical-align: middle;

再次,水平垂直居中:
(1)定位:子绝父相。子元素:top: 0; right: 0; bottom: 0; left: 0; margin: auto;
(2)定位:子绝父相。子元素:left: 50%; top: 50%; margin-left: -元素宽度的一半px; margin-top:-元素高度的一半px;
(3)定位:子绝父相。子元素:left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);使用 transform的好处是,可以不知道子元素的宽高。
(4)flex布局:父元素:justify-content: center; align-items: center;

Vue组件之间的通信

父子组件

父传子:props传递数据,v-bind绑定数据

<body>
		<div id="app">
			<cpn v-bind:cmovies="movies" :cmessage='message'></cpn>
		</div>
		<template id="cpn">
			<div>
				{{cmovies}}
				{{cmessage}}
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//父传子props  props写在子组件里
			//子组件
			const cpn = {
				template: '#cpn',
				//props: ['cmovies', 'cmessage'],//props有很多种数据类型
				props: {
					//cmovies:Array,
					//cmessage:String//要求必须是string类型
					cmessage: {
						type: String,
						default: 'aaa', //默认值 如果没有传cmessage,就会显示默认值
						required: true //true必须传这个值,不传会报错
					},
					//类型是对象或者数组时,默认值必须是一个函数
					cmovies: {
						type: Array,
						default () {
							return []
						}
					}
				},
				data() {
					return {} //子组件的data必须是一个函数,不然所有子组件的数据都一样了,他们需要有自己的数据
				}
			}
			//这里根组件相当于父组件
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					movies: ['海王', '海贼王', '海尔兄弟']
				},
				components: {
					//属性增强写法
					cpn
				}
			})
		</script>
	</body>

注意:props在传参的时候,名称必须是小写字母,不要用驼峰命名。因为v-bind在绑定的时候,属性名要求小写。

子传父:自定义事件$emit

1.在子组件中,通过$emit()来触发事件
2.在父组件中,通过v-on来监听子组件事件

<div id="app">
			<cpn @itemclick="cpnClick"></cpn>
		</div>
		<template id="cpn">
			<div>
				<button v-for="item in categories" @click="btnClick(item.name)">{{item.name}}</button>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//子组件
			const cpn = {
				template: '#cpn',
				data() {
					return {
						categories: [{
								id: 'aaa',
								name: '热门推荐'
							},
							{
								id: 'bbb',
								name: '手机数码'
							},
							{
								id: 'ccc',
								name: '家用电器'
							}
						]
					}
				},
				methods: {
					btnClick(item) {
						//发射事件
						this.$emit('itemclick', item)
					}
				}
			}
			//父组件
			const app = new Vue({
				el: '#app',
				components: {
					cpn
				},
				methods: {
					cpnClick(item) {
						console.log('itemclick', item);
					}
				}
			})
		</script>

兄弟组件

没有回答出来┗|`O′|┛ 嗷~~
Vuex、EventBus

作用域插槽

父组件替换插槽的标签,但是内容是由子组件来提供的。也就是子组件的数据传到父组件中。

<body>
		<div id="app">
			<cpn>
				<!-- 如果不想以原来li的方式进行展示 -->
				<!-- 父组件不能直接访问 pLanguage-->
				<template slot-scope="slot">
					<!-- 以 - 的方式展示 -->
					<span v-for="item in slot.data">{{item}} -</span>
				</template>
			</cpn>
			<cpn></cpn>
			<cpn @show='fun'>
				{{language}}
			</cpn>
		</div>
		<template id="cpn">
			<div>
				<slot v-bind:data='pLanguage'>
					<ul>
						<li v-for="item in pLanguage">{{item}}</li>
					</ul>
				</slot>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const cpn={
						template: '#cpn',
						data() {
							return {
								pLanguage: ['JS', 'c++', 'c语言', 'Java']
							}
						},
						created(){
							this.emit()
							
						},
						methods:{
							emit(){
								this.$emit('show',this.pLanguage);
							}
						}
					}
			const app = new Vue({
				el: '#app',
				data(){	
					return{
						isShow: true,
						language:[]
					}
				},
				methods:{
					fun(item){
						this.language=item
					}
				},
				components: {
					cpn
				}
			})
		</script>
	</body>

第一个cpn是以作用域插槽的方法使得父组件访问到子组件的数据,并改变了展示方式,第二个cpn是默认展示,不存咋传递数据,就是子组件在访问子组件作用域内的数据,第三个cpn是以$emit的方式让子组件传递数据给父组件,只是以数组的形式展示。

es6语法

  • 箭头函数
  • const定义常量 let定义变量
  • class类的概念
  • 解构赋值
  • for in 和for of的遍历方式
  • Promise
  • 。。。。。。

标签:居中,50%,cpn,威视,元素,海康,组件,item,实习
来源: https://blog.csdn.net/weixin_44383261/article/details/117151146

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有