最后
喜欢的话别忘了关注、点赞哦~
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
使用
v-bind指令绑定类属性有两种语法：对象语法和数组语法。 -
对象语法：
v-bind:class接受参数是一个对象，而且可以与普通的class属性共存。具体语法如下所示：
类样式名可以有多个，通过绑定数据为true或false来控制样式是否应用到元素中
示例：
通过数据绑定来控制< div>标签是否添加边框、阴影、背景颜色和鼠标悬停动画显示效果。
/* css代码:*/
#app {…}
#app .border {…} /边框/
#app .shadow {…} /阴影/
#app .backcolor {…} /背景颜色/
#app .hover{…} /鼠标悬停/
#app .hover:hover {…} /鼠标悬停/
边框
阴影
背景
悬停动画
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data: {
isBorder: true,
isShadow: true,
isBackColor: true,
isHover: true
}
});
- 数组语法
绑定class不仅可以使用对象方式，还可以是数组方式，语法如下所示：
示例：
通过数组语法在< div>标签上绑定了边框、阴影和背景颜色类样式
/* css代码:*/
#app {…}
#app .border {…}/边框/
#app .shadow {…}/阴影/
#app .backcolor {…}/背景颜色/
绑定class的数组语法
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data: {
borderClass: “border”,
shadowClass: “shadow”,
backColorClass: “backcolor”
}
});
- 在Vue中不仅可以绑定类样式，还可以绑定HTML标签的
内联样式。绑定HTML标签的内联样式也可以使用对象或数组方式。
对象语法
- v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个
JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebab-case），需要用引号括起来命名，语法如下所示：
或者
示例：
使用Vue绑定HTML标签的内联样式实现向油画上添加边框圆角和阴影效果。
绑定Style 对象语法
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data: {
styleObject: {
width: “450px”,
height: “400px”,
“box-shadow”: “0 5px 15px 5px #888888”,
borderRadius: “50px”
}
}
});
示例：
使用数组语法绑定HTML标签内联样式向花朵油画图添加边框、圆角和阴影效果
绑定Style 数组语法
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data: {
baseStyle: {…},
extendStyle:{…}
}
});
当v-bind:style使用需要添加浏览器引擎前缀的CSS属性时，如transform，Vue会自动侦测并添加相应的前缀。
===========================================================================
- v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，基本语法如下：
语法：
expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。
- 可以用
v-else指令为v-if添加一个“else块”。v-else元素必须立即跟在v-if元素的后面，否则它不能被识别。
示例：
使用v-if和v-else实现用户注册和登录的切换显示。
用户登录/注册
是注册
用户注册
用户登录
当“是注册”的复选框选中时显示用户注册内容，否则显示用户登录内容
除了上面的v-if以外，也可以使用v-show实现条件渲染。
与v-if不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。
v-show不支持元素，也不支持v-else。
示例：
使用v-show实现IT行业公司上班时间切换
IT行业公司上班时间表
是夏天时间
今日上班打卡时间：
8：30-17:00
9：00-17:30
-
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果在初始渲染时条件为假，则什么也不做。—直到条件第一次变为真时，才会开始渲染条件块。
-
相比之下，v-show就简单得多了，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
-
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
=========================================================================
v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。通过v-on可以绑定Vue实例选项参数methods中的方法作为事件的处理代码，“v-on:”后参数接受所有的原生事件名称。v-on指令的语法如下所示：
语法：
按钮
- Vue也提供了
v-on的缩写形式，可以将上面语法中的内容改写为
<button @:click=‘事件处理方法’>按钮< /div>，这两句语句是等价的。
示例：
在两个数进行四则运算的按钮上使用v-on绑定了事件处理方法
加减运算器
<button @click=“doAdd”>加法
减法
<button @click=“alert(vm.num1*vm.num2)”>乘法
<button @click=“doDiv()”>除法
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data: {
num1:0,
num2:0,
result:0
},
methods:{
doAdd:function(e){…},
doSub:function(e){…},
doDiv:function(e){…},
}
});
- 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为
事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
- 在
JavaScript的事件处理程序中一般调用event.preventDefault()方法取消事件的默认动作，以及调用event.stopPropagation()方法阻止事件冒泡。
- 在软件开发原则中，一般建议方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
- 为了解决这个问题，Vue为v-on提供了多个事件修饰符，而事件修饰符都是由点开头的指令后缀来表示的，并且事件修饰符可以串联使用。主要修饰符如下所示：
**`.stop`：** 等同于调用event.stopPropagation()。
**`.prevent`**：等同于调用event.preventDefault()。
**`.capture`**：使用capture模式添加事件监听器。
**`.self`**：只当事件是从监听元素本身触发时才触发回调。
**`.once`**：点击事件将只会触发一次。
事件修饰符使用方式如下代码所示：
| 代码 | 作用 |
| :-- | :-- |
| <a v-on:click.stop="doThis"></ a> | 阻止单击事件继续传播 |
| <form v-on:submit.prevent="onSubmit"></form> | 阻止表单默认提交事件 |
| <form v-on:submit.stop.prevent="onSubmit"></form> | 阻止默认提交事件且阻止冒泡 |
| <form v-on:submit.prevent></ form> | 阻止默认提交事件且阻止冒泡，并不绑定事件 |
| <div v-on:click.self="doThat">...</div> | 只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的 |
| <a v-on:click.once="doThis"></a> | 点击事件将只会触发一次 |
示例：
使用事件修饰符来阻止事件冒泡
css
1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解
js
1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
a>` | 点击事件将只会触发一次 |
示例：
使用事件修饰符来阻止事件冒泡
css
1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解
[外链图片转存中…(img-UBG6HkUa-1715066984544)]
js
1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？
[外链图片转存中…(img-hHhS7ucp-1715066984547)]
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
