>[success] # setup
當使用`<script setup>`的時候,任何在`<script setup>`聲明的頂層的綁定 (包括變量,函數聲明,以及 import 導入的內容) 都能在模板中直接使用,直接導入的函數都不用在`methods`暴露案例中`capitalize `可以直接導入酒使用:
~~~
<script setup>
import { capitalize } from './helpers'
// 變量
const msg = 'Hello!'
// 函數
function log() {
console.log(msg)
}
</script>
<template>
<button @click="log">{{ msg }}</button>
<div>{{ capitalize('hello') }}</div>
</template>
~~~
* 動態組件
由于組件是通過變量引用而不是基于字符串組件名注冊的,在 `<script setup> `中要使用動態組件的時候,應該使用動態的 :is 來綁定
~~~
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
<template>
<component :is="Foo" />
<component :is="someCondition ? Foo : Bar" />
</template>
~~~
* 遞歸組件
一個單文件組件可以通過它的文件名被其自己所引用。例如:名為 FooBar.vue 的組件可以在其模板中用 <FooBar/> 引用它自己。
請注意這種方式相比于導入的組件優先級更低。如果有具名的導入和組件自身推導的名字沖突了,可以為導入的組件添加別名:
~~~
import { FooBar as FooBarChild } from './components'
~~~
* 命名空間組件
可以使用帶`.`的組件標簽,例如`<Foo.Bar>`來引用嵌套在對象屬性中的組件。這在需要從單個文件中導入多個組件的時候非常有用
~~~
<script setup>
import * as Form from './form-components'
</script>
<template>
<Form.Input>
<Form.Label>label</Form.Label>
</Form.Input>
</template>
~~~
>[danger] ##### 頂層 await
https://cn.vuejs.org/api/sfc-script-setup.html#top-level-await
>[success] # 使用3.2 語法開啟的配置
* 你在項目使用了 Eslint,并且使用了一些`編譯器宏` (關于編譯器宏下面章節有詳細講解),這可能會導致 eslint 報`no-undef`的錯誤,如果你遇到這個問題,你需要在 ESLint 配置文件中啟用編譯器宏環境,這要求你的`eslint-plugin-vue` 在8.0 以上版本
~~~
// .eslintrc.js
module.exports = {
env: {
"vue/setup-compiler-macros": true,
},
};
~~~
* 如果你的版本在8.0以下,打開`.eslintrc.js`文件并修改如下
~~~
// The Follow configs works with eslint-plugin-vue v7.x.x
globals: {
defineProps: "readonly",
defineEmits: "readonly",
defineExpose: "readonly",
withDefaults: "readonly",
},
~~~
>[success] # 官網# script setup
[# script setup](https://cn.vuejs.org/api/sfc-script-setup.html)
- 官網給的工具
- 聲明vue2 和 vue3
- 指令速覽
- Mustache -- 語法
- v-once -- 只渲染一次
- v-text -- 插入文本
- v-html -- 渲染html
- v-pre -- 顯示原始的Mustache標簽
- v-cloak -- 遮蓋
- v-memo(新)-- 緩存指定值
- v-if/v-show -- 條件渲染
- v-for -- 循環
- v-bind -- 知識
- v-bind -- 修飾符
- v-on -- 點擊事件
- v-model -- 雙向綁定
- 其他基礎知識速覽
- 快速使用
- 常識知識點
- key -- 作用 (后續要更新)
- computed -- 計算屬性
- watch -- 偵聽
- 防抖和節流
- vue3 -- 生命周期
- vue-cli 和 vite 項目搭建方法
- vite -- 導入動態圖片
- 組件
- 單文件組件 -- SFC
- 組件通信 -- porp
- 組件通信 -- $emit
- 組件通信 -- Provide / Inject
- 組件通信 -- 全局事件總線mitt庫
- 插槽 -- slot
- 整體使用案例
- 動態組件 -- is
- keep-alive
- 分包 -- 異步組價
- mixin -- 混入
- v-model-- 組件
- 使用計算屬性
- v-model -- 自定義修飾符
- Suspense -- 實驗屬性
- Teleport -- 指定掛載
- 組件實例 -- $ 屬性
- Option API VS Composition API
- Setup -- 組合API 入口
- api -- reactive
- api -- ref
- 使用ref 和 reactive 場景
- api -- toRefs 和 toRef
- api -- readonly
- 判斷性 -- API
- 功能性 -- API
- api -- computed
- api -- $ref 使用
- api -- 生命周期
- Provide 和 Inject
- watch
- watchEffect
- watch vs. watchEffect
- 簡單使用composition Api
- 響應性語法糖
- css -- 功能
- 修改css -- :deep() 和 var
- Vue3.2 -- 語法
- ts -- vscode 配置
- attrs/emit/props/expose/slots -- 使用
- props -- defineProps
- props -- defineProps Ts
- emit -- defineEmits
- emit -- defineEmits Ts
- $ref -- defineExpose
- slots/attrs -- useSlots() 和 useAttrs()
- 自定義指令
- Vue -- 插件
- Vue2.x 和 Vue3.x 不同點
- $children -- 移除
- v-for 和 ref
- attribute 強制行為
- 按鍵修飾符
- v-if 和 v-for 優先級
- 組件使用 v-model -- 非兼容
- 組件
- h -- 函數
- jsx -- 編寫
- Vue -- Router
- 了解路由和vue搭配
- vueRouter -- 簡單實現
- 安裝即使用
- 路由懶加載
- router-view
- router-link
- 路由匹配規則
- 404 頁面配置
- 路由嵌套
- 路由組件傳參
- 路由重定向和別名
- 路由跳轉方法
- 命名路由
- 命名視圖
- Composition API
- 路由守衛
- 路由元信息
- 路由其他方法 -- 添加/刪除/獲取
- 服務器配置映射
- 其他
- Vuex -- 狀態管理
- Option Api -- VUEX
- composition API -- VUEX
- module -- VUEX
- 刷新后vuex 數據同步
- 小技巧
- Pinia -- 狀態管理
- 開始使用
- pinia -- state
- pinia -- getter
- pinia -- action
- pinia -- 插件 ??
- Vue 源碼解讀
- 開發感悟
- 練手項目