Vue3 笔记 指令 选项api class类与style样式

参考教程

主要特性

• 借鉴了MVVM模式的思想

• 虚拟DOM，实现快速渲染

  原理：
  Vue 将模板编译成虚拟 DOM 渲染函数；
  结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

• 双向数据绑定特性

• 组件化以及插槽技术slot

Vue 的核心是 声明式渲染
声明式的特点在于 通过改变声明来决定样式，而不是直接去操作 dom 改变

vue通过mount挂载，将声明的数据与dom联系起来，并实现响应式变化（一处变化同步变化）

数据绑定形式

数据绑定最常见的形式 就是使用 “Mustache”语法 (双大括号) {{message}} 可嵌入到文本中
Vue 提供的一些特殊的响应式:
v-bind: 绑定属性attribute 简写’:’ 让该属性与声明的数据保持一致

如果绑定的值是 null 或 undefined，那么该 attribute 将不会被包含在渲染的元素上。
注：对于布尔 attribute (它们只要存在就意味着值为 true) ，值为空串依旧有效

v-once 可以标记绑定一次，后续不再响应
v-html 可以动态插入html 但要小心 XSS 攻击
v-model 表单元素上双向数据绑定 对于input 等价于:value="searchText" @input="searchText = $event.target.value"

Vue指令 -带有 v- 前缀的特殊 attribute

指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 和 v-on 是例外
指令属性值发生改变时，将其产生的连带影响，响应式地作用于 DOM。
指令属性值支持(受限的)js表达式 不要试图访问用户定义的全局变量

v-on: 对事件监听 app根标签上的事件无法监听

v-on: 和 v-bind: 可以使用动态参数 使用方括号包裹js表达式

指令修饰符： .xxx 用于指出一个指令应该以特殊方式绑定
如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

创建Vue应用的对象参数 -配置组件选项

import ComponentC from './ComponentC'
//配置组件选项 property
{
	data() {
		return {
			xxx: xxx,
			xxxx: xx
		}
	}.
	各个声明周期钩子函数,
	methods: {
		// 向组件添加方法
	},
	computed: {
		//计算属性
	},
	setup() {
		return {
		}
	},
	emits: {
		//自定义事件
		//在标签上获取emit传递的参数，通过访问$event
		//如果监听的方法函数则会自动传递到函数的参数
	},
	name: 'xxx', // 在组件中会起作用
	props: ['xx'] / {xxx: String}
	components: {
		'component-a': {},
		'component-b': component-B,
		ComponentC
	}
}
const vueApp = Vue.createApp({})

// ComponentC.js 或 ComponentC.vue
export default {
  name: "componentC"
  components: {
    ···
  }
  // ...
}

data 选项

Vue 在创建新组件实例的过程中调用 data()。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
也就是说实例的 $data 属性可以访问data()返回的对象

Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 vm.$data.a。
以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。

直接将不包含在 data 中的新 property 添加到组件实例是可行的。但由于该 property 不在背后的响应式 $data 对象内，所以 Vue 的响应性系统不会自动跟踪它。

当在组件中时，data 应该使用工厂函数的方式，因为对象方式会使多个组件共用一个data

methods

Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。
在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。

计算属性

计算属性是基于它们的反应依赖关系缓存的
也就是说只要相关响应式依赖不发生改变，就不会重新求值

watch 侦听器选项

// 添加组件
VueApp.component('组件名',{
	props: [],
	template: `<xx>xxxxx{{xxx}}</xx>`
})

//vueApp.mount('xx')返回的实例

Vue的自定义元素提供了跨组件数据流、自定义事件通信以及构建工具集成

生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等

• 生命周期钩子的 this 上下文指向调用它的当前活动实例。
  注意： 不要在选项 property 或 回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

通常在created钩子中添加防抖

组件

HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写。这意味着当你在 DOM 模板中使用时，驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased (横线字符分隔) 等效值

html中有些标签要求固定的上下级关系 如ul>li、table>tr
这给组件的使用带来障碍
可以通过 v-is 对标签标注组件名
由于引号内是 js 表达式，所有字符串需要用引号括起来 " 'xxx' "

组件注册

动态组件

<component> 标签 配合 is 属性 可以切换组件
绑定is属性后可以动态切换组件

使用一个 <keep-alive> 元素将动态组件包裹起来，组件实例能够在它们第一次被创建的时候缓存下来。

异步组件

对组件进行异步的加载 defineAsyncComponent

const { createApp, defineAsyncComponent } = Vue

const app = createApp({})

const AsyncComp = defineAsyncComponent(() =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
    // 此方法接受返回 Promise 的工厂函数。从服务器检索组件定义后，应调用 Promise 的 resolve 回调。也可以调用 reject(reason)，来表示加载失败。
)

app.component('async-example', AsyncComp)

props

非props的属性 例如class、id、style等 $attrs

1. 当组件返回单个根节点时，非 prop 属性 将自动添加到根节点的 attribute 中。

如果不希望自动添加到根节点 -禁用 Attribute 继承
在组件的选项中设置 inheritAttrs: false
将其应用于子元素的方法：

app.component('date-picker', {
  inheritAttrs: false, // 禁用 Attribute 继承
  template: `
    <div class="date-picker">
      <input type="datetime-local" v-bind="$attrs" /> //v-bind=="$attrs" 规定绑定到的子元素
    </div>
  `
})

2. 具有多个根节点的组件不具有自动 attribute 回退行为。如果未显式绑定 $attrs，将发出运行时警告。

v-bind="$attrs"

自定义事件

自定义指令 v-xx

directives 选项

class类与style样式

class

// 对象方式
:class="{ 类名: true/false }"
// 数组方式
:class="[activeClass, errorClass]"  // 有条件渲染 [isActive ? activeClass : '', ···]

子组件可通过 :class="$attrs.class" 承接传递的class

style

:style="{ color: activeColor, fontSize: fontSize + 'px' }" // 也支持短横线方式 'font-size'
// 可以绑定多个对象数组
:style="[baseStyles, overridingStyles]"

会自动添加浏览器前缀，通过数组分别对不同前缀赋值