CSS、vue相关复习题
-
不定宽高的div，实现上下左右居中对齐
#father{ display: flex; justify-content: center; align-items: center; width: 200px; height: 100px; border: 1px silver solid; } <div id="father"> <div id="son">子元素</div> </div> -
实现一个两栏布局和三栏布局，尽可能多的实现方案
// 固定两栏布局 #main{ width: 800px; height: 600px; margin: 0 auto; background-color: hotpink; } .left,.right{ height: 600px; background-color: skyblue; } .left{ float:left; width: 595px; } .right{ float: right; width: 195px; } .clear{ clear: both; } <div id="main"> <div class="left"></div> <div class="right"></div> <div class="clear"></div> </div> // 自适应两栏布局：使用负margin #main,#sidebar{ float:left; } #main{ width:100%; margin-right: -200px; background-color: hotpink; } #sidebar{ width:200px; background-color: skyblue; } <div id="main"><p>主体 自适应</p></div> <div id="sidebar"><p>侧边栏 固定</p></div> // 自适应两栏布局：使用overflow:hidden #sidebar{ float:right; width: 100px; height: 200px; background-color: hotpink; } #main{ overflow: hidden; height: 200px; background-color: skyblue; } <div id="main"><p>主体 自适应</p></div> <div id="sidebar"><p>侧边栏 固定</p></div> // 自适应两栏布局：使用flex #main{ display: flex; } #left{ width: 300px; height: 600px; background-color: hotpink; } #right{ flex:1; height: 600px; background-color: skyblue; } <div id="main"> <div id="left">左边</div> <div id="right">右边</div> </div> // 三栏布局：左右固定，中间自适应 使用浮动 #left{ float:left; width: 100px; height: 600px; background-color: hotpink; } #middle{ height: 600px; margin: 0 200px 0 100px; background-color: orange; } #right{ float:right; width: 200px; height: 600px; background-color: skyblue; } <div id="main"> <div id="left">左边</div> <div id="right">右边</div> <div id="middle">中间</div> </div> // 三栏布局：左右固定，中间自适应 使用flex #main{ display: flex; } #left{ width: 100px; height: 600px; background-color: hotpink; } #middle{ flex:1; height: 600px; background-color: orange; } #right{ width: 200px; height: 600px; background-color: skyblue; } <div id="main"> <div id="left">左边</div> <div id="middle">中间</div> <div id="right">右边</div> </div> // 三栏布局：左右固定，中间自适应 使用table #main{ display: table; width: 100%; } #left{ display: table-cell; width: 100px; height: 600px; background-color: hotpink; } #middle{ display: table-cell; height: 600px; background-color: orange; } #right{ display: table-cell; width: 200px; height: 600px; background-color: skyblue; } <div id="main"> <div id="left">左边</div> <div id="middle">中间</div> <div id="right">右边</div> </div> -
如何清除浮动，有哪些方法
#father{ background-color: skyblue; } #son{ float:left; width: 100px; height: 100px; background-color: hotpink; } <div id="father"> <div id="son">box1</div> <div id="son">box2</div> </div>-
给父元素添加高度
#father{ width: 100px; } -
给父元素添加浮动
#father{ float: left; } -
clear属性：浮动元素后面加空元素定义clear，不允许左右有浮动对象
.clear{ clear:both; } <div id="father"> <div id="son">box1</div> <div id="son">box2</div> <div class="clear"></div> </div> -
父元素添加overflow:hidden：处理溢出问题，隐藏超出父元素内容
#father{ overflow: hidden; } -
增加伪元素，父元素使用clearfix类
.clearfix{ zoom:1; } .clearfix::after{ clear:both; content: ''; display: block; height:0; visibility: hidden; } <div id="father" class="clearfix"> <div id="son">box1</div> <div id="son">box2</div> </div>
-
-
实现一个方块，从屏幕左侧飞入，到屏幕中间，停留2s后，又从右侧飞出。
#box{ position: absolute; top: 10px; left: -100px; width: 100px; height: 100px; background-color: skyblue; } <div id="box"></div> //动画函数 function animate(obj,target,callback){ clearInterval(obj.timer); obj.timer = setInterval(function(){ if(obj.offsetLeft >= target){ clearInterval(obj.timer) callback && callback() } obj.style.left = obj.offsetLeft + 1 +'px' },1) } window.onload=function(){ let oBox = document.getElementById('box') let half = screen.width / 2 - parseInt(getComputedStyle(oBox).width)/2 animate(oBox,half,function(){ //方块进入到屏幕一半时的回调函数 setTimeout(function(){ animate(oBox, screen.width) },2000) }) } -
Vue组件的生命周期有哪些
beforeCreate created beforeMount mounted
beforeupdate updated beforeDestory destoryed
-
组件的传值方式有哪些
-
父组件 -> 子组件：自定义属性
父组件：
<组件 :msg="message" />子组件：props:['msg'] -
子组件 -> 父组件：自定义事件
子组件：
this.$emit('事件名',参数)3.x：emits:['事件名']父组件：
@事件名="函数" 函数(参数){} -
父组件 <-> 子组件 3.x：v-model
父组件：
v-model:变量="父组件参数值"子组件：
props:['变量'] emits:['update:变量'] this.$emit('update:变量',子组件参数值) -
兄弟组件之间：eventBus.js
bus=mitt()数据发送方：
bus.emit('事件名称',参数)数据接收方：
bus.on('事件名称',事件处理函数(参数)) -
后代组件之间：
父组件：
provide(){return{msg:...}}子孙组件：inject:['msg'] -
全局数据共享：vuex
-
-
v-model是如何实现的
实现双向数据绑定
-
v-bind绑定响应式数据：数据源改变时页面数据改变
-
页面数据改变触发oninput事件：页面数据改变时数据源改变
<input type="text" :value="msg" @input="msg=$event.target.value"> <span>{{msg}}</span> -
-
vue的普通slot和作用域slot，有什么区别
插槽是组件封装时预留内容的占位符
普通slot：子组件：
<template><slot></slot></template> 父组件：
<my-com>插槽具体内容</my-com>作用域slot：绑定props对外提供数据
子组件：
<slot :info="information"></slot> 父组件：
<template v-slot:default="scope"> {{scope}} </template> -
如何实现以下组件Form, FormItem, Input, InputPassword, 该组件的使用实例如下. 注意，当点击Submit按钮时，会触发规则校验，通过后，会触发onFinish事件，校验失败时，触发onFinishFailed
<template>
<a-form
:model="formState"
name="basic"
@finish="onFinish"
@finishFailed="onFinishFailed"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</template>
<script>
import { defineComponent, reactive } from 'vue';
export default defineComponent({
setup() {
const formState = reactive({
username: '',
password: '',
});
const onFinish = values => {
console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
return {
formState,
onFinish,
onFinishFailed,
};
},
});
</script>
- aForm.vue
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default{
data(){
return{
validate() {
console.log("总验证")
//const results = this.$children.validate();
//console.log(results)
}
}
},
provide(){
return{
form:this.model
}
},
props:{
model:{
type: Object,
}
},
emits:['update:model'],
}
</script>
- aFormItem.vue
<template>
<div>
<label v-if="label">{{label}}</label>
<slot></slot>
<p v-if="error">{{error}}</p>
</div>
</template>
<script>
import Validator from 'async-validator'
import bus from '../eventbus'
export default {
inject:['form'],
props:{
label:{
type: String,
default:''
},
name:{
type: String,
default:''
},
rules: {
type: Object,
default: () => {}
}
},
data(){
return{
error:'' ,//标记验证结果
}
},
mounted(){
bus.on('validate', () => {
console.log("开始验证")
this.validate()
})
},
methods:{
validate() {
let flag = true
let rule = this.rules[0]
let value = this.form[this.name]
console.log("form:"+value);
let descriptor={
[this.name]: rule
}
console.log(descriptor);
const validator = new Validator(descriptor)
validator.validate({[this.name]:value},errors => {
console.log(errors);
if(errors) {
console.log("有误");
this.error = errors[0].message
flag = false
} else {
console.log("无误");
this.error = ''
}
console.log(this.error);
})
return flag
}
}
}
</script>
- aInput.vue
<template>
<div>
<input type="text" :value="value" @input="input"/>
</div>
</template>
<script>
import bus from '../eventbus.js'
export default {
data(){
return{}
},
props:{
value:{
type: String,
default:''
}
},
emits:['update:value'],
methods:{
input(e){
this.$emit('update:value',e.target.value)
bus.emit('validate')
}
}
}
</script>
- aInputPassword.vue
<template>
<div>
<input type="password" :value="value" @input="input"/>
</div>
</template>
<script>
import bus from '../eventbus.js'
export default {
data(){
return{}
},
props:{
value:{
type: String,
default:''
}
},
emits:['update:value'],
methods:{
input(e){
this.$emit('update:value',e.target.value)
bus.emit('validate')
}
}
}
</script>
- aButton.vue
<template>
<div>
<button @click="submit">Submit</button>
</div>
</template>
<script>
export default {
methods:{
submit(){
this.$parent.validate(()=>{});
})
}
}
}
</script>
<style>
</style>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
