[Vue]Vue3学习笔记1

官网文档： https://cn.vuejs.org/guide/essentials/template-syntax.html

每个组件都是由createApp创建

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

Vue3.4+ 支持v-bind同名简写

如果属性名称与要绑定的 JavaScript 值相同，语法可以进一步缩短，省略属性值

<!-- same as :id="id" -->
<div :id></div>

<!-- this also works -->
<div v-bind:id></div>

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

动态绑定多个值

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

<!--通过不带参数的 v-bind，你可以将它们绑定到单个元素上： -->
<div v-bind="objectOfAttrs"></div>

受限的全局访问​

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。
没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

ref 写法

<el-form ref="formLogin"> ......

const formLogin = ref()