再看vue 官方文档一、安装使用npm npm install vue npm install -g @vue/cl

一、安装

使用npm

npm install vue
npm install -g @vue/cli
vue upgrade --next
vue init webpack my-app 使用vite
npm init vite@latest --template

二、基础

1. 使用lodash进行防抖节流，lodash提供函数

2. 计算属性

2.1 计算属性和方法的区别计算属性随着依赖值发生变化而变化，相当于一个缓存的作用。每当重新渲染时，不会触发计算属性但是会触发方法。
2.2 基本用法

computed: {
    publishedBooksMessage () {
      return this.books.length > 0 ? 'YES' : 'NO'
    },
    fullName: { // 随着fullName改变而改变，具有set和get方法
      set(newValue) {
        const name = newValue.split(' ')
        this.firstName = name[0]
        this.lastName = name[name.length - 1]
      },
      get() {
        return this.firstName + ' ' + this.lastName
      }
    }
  },

2.3 watch

watch: {
    msg (newValue, oldValue) {
      console.log(newValue, oldValue)
      return '1'
    }
}

watch和computed 都可以侦听数据的变化，计算属性只可以修改一个数据，但是wacth可以修改很多数据

3 . class与style

<div :class="{isActive: isActive}">class命名使用{}</div>
<div :class="[isActiveClass]">class命名使用[]</div>
<div :class="[isActive ? 'red' : 'green']">class命名使用三元运算符</div>

1. v-if和v-for
v-for和v-if不建议在同一处使用。
v-for需要key值
1. v-model

在组件中使用v-model
父组件：<Sub1 v-model="dataModel"/>
第一种：使用value作为props，input作为事件
子组件：
<input :value="value" @input="$emit('input', $event.target.value)">
第二种：自定义事件、props
子组件：
<input :value="dataModel" @input="$emit('update', $event.target.value)">
model: {
    prop: 'dataModel',
    event: 'update'
}
第三种：在父组件中设置v-model的值(不推荐)
<Sub1 v-model:title="dataModel"/>

1. is 可以在一些特定的位置上使用vue组件表示表格中的一行是VUE组件
1. props 使用:时，表示动态props 使用对象作为props的值

<table>
  <tr is="Sub1"></tr>
</table>

1. 非pros的attribute
8.1 定义：父组件传给子组件的属性，但是没有在props中定义的

例子：test就是非props的attribute
父组件：
<Sub4 test="test" :msg="msg" />
子组件： 
<template>
  <div>
    <p>this.$attrs: {{this.$attrs}}</p>
    <p>props: {{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'Sub4',
  props: ['msg'],
}
</script>

8.2 禁用 Attribute 继承

定义： 在使用非props的attribute时，属性是被子组件的根元素继承，但是此时不希望根元素来继承
例子：在父组件中定义input的属性，但是子组件的根元素是div
父组件：    
<Sub4 placeholder="非props的attribute" />

错误例子：不使用inheritAttrs ，
这时，placeholder是在div上面
<template>
  <div>
    <input type="text">
  </div>
</template>
正确例子：使用inheritAttrs
此时input就有默认值了
<template>
  <div>
    <input type="text" v-bind="$attrs" >
  </div>
</template>
<script>
export default {
  name: 'Sub4',
  inheritAttrs: false,
}
</script>

1. 自定义事件
1. 插槽插槽作用域没有理解？使用props不可以替代吗？
1. inject/provide 在v2中饭不具有响应性
1. 动态组件 & 异步组件
1. 动态组件使用保留离开时组件的状态
13 ref this.$refs.[name].[attribute] v3来了
1. 组合式API

ref、toRef、toRefs

再看vue 官方文档

一、 安装

二、 基础

1. 使用lodash进行防抖节流，lodash提供函数

2. 计算属性

一、安装

二、基础