首页 > 其他分享> > 海康威视前端实习电话面

海康威视前端实习电话面

2021-05-22 15:02:59 作者：互联网

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