最后更多分享：前端字节跳动真题解析
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
可以连续使用、其他还有按键码和其别名
-
.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)]
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
