前端资料汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
.color{
color: burlywood;
}
.backcolor{
background: chartreuse;
}
{{vdata}}
{{vdata}}
{{vdata}}
#### 绑定style
我们直接使用style配置样式时进行属性绑定,可能会碰到一个属性名不符合规范的报错问题,一些样式属性的名称会出现中横线,而据博主所知在个主流编程语言的变量名中均不支持中横线所以就会导致如下报错
如何解决这种报错,其实也很简单,主要方法有两种,
1. 给不合法的变量名加上引号,在vue的data属性中,键名加不加引号效果都一样,如果你想可以把所有键名都加上引号。比如:`'font-size': '30px'`
2. ==将不合法变量名改为驼峰命名模式,==Vue会自动将驼峰命名的变量名转换为我们需要的变量名,比如:`fontSize: '25px'`
除此之外,style还可能遇到绑定后无法生效的问题,这里必须要加上大括号才能生效。
{{vdata}}
{{vdata}}
{{vdata}}
我是红色字体
### 事件绑定(`v-on`或`@`)
事件绑定我们可以看成在HTML页面中触发一个事件(这里的事件可以理解为一个函数)。
经过`v-on`绑定的属性可以直接执行js代码,也可以去vue中methods中寻找函数执行。
<div id ="app">
<!-- 'v-on==@' 直接执行js代码 -->
<button v-on:click='count-=1'>每次点击-1</button>
<!-- '@是v-on的简写' methods中寻找add函数执行 -->
<button @click='add(10)'>每次点击+10</button>
<p>当前数值为:{{count}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//创建Vue实例
var vm = new Vue({
el: ‘#app’,
data: {
count: 0
},
methods: {
add(num){
this.count += num
}
}
});
#### 传入event
如果在事件处理函数中,想要获取原生的`DOM`事件,那么在html代码中,调用的时候,可以传递一个`$event`参数。
<div id ="app">
<!-- 'v-on==@' 直接执行js代码 -->
<button v-on:click='count-=1'>每次点击-1</button>
<!-- '@是v-on的简写' methods中寻找add函数执行 -->
<button @click='add(10,$event)'>每次点击+10</button>
<p>当前数值为:{{count}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//创建Vue实例
var vm = new Vue({
el: ‘#app’,
data: {
count: 0
},
methods: {
add(num){
this.count += num
console.log(event)
}
}
});
当我点击一下第二个按钮时候,在控制台中就能看到原生`DOM`事件的输出
### 双向绑定(`v-model`)
因为双向绑定的特性,导致其常用于表单输入绑定。即绑定元素中更改了值会自动更新属性中的值,属性中的值更新了也会同步到绑定元素中。
#### 双向绑定原理
其实本质上双向绑定`v-model`是`v-bind`以及`v-on`配合使用的语法糖。
{{vmodel}}
上述绑定中`<input type="text" v-model="vmodel">`的作用就相当于`<input type="text" :value="vbind" @input="vbind=$event.target.value">`
当前我使用的是文本输入,`v-model`会绑定`value`属性和`input`事件,但绑定其他的如单选、多选、下拉菜单等不同的标签,绑定的属性和事件也不同。具体如下
#### 元素绑定
`v-model`在内部为不同的输入元素使用不同的属性并抛出不同的事件:
1. `input`标签`text`(文本框)与`textarea`标签(文本域)时绑定`value`属性,使用`input`事件(每次输入都会触发事件)
2. `input`标签的`radio`(单选框)与`checkbox`(多选框,多选框绑定的值必须是一个数组)时绑定`checked`属性,使用`change`(每次改变选择都会触发事件)
3. `select`标签(下拉菜单)比较特殊,绑定值虽然在select标签中执行,但最终获取值却是获取的 `option`标签中的值,默认优先获取标签中`value`属性中的值,如果标签中没有`value`属性则会获取标签中的元素。
<div id="dome">
<!-- 文本框 -->
文本框:<input type="text" v-model:value='vtext' placeholder="我是文本框, 请输入..."><br>
<!-- 文本域 -->
文本域:<textarea v-model:value='vtextarea' placeholder="我是文本域,请输入..." cols="30" rows="3"></textarea><br>
<!-- 单选框 -->
单选框:
<input type="radio" v-model:checked='vradio' value="男"><label>男</label>
<input type="radio" v-model:checked='vradio' value="女"><label>女</label>
<input type="radio" v-model:checked='vradio' value="中性"><label>中性</label><br>
<!-- 多选框 -->
多选框:
<input type="checkbox" v-model:checked='vchoice' value="真香定理"><label>真香</label>
<input type="checkbox" v-model:checked='vchoice' value="人类本质"><label>复读机</label>
<input type="checkbox" v-model:checked='vchoice' value="咯咯咯"><label>今晚一定</label><br>
<!-- 下拉菜单 -->
下拉菜单:
<select v-model:value="vselect">
<option value="1">A</option>
<option>B</option>
</select>
<!-- 数据 -->
<p>文本框:{{vtext}}</p>
<p>文本域:{{vtextarea}}</p>
<p>单选框:{{vradio}}</p>
<!-- 三元表达式,.length方法用于查看数组长度,可以用于判断是否为空,为空则输出空字符串 -->
<p>多选框:{{vchoice.length==0?'':vchoice}}</p>
<p>下拉菜单:{{vselect}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//创建Vue实例
new Vue({
el: “#dome”,
data: {
vtext: “”,
vtextarea: “”,
vradio: “”,
vchoice: [],
vselect: “”
}
})
### 最后前端到底应该怎么学才好？
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。
不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
