最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
可以连续使用、其他还有按键码和其别名
-
.stop
阻止冒泡(常用) -
.prevent
阻止默认事件(常用) -
.once
只触发一次(常用) -
.self
只有e.target是当前操作元素才触发事件 -
.capture
捕获模式 -
.passive
在scroll事件使用 -
native
组件绑定原生事件
可以实现排他思想,样式切换,在循环的li里绑定样式和事件
:class=“{active:isCur===idx}”
当点击的时候,在点击事件里写入
this.isCur = idx;
如字体大小等都可以让Vue来监听,绑定一个对象
:style=“obj”
对象里写的CSS属性
obj:{
fontSize:16px;
}
计算属性有 getter和setter,setter、完整写法:
computed: {
fullName: {
// getter获取时调用
get() {
return this.firstName + ’ ’ + this.lastName
},
// setter修改时调用
set(newValue) {
const names = newValue.split(’ ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
简写成函数、默认只有getter🧡:
computed:{
fullName() {//不用写在data里了,插值语法直接使用
return this.firstName + ’ ’ + this.lastName
}
}
相比computed可以执行异步操作、完整写法:
watch: {
isHot: {
deep:true,//监测多层值的改变
immediate:true,//一开始执行一次
handler(newValue,oldValue){
…
}
}
},
简写成函数🧡:
watch: {
isHot(){
…
},
deep: true//这样也可以
},
Vue监测对象是通过getter
和setter
如果在对象里新增一个属性,则视图不会更新,此时需要使用Vue.set()
Vue监测数组必须使用这几个Vue维护的方法(因为没有getter
和setter
)、不能使用中括号操作、否则视图不会更新
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
如果在对象里新增一个属性,则视图不会更新,此时需要使用Vue.set()
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。
Vue.set(target, propertyName/index, value)
全局方法
this.$set(target, propertyName/index, value)
局部方法🧡
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind
表达式
局部过滤器🧡
{{ message | capitalize }}
filters: {
capitalize: function (value) {
if (!value) return ‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
全局过滤器
Vue.filter(‘capitalize’, function (value) {})
步骤
-
定义组件
-
注册组件
-
使用组件(写组件标签)
全局注册和局部注册
局部注册:靠
new Vue
的时候传入components
选项🧡
全局注册:靠
Vue.component
(‘组件名’,组件)
常见指令:
-
v-text
替换文本不能解析标签 -
v-html
替换文本,可以解析标签,有安全问题,注意XSS跨站攻击、http-only
字段的cookie
除了在http中使用,不能在别的地方使用,所以是安全的 -
v-once
初次动态渲染后,就视为静态内容 -
v-cloak
解决网速慢出现{{xxx}}
的问题
v-pre
跳过所在节点编译过程、利用它跳过没有使用指令语法、插值语法的节点来加快编译
自定义指令:自定义指令
有的情况下,仍然需要对普通 DOM 元素进行底层操作
// 全局在用的时候注册一个全局自定义指令 v-focus
Vue.directive(‘focus’, {//第二个参数可以简写成函数
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
//自己用注册局部指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
作用:局部样式,防止冲突
App.vue
里一般不用scoped
在JS
里可以使用require
引入样式
深度选择器,可改UI
组件库的样式(不一定生效)
/deep/ 类名{}
也可以子传父,在下面自定义事件举例
-
可以获取元素的真实
DOM
、如果放在组件标签身上,则是组件实例对象(vc
) -
使用方式
//打标识:
//获取:
this.$refs.xxx
子传父 需要 父组件传一个函数到子组件 子组件调用这个函数并传参
传数据<Demo name="xxx">
接收数据:
-
方式一(只接收):
props:['name']
-
方式二(限制类型):
props:{name:Number}
-
方式三(限制类型,限制必要性,指定默认值):
props:{
name:{
type:String,//类型
required:true,//必要性
default:‘老王’//默认值
}
}
使用:this.name
备注:props在data前
、props
是只读的,如果要修改,就复制一份内容到data中,data中写name:this.name
功能:可以把多个组件共用的配置提取成一个混入对象
第一步,定义混合,如:
export const xxx = {
data(){…},
methods:{…}
最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性,指定默认值):
props:{
name:{
type:String,//类型
required:true,//必要性
default:‘老王’//默认值
}
}
使用:this.name
备注:props在data前
、props
是只读的,如果要修改,就复制一份内容到data中,data中写name:this.name
功能:可以把多个组件共用的配置提取成一个混入对象
第一步,定义混合,如:
export const xxx = {
data(){…},
methods:{…}
最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- [外链图片转存中…(img-upDGcQ9B-1715656869942)]