# vue_36_day04

**Repository Path**: js-class/vue_36_day04

## Basic Information

- **Project Name**: vue_36_day04
- **Description**: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-21
- **Last Updated**: 2022-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 基础知识点

- 什么是 vue
  vue 是一个渐进式 mvvm 的框架

渐进式：慢慢来 学一点用一点 不用把所有的 api 全部学会
框架：相对库来说，更全面 api 更多 功能更全 不像库功能单一 限制会多一点
mvvm

1. mvvm = model(data 中的东西) + view(template) + viewmodel(vue 本身)
2. 不像之前代码一样，我们代码都是混在一起写的，现在的代码开始有分工了
3. 我们现在只要准备好数据，准备好 view 效果就可以了 不用程序员自己手动把数据更新到视图 ，而且修改的时候，也是的，只要把数据一改，视图不用程序员手动更新，视图就会自动更新
4. 维护方便 view 和 model 隔离了 独立 开发效率变高了（代码量少了并且可以多人协作同时写）
5. 最大的特点
   - 不用操作 DOM
   - 数据驱动

vue 写法：

1. 和之前数据可视化一样玩法（测 api 的时候用）
2. 前端工程化的写法 基于 webpack 工具叫 vue/cli

npm
yarn

以后上班的时候只需要关心 src 就行了 不要研究其他文件

插值表达式 写进去的是表达式，渲染出来是表达式返回值
{{1}}
{{1+2}}
{{fn()}}

const a = ?

表达式是有返回值的

各种指令
v-bind 绑定属性 v-bind:href="data 中变量" :href="data 中变量" (href="变量")
v-on 绑定事件 v-on:click="fn" @click="fn"
修改符 1. 事件修饰符 @click.prevent.stop 2. 按键修饰符 @keyup.enter="fn" @keyup.esc
事件对象 @click="fn($event)" @click="fn"

指令是以 v 开头的
vue 内部变量都是以$开头的 $event 事件对象 $set 强制更新视图（对象和数组修改的时候视图不更新）

$event

1. 原生的事件 $event 代表的是事件对象
2. 自定义事件 $event 代表的是子向父传参的时候，抛出来的值

v-text 和插值表达式效果一样，但是一般不用
v-html data 中的数据不是纯字符串，而是带有 html 标签的，必须用这个
v-if 创建和移除元素来实现显示隐藏 切换次数很少
v-show 通过 css 中 display:none 来实现显示隐藏 频繁切换
v-model 1. 它是双向数据绑定（数据变了视图跟着变 视图变了数据跟着变） 2. 只能用于表单控件

input,textarea,select
input:radio,input:checkbox 必须有二个东西一个是 v-model 一个是 value
input:checkbox 分为两种用法 一种是单个直接用 值是布尔值 但是一组的时候值就是数组
v-for 循环数组、对象、数字 key 有 id 用 id 没有就用索引

虚拟 dom
虚拟 dom 本质就是一个普通的 js 对象，用来描述一个真实的 dom,为什么要有虚拟 dom 1. 真实 dom 身上属性太多了 2. 频繁操作真实 DOM 会不停重绘和回流 性能不好

template 模板代码 -> 编译成 render 函数 -> 结合 data 中数据会生成虚拟 dom -> 真实的 dom
第二次的时候当 data 中响应式数据更新了，render 会重新执行，得到一个新的虚拟 dom 然后就和旧的虚拟 dom 进行 diff 对比 找差异 把差异在真实 DOM 上打补丁

diff

1. 根节点有两种情况
   - 情况一：节点标签名变了，直接自己和所有的后代全部换掉
   - 情况二：节点标签名没有变，只有属性或内容变了，这个时候就会就地复用
2. 下面兄弟节点
   - 没有 key，就会就地复用
   - 有 key 是索引，也会就地复用
   - 有 key 是 id，vue 就根据 id 去更新

就地复用可能会存在问题

v-model

1. input:checkbox 单个 如果和 v-model 绑定 值是一个布尔值
2. input:checkbox 一组 数组

计算属性 computed 总价格 平均分
watch 侦听器 本地存储

## 组件

1. 组件是以.vue 结尾 组件是写在 components 目录中
2. 组件的名字最好是二个单词 驼峰式或中划线写法
3. 组件文件不能是空的 必须有东西
4. 组件有两种 ： 局部组件 全局组件（公共组件 轮播图 modal）
5. 组件和标签用法是一样的 单标签写法 双标签写法 ` <HelloWorld> <hello-wolrd>`
6. 组件一般要有一个名字
7. scoped 加了这个之后，当前组件中写的样式只会对当前组件有影响并且对当前组件的子组件根标签有影响的 data-v-hash 值
8. 父子组件如何通信的

父子组件本质就是以前 html 中嵌套关系