总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。
const isShow = ref(true)
const text = ref(‘基尼太没’)
<script setup lang="ts">
defineProps<{
modelValue: boolean,
textVal: string
}>()
defineEmits(['update:modelValue', 'update:textVal'])
const close = () => {
emit('update:modelValue', false)
}
const change = (e:Event) => {
const target = e.target as HTMLInputElement
emit('update:textVal', target.value)
}
</script>
<template>
<div class="dialog" v-if="modelValue">
{{ modelValue }}
<button class="close" @click="close">关闭</button>
<h3>我是Demo3子组件</h3>
内容:<input type="text" :value="textVal" @input="change">
</div>
</template>
三、v-model 自定义修饰符
Vue 有一些内置的修饰符,比如 .trim、.lazy 和 .number。在某些场景下,我们可以使用自定义修饰符。
我们在组件上的 v-model中使用修饰符时,父组件会向子组件传递 一个props:modelModifiers,这个属性名也是固定的,这个属性是一个对象,我们可以在这个对象中访问到这个修饰符。这个props默认是一个空对象。比如下面的栗子中,modelModifiers的值是 {capitalize: true},我们可以通过判断这个修饰符对应的属性值,对modelValue进行一些操作。
<MyComponent v-model.capitalize="myText" />
<script setup>
const props = defineProps({
modelValue: String,
modelModifiers: { default: () => ({}) }
})
defineEmits(['update:modelValue'])
console.log(props.modelModifiers) // { capitalize: true }
</script>
<template>
<input
type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
如果我们想在修改了名字的v-model中使用修饰符怎么办呢,其实就把props中的 ‘modelModifiers’ 改为 ‘参数名Modifiers’ 就可以了。
以下是一个完整案例:
<!-- 父组件 -->
<template>
<button @click="()=>isShow = !isShow">开关Demo3</button>
<div>isShow: {{ isShow }}</div>
<div>text: {{ text }}</div>
<Demo3 v-model="isShow" v-model:textVal.kun="text"></Demo3>
</template>
<script setup lang="ts">
import Demo3 from './components/Demo3.vue';
const isShow = ref<boolean>(true)
const text = ref<string>('基尼太没')
</script>
<script setup lang="ts">
const props = defineProps<{
modelValue: boolean,
textVal: string,
// textValModifiers 默认值为一个空对象,如果修饰符被使用,则该属性为 true
textValModifiers?:{
kun: boolean
}
}>()
const emit = defineEmits(['update:modelValue', 'update:textVal'])
const close = () => {
emit('update:modelValue', false)
}
const change = (e:Event) => {
const target = e.target as HTMLInputElement
emit('update:textVal', props?.textValModifiers?.kun ? target.value+'唱,跳,rap,篮球' : target.value)
}
</script>
<template>
<div class="dialog" v-if="modelValue">
{{ modelValue }}
<button class="close" @click="close">关闭</button>
<h3>我是Demo3子组件</h3>
内容:<input type="text" :value="textVal" @input="change">
</div>
</template>
<style scoped>
.dialog{
width: 500px;
padding: 10px;
border: 5px solid #ccc;
position: relative;
overflow: auto;
}
.close{
position: absolute;
right: 10px;
}
</style>
四、defineModel() 宏
从 Vue 3.4 开始,推荐的实现方式是使用 defineModel()") 宏:
语法:const model = defineModel()
defineModel() 会返回一个自定义Ref对象。在修改父组件时,就不需要触发父组件派发的emits了,可以直接修改这个自定义Ref对象的值,同时父组件的数据也会被修改,我们来改造一下上面的栗子:
父组件:
<template>
<div>
<button @click="()=>isShow = !isShow">开关Demo3</button>
<div>isShow: {{ isShow }}</div>
<Demo3 v-model="isShow"></Demo3>
</div>
</template>
<script setup lang="ts">
// 安装了 unplugin-auto-import 可以自动引入ref,reactive ....
import Demo3 from './components/Demo3.vue';
const isShow = ref<boolean>(true)
</script>
子组件:
<script setup lang="ts">
const model = defineModel()
console.log(model) // customRef 对象
// defineProps(['modelValue'])
// defineEmits(['update:modelValue'])
const close = () => {
// emit('update:modelValue', false)
model.value = false
}
</script>
<template>
<div class="dialog" v-if="modelValue">
{{ modelValue }}
<button class="close" @click="close">关闭</button>
<h3>我是Demo3子组件</h3>
</div>
</template>
这样写起来是不是非常方便,而且,我们可以使用defineModel()返回的Ref对象,继续v-model到其他组件上,这在我们封装自定义组件时会非常有帮助。
接下来我们看一下,defineModel() 在多个v-model中,以及处理v-model修饰符的使用:
父组件:
<template>
<div>
<button @click="()=>isShow = !isShow">开关Demo3</button>
<div>isShow: {{ isShow }}</div>
<div>title: {{ title }}</div>
<div>input: {{ input }}</div>
<Demo3 v-model="isShow" v-model:title="title" v-model:input.kun="input"></Demo3>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Demo3 from './components/Demo3.vue';
const isShow = ref<boolean>(true)
const title = ref<string>('标题')
const input = ref<string>('输入框内容')
</script>
子组件:
<script setup lang="ts">
const model = defineModel()
const title = defineModel('title', { type: String, default: '' })
// 这里 可以解构获取 ref对象 以及 修饰符对象
const [input, inputModifiers] = defineModel('input', {
// get() 省略了 这里暂时不需要,如果需要可以在这里做些处理
/* get(value: string) {
### 总结
根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
这里分享一些前端学习笔记:
* **html5 / css3 学习笔记**
![](https://img-blog.csdnimg.cn/img_convert/c7aea89db6b059151c753196f8f4e9b5.png)
* **JavaScript 学习笔记**
![](https://img-blog.csdnimg.cn/img_convert/af0c75f32f6618baccf39ce440a0fb5c.png)
* **Vue 学习笔记**
![](https://img-blog.csdnimg.cn/img_convert/94cca01f6717f672208838e9ac549be1.png)