Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Object.defineProperty(data1, ‘name’, {
// 当我们访问data1的name属性的时候自动调用的方法
// 并且get函数的返回值就是你拿到的值
get() {
console.log(‘你访问了data1的name属性’)
return ‘aa’
},
// 当我们设置修改name属性的时候自动调用的函数
// 并且属性最新的值会被当成实参传入进来
set(newValue) {
console.log(‘你修改了data1的name属性最新的值为’, newValue)
// 这个位置 只要你修改了name属性就会得到执行
// 所以如果你想要在name变化的时候 完成一些自己的事情
// 都可以放到这里来执行
// 1. ajax()
// 2. 操作一块dom区域
}
})
// 以上是js中对象定义的另外一种方案，可以在访问属性和设置属性的时候自动调用对应的函数
// 访问属性：data.name data[‘name’]
// 设置属性：data.name = ‘bb’ data[‘name’] = ‘bb’
响应式的核心API
数据的变化可以引起视图的变化(通过操作dom把数据放到对应的位置上去 如果数据变化之后就用数据最新的值再重新放一次)
方案一:命令式操作
-
document.querySelector(’#app’).innerText = data.name
-
set函数中重新执行一下document.querySelector(’#app’).innerText = data.name
方案二:声明式渲染
v-text指令的实现
核心逻辑：通过‘模板编译’找到标记了v-text的元素,然后把对应的数据通过操作domapi放上去
1.通过app根元素找到所有的子节点 （元素节点，文本节点…） -> dom.nodeChilds
2.通过节点类型筛选出元素节点 （p） -> nodeType 1元素节点 3文本节点
3.通过v-text找到需要设置的具体的节点 <p v-text></p>
4.找到绑定了v-text标记的元素 拿到它身上所有的属性 id class v-text=“name”
5.通过v-text=“name” 拿到指令类型 ‘v-text’ 拿到需要绑定的数据的属性名 ‘name’
6.判断当前是v-text指令 然后通过操作domapi 把name属性对应的值放上去 node.innerText = data[name]
以上整个过程可以称作‘模板编译’
input元素 v-model双向绑定
M -> V
V -> M
M -> V
1.通过app根元素找到所有的子节点 （元素节点，文本节点…） -> dom.nodeChilds
2.通过节点类型筛选出元素节点 （p） -> nodeType 1元素节点 3文本节点
3.通过v-text找到需要设置的具体的节点 <p v-text></p>
4.找到绑定了v-text标记的元素 拿到它身上所有的属性 id class v-text=“name”
5.通过v-model=“name” 拿到指令类型 ‘v-model’ 拿到需要绑定的数据的属性名 ‘name’
6.判断当前是v-model指令 然后通过操作domapi 把name属性对应的值放上去 node.value = data[name]
v-model和v-text除了指令类型不一致，使用的dom api不一致 其它的步骤是完全一致的
V -> M
本质：事件监听在回调函数中拿到input中输入的最新的值然后赋值给绑定的属性
node.addEventListener(‘input’,(e)=>{
data[name] = e.target.value
})
以上总结：
1.数据的响应式
2.数据变化影响视图
3.视图变化影响数据
4.指令是如何实现的(常规实现逻辑)
优化工作：
1.通用的数据响应式处理
data(){
return {
name:‘cp’,
age:28
}
}
基于现成的数据,然后都处理成响应式
Object.keys(data) // 由所有的对象的key组成的数组
Object.keys(data).forEach(key=>{
// key 属性名
// data[key] 属性值
// data 原对象
// 将所有的key都转成get和set的形式
defineReactive(data,key,data[key])
})
function defineReactive(data,key,value){
Oject.defineProperty(data, key, {
get(){
return value
},
set(newValue){
value = newValue
}
最后
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-DGoaFlCu-1714986160219)]
[外链图片转存中…(img-sWfXih3Y-1714986160221)]
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
