4.data与el的两种写法：
1.el有2种写法：
-
（1）:new Vue 时候配置el属性
-
（2):先创建Vue实例，随后再通过vm.$mount(‘#root’) 指定el的值
2.data有2种写法：
（1)对象式
（2)函数式
如何选择：以后到组件的时候，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
5.MVVM模型（架构模型）
-
M:模型(Model)：对应data中的数据
-
V:视图(View):模板
-
VM：视图模型(ViewModel):Vue实例对象
观察发现：
1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
6.数据代理
7.事件处理
事件的基本使用：
1.使用v-on:xxx 或者@xxx绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中,最终会在vm上，
3.methods中的配置的函数，不要用箭头函数，否则this就不是vm
4.methods中配置的函数，都是被Vue所管理的函数,this是指向是vm 或者 组件实例对象
5.@click=‘demo’,和@click=‘demo(@event)’ 效果一样，但是后者可以传参
欢迎来到{{name}}学习
<button @click=“showInfo2(66,$event)” >按钮
事件修饰符
1.prevent 阻止默认事件
2.stop 阻止事件冒泡
3.once 事件只触发一次
4.capture 使用事件的捕获模式
5.self：只有event.target是当前操作元素时才触发
6.passive:事件默认行为立即执行，无需等待事件回调执行完毕
欢迎来到{{name}}学习
<button @click.once=“btn2”>按钮2
div1
div3
键盘事件
键盘中常用按键的别名：
回车=>enter
删除=>delete(捕获’删除’和’退格’键)
退出=>esc
空格=>space
换行=>tab
上 =>up
下 =>down
左 =>left
右 =>right
2.Vue没有提供别名的按键,可以使用按键原始的key值取绑定，但是要转化为kebab-case(短横线命名)
获取原始的key值 console.log(e.key)
3.系统修饰键(用法特殊)：ctrl 、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时,在按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件
系统修饰键配合其他按键可以连写 比如 ctrl + y 直接 在 @keyup 后面添加 .ctrl.y
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
欢迎来到{{name}}学习
<input type=“text” placeholder=“按下回车提示输入” @keyup=“showBtn”>
8.计算属性(computed)
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层原理借助了Object.defineproperty 方法提供的getter 和setter
3.get函数什么时候执行？
(1).初次读取时会执行一次
(2).当依赖的数据发生改变时会被再次调用
4.优势：与methods现实相比，内部有缓存机制(复用),效率更高,调试方便。
5.备注：
1.计算属性最终会出现vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
姓：
名：
姓名：{{fullName}}
9. 监视属性 (watch)
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视！
3.监视的两种写法：
(1):new Vue 时传入watch配置
(2):通过vm.$watch监视
深度监视：
(1).Vue中的watch默认不检测对象内部值的改变(一层)
(2).配置deep:true可以检测对象中内部值的改变(多层)
备注：
(3).Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以!!
(4).使用watch时根据数据的具体结构,决定是否采用深度监视
data(){
return{
isHot:true,
numbers:{
a:1,
b:2
}
}
},
watch:{
//你要监测的属性
isHot:{
immediate:true, //初始化时让handler调用一下
handler(newValue,oldValue){
// console.log(‘isHot被修改了’,newValue,oldValue);
}
},
// 监视多级结构中某个属性的变化
‘numbers.a’:{
handler(newValue,oldValue){
// console.log(‘number的a被秀该了’,newValue,oldValue)
}
},
// 监视多级结构中所有属性的变化 deep
numbers:{
//配置deep:true可以检测对象中内部值的改变(多层)
deep:true,
handler(newValue,oldValue){
console.log(‘我改变了’,newValue,oldValue)
}
}
}
10.computed和watch的区别
1.computed能完成的功能,watch都可以完成
2.watch能完成的功能,computed不一定能完成,比如：watch可以进行异步操作
两个重要的原则：
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
2.所有不被Vue所管理的函数(定时器的回到函数、ajax的回调函数等),最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象
11.绑定样式
1.class样式
写法：class=“xxx” xxx可以是字符串、对象、数组
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-yihxH1Zw-1712378238878)]
最后
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
5644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
