Vue基础知识

vue3 响应式数据声明 ref  reactive  
vue2 响应式声明在 data内部的return{} 里面

data为什么必须是一个函数而不是一个对象？
      1、  data 是一个对象，那么在组件被多次复用时（例如，在 v-for 循环中），所有实例都会共享同一个 data 对象。这意味着一个实例对 data 的修改会影响到所有其他实例

        2、当组件被复用时（例如，在多个父组件中或通过 v-for 创建多个实例），每个实例都需要有自己的数据副本。通过将 data 定义为函数，并且这个函数在每次创建新实例时都会被调用，Vue 能够确保每个实例都能维护一份被返回对象的独立拷贝。
 

component动态组件渲染  <component :is="tag"/>

插槽  

        具名插槽

          父组件 <template v-slot:header></template>    子组件 <slot name="header"></slot>

       条件插槽

        <div v-if="$slots.header" class="card-header"> <slot name="header" /> </div>

        动态插槽名称

        <template v-slot:[dynamicSlotName]></template>

vue常用指令

        v-model 主要用于表单输入和应用状态之间的双向绑定。
        v-bind 动态地绑定一个或多个属性，或一个组件prop到表达式。在绑定属性时在HTML属性 前加上v-bind:或简写为:

  v-on 监听DOM事件，并在触发时运行一些JavaScript代码。在监听DOM事件时使用v-on:或简写为@。

        v-if  条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。

        v-else-if  v-else-if作为v-if/v-else的“else if 块”，可以链式地多次使用。

       v-else v-else为v-if/v-else-if提供一个“else 块”。

       v-for  基于一个数组来渲染一个列表。可以使用v-for指令基于一个数组来渲染一个列表。

       v-show   根据表达式的真假值来切换元素的CSS属性display
  v-text  更新元素的textContent。如果需要更新部分的textContent，则{{ Mustache }}插值通常是更好的选择。

        v-html   ，它允许你将 HTML 代码作为字符串渲染到 DOM 中通常用于动态插入 HTML 内容