Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法) 自制动图,一看就懂 ∠( °ω°)／ 前端知识(3)

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

{{vdata}}

{{vdata}}

{{vdata}}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200610230838731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)


#### 绑定style


我们直接使用style配置样式时进行属性绑定,可能会碰到一个属性名不符合规范的报错问题,一些样式属性的名称会出现中横线,而据博主所知在个主流编程语言的变量名中均不支持中横线所以就会导致如下报错  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/202006102337149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)  
 如何解决这种报错,其实也很简单,主要方法有两种,


1. 给不合法的变量名加上引号,在vue的data属性中,键名加不加引号效果都一样,如果你想可以把所有键名都加上引号。比如:`'font-size': '30px'`
2. ==将不合法变量名改为驼峰命名模式,==Vue会自动将驼峰命名的变量名转换为我们需要的变量名,比如:`fontSize: '25px'`


除此之外,style还可能遇到绑定后无法生效的问题,这里必须要加上大括号才能生效。

{{vdata}}

{{vdata}}

{{vdata}}

我是红色字体

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020061219093739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)


### 事件绑定(`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
}
}
});

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200620124134882.gif#pic_center)


#### 传入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`事件的输出  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200620125928770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)


### 双向绑定(`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: “”
}
})

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题