一、Vue入门概念
1、Vue是什么
基于标准HTML，CSS，JS，提供声明式，组件化的编程模型来构建用户界面的JS框架
2、Vue两大核心功能：
声明式：模板语法，声明式描述HTML和JS状态之间的关系
响应式：自动跟踪JS状态变化来更新DOM
3、为什么叫渐进式框架？
灵活，可以被逐步集成，支持多种使用方式，详见官网
4、一些理解
（1）选项式vs组合式
- 选项式是面向对象编程思维
- 组合式是函数式编程思维
（2）多个Vue实例的可行性及实际应用场景
- Vue实例之间无法直接通信
- 适用于迁移改造大型项目场景
二、模板语法
绑定语法注意点
（1）绑定仅支持单一表达式（即一段被求值的代码，可以简单判断为是否可以写在return后面）
（2）可以调用函数，每次更新时都会被重新调用，因此不应该产生任何副作用，如改变数据或触发异步操作
（3）受限的全局访问，详见官网，可通过app.config.globalProperties添加
1、HTML标签内容
- 双大括号 {{ }} 或 v-text
- v-html
2、HTML标签属性
2-1、普通HTML属性
- 绑定单个值：v-bind，简写":"，vue版本3.4以上支持同名简写，如 :id
- 绑定多个值：v-bind一个对象
- 特殊值绑定：布尔值，真值或空字符串都会生效，而假值时属性会被忽略
- 特殊属性值绑定：
（1）style和class都支持以对象、数组、对象数组的形式绑定值，可以结合计算属性来使用
（2）style支持在运行时会自动添加浏览器特殊前缀
（3）一个样式属性（如：display）设置多个值，仅会渲染浏览器支持的最后一个值
2-2、事件属性
- v-on，简写@
事件修饰符
为了使方法更专注于数据逻辑而不用处理DOM事件的细节
- .stop
- .prevent
- .self
- .capture
- .once
- .passive 一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能
按键修饰符
- .enter
- .tab
- .delete 捕获Delete和Backspace两个按键
- .esc
- .space
- .up
- .down
- .left
- .right
- 还可以直接使用KeyboardEvent.key暴露的按键名作为修饰符。但需转为k-b形式，如@keyup.page-down
系统按键修饰符
以下为系统按键修饰符，与普通按键修饰符不同的是，与普通按键修饰符一起使用时，如@click.ctrl.enter，需要ctrl键按下，并按下另一个键松开后才触发，单独松开ctrl键将不会触发
- .ctrl
- .alt
- .shift
- .meta 在mac上是command键，在win上是windows键，其他详见官网
- .exact 允许控制触发事件时所需的确定组合的系统按键修饰符，详见官网
鼠标按键修饰符
- .left
- .right
- .middle
需注意调用顺序，@click.prevent.self是阻止元素及其子元素所有点击事件的默认行为，而@click.self.prevent则只会阻止对元素本身的点击事件的默认行为
2-3、动态参数
:[attr] @[attr]
- 限制
（1）值限制，字符串或null，null代表移除绑定，其他值会触发警告
（2）复杂属性可使用计算属性
（3）DOM内嵌时区分变量大小写，SFC则没有该限制
2-4、特殊属性—内置指令
一个指令的任务是在其表达式的值变化时响应式地更新到DOM
一些理解
v-if和v-show的区别
- v-show仅切换了元素的display的css属性
- v-show不支持与template元素使用，也不能搭配v-else
- v-if在切换时，保证了条件区块内的事件监听器和子组件都会被销毁和重建
- v-if是惰性的，初始条件为false时不会渲染，而v-show则始终都会被渲染，只有display属性会被切换
- v-if有较高的切换开销，而v-show则有较高的初始渲染开销
v-if和v-for不推荐一起使用
因为v-if的优先级高于v-for，这意味着v-if条件将无法访问到v-for作用域中定义的变量别名
v-for
- key应该是一个基础类型值，如字符串或number，不能是对象
- v-for结合template，key应放在template上
- v-for可搭配计算属性使用，但计算属性内不应该直接改变原数组，如调用reverse等方法时应先创建原数组的副本
- v-for默认是就地更新（指的是不改变DOM元素顺序，就地更新每个元素），添加key可以让vue跟踪标识，从而重用和重新排序现有元素，但默认更新方式性能更高
v-model
1、可以绑定基础类型，也支持绑定对象字面量，与表单结合使用详见官网
2、修饰符 .lazy .number .trim
2-5、特殊属性—模板ref
- ref 参数可以是字符串，也可以是一个函数，字符串对应的是ref声明变量，函数则每次组件更新时都会被调用，第一个参数是元素el
- 字符串时组件挂载后才能获取到组件实例，挂载前是null，函数时则是绑定元素被卸载调用时，el是null
- ref绑定循环元素时，如li，则字符串对应的是数组变量，但是数组并不保证与源数组相同的顺序
三、模板语法vs渲染函数语法
1、模板更贴近实际HTML，可以更方便地重用一些已有的HTML代码片段；可以做静态分析，Vue模板编译器能够应用许多编译时优化来提升虚拟DOM性能
2、渲染函数一般只会在需要处理高度动态渲染逻辑的可重用组件中使用
