目录
求一键三连
希望大家看完觉得有用的话点赞、关注和收藏，感谢！！！
我发现看官方文档还是挺麻烦的 不能细看 要自己挑重点看 不懂的就跳
看起来没有那么的轻松 感觉文档看起来还是不太好理解，比较难懂
Vue 的两个核心功能：
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点
这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。
单文件组件
Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里， Vue 会帮忙处理所有这些构建工具的配置。
三个东西：script template
语法
： 绑定
@ v-on 指令监听 DOM 事件
计算属性
computed：
来描述依赖响应式状态的复杂逻辑
也是存放方法的
不同之处在于计算属性值会基于其响应式依赖被缓存
有了缓存就不用重复执行计算，提高性能
一个特殊的写法
this.awesome = !this.awesome
这里是先把后面的取反再进行=操作
MVVM
在我看来VM 就是原来controller的作用 只不过变成了视图模型 虚拟DOM
以及什么是模型Model，model是数据模型，view通过controller从model拿到数据渲染出来。
vue的view model主要是虚拟DOM 做DOM监听和DOM绑定
内部响应式原理
都是被代理然后再进行渲染
method中不可以用箭头函数（需要用this）
method中的this是指向组件实例
但是箭头函数里面不是没有this吗？
里面的方法写法我就统一用这个格式吧
increment（）{ }
这种就跟Java的比较像 就比较熟悉 好写
this的指向
this是VUE帮助我们绑定好的
data和method都是option api
模板语法
template（Html）里面应该如何去写
代码片段使用
可以直接用快捷键生成模块代码
生成代码片段
"create vue app": {
"prefix": "vueapp",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>Document</title>",
" <script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
" {
{message}}",
" </div>",
" <script>",
"",
" const app = Vue.createApp({",
" data() {",
" return {",
" message: 'hello vue'",
" }",
" }",
" })",
" app.mount('#app')",
" </script>",
"</body>",
"",
"</html>"
],
"description": "create vue app"
}
模板语法
vue是基于HTML的模板语法 在html中哦，和React不一样
写的位置在HTML标签中
里面啥都可以写 还可以写表达式
但是不可以写赋值语句 控制流if语句也不支持 可以写三元运算符
v-once
只渲染一次 后面改变不变化
v-memo
只有当里面的属性被改变时才会进行重新渲染
V-bind
属性的 绑定HTML的属性这种 比如href css的等等
对象语法
键值对 布尔类型
要自己做一个动态绑定的演练
对象中希望是一个整体 就用’ ‘来表达例如：‘30px’, ‘font-size’
对象语法很常用 {abc:true,‘li’:‘ljl’} 字符串类型就要用’'来表示
绑定对象
v-bind=‘对象名’ 自己在data里写的的一个对象
vue的事件绑定
v-on
绑定事件
条件判断
通过控制变量来决定是否渲染 （显示或隐藏可以用这个）
一个显示隐藏的例子（自己写一下）
自己写完之后发现语法并不熟练，没有一次性写出来，在方法那里少了this，怎么呢，就是一上来就写了，这样并不好，先想想逻辑
（想想前面说到的，methods不能用箭头函数，要有this）
template
就是表示这是一个模块 为了省略div 在vue3中才有的，减少一个div的渲染，提高效率。
v-show（区别于v-if）
来回切换的本质是在修改display
而v-if是要进行销毁 根本就不存在这个dom元素
所以v-show无法使用template，因为template不是一个都dom元素，根本无法修改属性
v-for
是在li里写v-for 不是在ul里面写 要注意，它写在那里，就对哪个元素进行循环
v-for遍历数组
注意，在对象中，只要是字符串类型都要加双引号，千万别忘了" "
v-for遍历对象
具体代码 显示的格式也是这样
v-for遍历字符串和数字（了解即可）
数组更新检测
数组只有被修改了才会被侦听到进行重新渲染
v-for里面的in也可以用of 这个没有啥关系
v-for的key属性
VNode->VDOM
虚拟结点形成树结构构成虚拟DOM
为什么要有这个
1.方便后面执行diff算法
2.方便进行跨平台
（怎么说呢，我感觉这个东西有点像Java的JVM虚拟机，一次编译，到处运行，就是一旦编译之后，变成反字节码，到处运行，怎么都是后端的东西搬到前面来）
JVM使得Java语言编译程序只需生成在Java虚拟机上运行的目标代码（字节码），就可以在多种平台上不加修改地运行。Java虚拟机在执行字节码时，把字节码解释成具体平台上的机器指令执行。
基本知识到这里就差不多了
options API
computed
主要是和methods的区别，直接看官方文档就好了
计算属性
使用计算属性来描述依赖响应式状态的复杂逻辑
若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。
为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。
计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：（完整写法是要写get（）方法和set（）方法的，但是可以省略，set一般没有，因为set的呢很少，）
computed: {
fullName: {
// getter
get() {
return this.firstName + ' ' + this.lastName
},
// setter
set(newValue) {
// 注意：我们这里使用的是解构赋值语法
[this.firstName, this.lastName] = newValue.split(' ')
}
}
watch（监听器）
注意是监听数据的变化，当数据发生变化时进行一些操作，有oldValue和newValue
默认是没有进行深度监听的，比如某个对象变成新的，那肯定可以监听到，但是如果是对象的某个属性改变了，则无法监听到
了解
综合案例购物车（很好）
接下来结合上面的内容做一个练习，写一个购物车的案例
在css中对表单进行写的时候，最好先加一个border，这样你才能知道你都盒子有多大，不然你真的是抓瞎调节，不知道是padding还是margin的问题，记得加 border-collapse: collapse;把边框合并
这样子一下你就把样式调好了，所以就很方便，都要记住这些细节
从后台数据库拿数据的话
使用Fetch
只要写v-for就要写key
这里的按钮都是同一个按钮，所以你需要区分你点击的到底是哪一个按钮。
所以你需要拿到索引才知道你点击的是那一个，通过这个索引来在数组里确定，或者你直接拿到循环中的item进行操作也可以
最重要的是把获取到的这个值传入到方法里，记住是可以传参数的，别忘了，都要传递你到底是for循环里的哪个，所以都是带参函数
通过绑定属性来设置当<=1不可操作（我还想着用v-if，有些逻辑不对）
呆逼语法，在vue的插值语法中，即{ { }}中，调用函数时如果没有参数是不能写（）来表示方法的，例如这个，写成这样就无法显示，去掉（）就可以显示页面，实在是无语的很
计算总价的方法，里面的this不能少，少了this你就无法获得books，同时也正是因为这个this，指向的是渲染的这个数据，所以当你使用按钮修改时，会改变数据，这时就会触发computed方法，进行重新渲染，所以总价就会动态变化，这个就比原生的要好用。还有记住写函数，尤其是这种最后要返回值的，别忘了写return，不然你最后获得啥呢！
数组的reduce（）方法，百度一下 高阶函数 可以了解，不会就用for循环
抽取的好处，当你需要修改这个符号的时候，你直接在这里改就好了，就不用一个个去改，这个是一个很好的习惯，抽取函数
移除函数，通过索引来进行删除，查一下splice方法，比较好理解
，我觉得在这里你也要明白为什么能删除以及最后对你实际的数据没有影响，因为它是虚拟dom，你用的是v-for进行渲染的（这一块我觉得自己还是有些不太清晰）
如果有错误，注意看是不是敲错了，注意看报错，仔细看，比如这里你就可以看到是你的index写错了，重新写一下就可以了
如何用vue实现排他性思想
用两个例子一步步得出结果
例子1：
之前是用active（就是：hover这种，之前也学过），active是点击才有效果
active
一步步的得出最后的排他性操作
这里是绑定class属性，加{}是表示是对象语法，设置active为当索引值为1 的时候才为true，所以只有1才会变为红色，
所以只要知道点击的索引就可以设置颜色
所以要获取我点击位置的索引，传入index才可以记录
设置一个currentidnex变量，每次点击就把currentindex设置为点击的索引即可。此时再去判断就可以了，这个时候就把原生的排他性思想就放到了vue里面，只有当index===（点击的index）currentindex时，才会设置为active，其他的index都不会设置，这时就实现排他性了
例子2
所以最开始你要明白的就是改颜色要用到的css是什么，如果只是css操作，那就是：active或者：hover，修改样式（类），才能真正的变色，后面才是js的东西。
而pink老师教的原生的那个是获取dom元素，先把其他的全部设置为空，然后设置style的class里的背景颜色。
他这里就没有真正的用到active，这里的active其实是一个类名，可以是任何其他的名字，逻辑就是当点击之后，把它的class设置为active。
效果：
v-model(双向绑定)
前台数据在输入的时候，后台的数据也在更改。
但是底层更加复杂
手动实现双向绑定
label表示用户界面中某个元素的说明。
但是label的作用远不止这个
包含在label中的元素，只要点击label就会勾选，可点击的范围就扩大了，很方便
v-model绑定的是一个变量，输入的数据就赋值给这个变量，所以要在data里写一下。
绑定复选框（绑定的是布尔类型的值）
单选框
变量一定是是布尔类型，不需要value
多选框
加value之后就可以把值绑定到数组中
绑定 radio
因为是绑定的同一个变量，所以是互斥的，原生html需要加一个同一个name，并且记得gender有默认值的时候就会默认绑定一个。
（所以一般在vue中是不需要name的）
绑定select(下拉列表）
单选和多选是不一样的，单选是一个value，多选是数组，然后注意是写在select里，不是在option里
值绑定
就是这些展示的数据都不应该是我们写死的，都是在数据库里面拿出来渲染的，比如爱好是篮球足球还是什么其他的，都是从后台渲染出来的
v-model的修饰符
lazy
v-model默认绑定的是string型
number（了解）
trim
浏览器默认自动合并空格的
