我在學習vue的過程中，一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑，原因是有沒有用vite建構，在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。
起手式
1.非建構:使用cdn
在html的header中插入以下script標籤
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
2.建構:用npm安裝
npm create vue@latest元件的檔案:SFC與js
使用建構與非建構的方式的第一個差異，就是用建構的方式就可以用单文件组件 (SFC)的方式來寫元件，而非建構的方式則不能。
1.建構:寫在SFC 中，其檔案結尾為vue。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>
2.非建構:寫在另一個JS檔中，或是跟父元件寫在一起。
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `
<button @click="count++">
You clicked me {{ count }} times.
</button>`
// 也可以针对一个 DOM 内联模板：
// template: '#my-template-element'
}
元件的註冊
元件有分成全域元件與區域元件。
全域元件都是在用app中的component方法
import { createApp } from 'vue'
const app = createApp({})
app.component(
// 注册的名字
'MyComponent',
// 组件的实现
{
/* ... */
}
)
或是註冊import進的SFC
import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)
而區域元件則是在父元件中用component
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
SFC(也就是建構的)有提供個酷東西<script setup>，用了之後元件就可以直接使用，不用註冊了。
<script setup>
import ComponentA from './ComponentA.vue'
</script>
<template>
<ComponentA />
</template>
元件的使用
如果是用非建構的方式，要注意是否是在DOM中寫模板(也就是元件要寫入的html)。如果是的話要注意命名格式與需要遵循瀏覽器的html解析行為。
命名格式 - kebab-case
在模板中要使用 kebab-case (短横线连字符) 形式
JavaScript 中的 camelCase
const BlogPost = {
props: ['postTitle'],
emits: ['updatePost'],
template: `
<h3>{{ postTitle }}</h3>
`
}
HTML 中的 kebab-case
<blog-post post-title="hello!" @update-post="onUpdatePost"></blog-post>
瀏覽器的html解析行為
要使用有開頭與結尾的兩個標籤
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
建構的寫法
接著建構的寫法來了
1.不會有在DOM中寫模板的問題，在模板中一律都一樣用PascalCase
2.不用顧慮瀏覽器的感受，用一個標籤加上/就可以了
<h1>Here is a child component!</h1>
<ButtonCounter />
<ButtonCounter />
<ButtonCounter />
結語
相信大家也發現，如果用非建構的方式要去注意很多小細節，像是區域元件要在父元件註冊、然後在模板使用也要注意寫大小寫得不同寫法，在開發上沒有這麼的順手。我想vue的開發團隊也有聽到大家的心聲，所以讓我們再用建構的方式的時候，可以用更簡潔直覺的方式使用。
