MOSIAW

vue2黑马

Vue3中的核心知识：ref与reactive响应式、CompositionAPI、customRef

vue3.0最大的核心就是Composition API

view文件一般存放需要路由跳变的组件，component一般存放普通组件

utils文件夹存放自己封装的工具类函数

Vue

是一套构建用户界面（往页面里填数据）的框架（现成的解决方案）

特性：

数据驱动视图
双向数据绑定

Vue的核心原理：MVVM

ViewModel就是vue的实例

指令

1. 内容渲染指令

v-text 指令的缺点：会覆盖元素内部原有的内容！
{{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
v-html 指令的作用：可以把带标签的字符串，渲染成真正的 HTML 内容！
v-pre 用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：跳过不需要编译的节点，加快编译的速度；
v-once 用于指定元素或者组件只渲染一次
v-cloak 避免未编译到显示{{message}}后再解析成数据，编译结束后指令消失

2. 属性绑定指令：动态绑定属性、绑定一个对象

注意：插值表达式 {{ }} 只能用在元素的内容节点中，不能用在元素的属性节点中！

使用 v-bind: 指令，为元素的属性动态绑定值；（单向绑定：仅数据渲染视图）
语法糖 —— 冒号:
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
```
这是一个 div
```
可以绑定 attribute 或者用于组件 prop 到表达式
：class=” {active：isActive}“ {类名：Boolean值，为true时绑定，否则失效}
一般用来放对象{ }，否则和绑定普通没区别：src=“ ”
：style=”[attr1, attr2]" 可以绑定多个CSS内联样式对象
：[name]="value" 动态绑定属性
v-bind=“info” info{ name：’zxy‘， age：18 } 绑定所有属性，用于组件原封不动

data中的属性最好不要在data中的其他对象引用

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 ’kebab-case‘来命名

3. 事件绑定

v-on: 简写是 @

语法格式为：

   //也可以传参add(n)

methods: {
   //没有传参时,这里的e是鼠标事件   传参时被覆盖，引出$event
   add(e) {  //add:function()简写
            // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
            //vm.count用this代替
            //vm === this为true

            this.count += 1;

            //e.target是触发事件的事件源  这里e为点击事件MouseEvent
            e.target.style.backgroundColor = 'red
   }
}

- $event(vue的内置变量) 的应用场景：如果默认的事件对象 e 被覆盖（需要传参时使用e）了，则可以手动传递一个 $event。例如：
```
methods: {
   add(n, e) {
            // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
            this.count += 1
   }
}
```
- 事件修饰符：