EP62 - 渲染函數與 JSX

閱讀時間約 30 分鐘
Render Functions & JSX,渲染函數不知道要幹嘛的?
JSX也沒很清楚他是什麼拉~ 快來看看

Vue 建議在大多數情況下使用模板來構建應用程式。然而,有時我們需要 JavaScript 的全程式化功能,這時我們可以使用渲染函數。

如果你對虛擬 DOM 和渲染函數的概念還不熟悉,請先閱讀《渲染機制》這一章。

基本用法 - Basic Usage

創建 Vnode - Creating Vnodes

Vue 提供了一個 h() 函數來創建 vnode:

import { h } from 'vue'

const vnode = h(
'div', // 類型
{ id: 'foo', class: 'bar' }, // 屬性
[
/* 子元素 */
]
)

h() 是 hyperscript 的簡寫,意思是“生成 HTML(超文本標記語言)的 JavaScript”。這個名字繼承了許多虛擬 DOM 實現的約定。一個更具描述性的名稱可以是 createVNode(),但在渲染函數中多次調用這個函數時,較短的名稱會更有幫助。

h() 函數設計得非常靈活:

// 除了類型以外的所有參數都是可選的
h('div')
h('div', { id: 'foo' })

// 在屬性中可以使用屬性和屬性(props)
// Vue 會自動選擇正確的方式來分配它
h('div', { class: 'bar', innerHTML: 'hello' })

// 屬性修改器如 `.prop` 和 `.attr` 可以用 `.` 和 `^` 前綴分別添加
h('div', { '.name': 'some-name', '^width': '100' })

// class 和 style 有與模板中相同的對象/數組值支持
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// 事件監聽器應以 onXxx 形式傳遞
h('div', { onClick: () => {} })

// 子元素可以是一個字符串
h('div', { id: 'foo' }, 'hello')

// 沒有屬性時可以省略屬性參數
h('div', 'hello')
h('div', [h('span', 'hello')])

// 子元素數組可以包含混合的 vnode 和字符串
h('div', ['hello', h('span', 'hello')])

生成的 vnode 具有以下結構:

const vnode = h('div', { id: 'foo' }, [])

vnode.type // 'div'
vnode.props // { id: 'foo' }
vnode.children // []
vnode.key // null
注意:完整的 VNode 介面包含許多其他內部屬性,但強烈建議避免依賴除這裡列出的屬性之外的任何屬性。這可以避免內部屬性更改時意外中斷。

聲明渲染函數 - Declaring Render Functions

使用 Composition API 與模板時,setup() 鉤子的返回值用於向模板公開數據。然而,使用渲染函數時,我們可以直接返回渲染函數:

import { ref, h } from 'vue'

export default {
props: {
/* ... */
},
setup(props) {
const count = ref(1)

// 返回渲染函數
return () => h('div', props.msg + count.value)
}
}

渲染函數在 setup() 中聲明,因此它自然可以訪問屬性和在相同作用域內聲明的任何響應性狀態。

除了返回單個 vnode 外,你還可以返回字符串或數組:

export default {
setup() {
return () => 'hello world!'
}
}
import { h } from 'vue'

export default {
setup() {
// 使用數組返回多個根節點
return () => [
h('div'),
h('div'),
h('div')
]
}
}
提示:確保返回一個函數,而不是直接返回值!setup() 函數每個組件只調用一次,而返回的渲染函數將被調用多次。

如果渲染函數組件不需要任何實例狀態,它們也可以直接聲明為一個函數以簡化:

function Hello() {
return 'hello world!'
}

沒錯,這是一個有效的 Vue 組件!有關此語法的更多詳細信息,請參見函數式組件

Vnode 必須唯一 - Vnodes Must Be Unique

組件樹中的所有 vnode 必須唯一。這意味著以下渲染函數是無效的:

function render() {
const p = h('p', 'hi')
return h('div', [
// 嚇人的 - 重複的 vnode!
p,
p
])
}

如果你真的想多次複製相同的元素/組件,可以使用工廠函數。例如,以下渲染函數是一種有效的方式來渲染 20 個相同的段落:

function render() {
return h(
'div',
Array.from({ length: 20 }).map(() => {
return h('p', 'hi')
})
)
}

JSX / TSX

JSX 是 JavaScript 的一種類 XML 擴展,允許我們這樣編寫代碼:

const vnode = <div>hello</div>

在 JSX 表達式中,使用大括號來嵌入動態值:

const vnode = <div id={dynamicId}>hello, {userName}</div>

create-vue 和 Vue CLI 都有預配置 JSX 支援的專案腳手架選項。如果你是手動配置 JSX,請參閱 @vue/babel-plugin-jsx 的文檔以獲取詳細信息。

雖然 JSX 首次由 React 引入,但 JSX 實際上並沒有定義運行時語義,可以編譯成各種不同的輸出。如果你以前使用過 JSX,請注意 Vue 的 JSX 轉換與 React 的不同,因此你不能在 Vue 應用中使用 React 的 JSX 轉換。以下是一些與 React JSX 的顯著不同點:

  • 你可以使用 HTML 屬性如 classfor 作為 props,無需使用 classNamehtmlFor
  • 傳遞子元素給組件(即插槽)方式不同

Vue 的類型定義還提供了 TSX 使用的類型推斷。在使用 TSX 時,確保在 tsconfig.json 中指定 "jsx": "preserve",以便 TypeScript 保留 JSX 語法,讓 Vue JSX 轉換處理。

JSX 類型推斷 - JSX Type Inference

與轉換類似,Vue 的 JSX 也需要不同的類型定義。

從 Vue 3.4 開始,Vue 不再隱式註冊全局 JSX 命名空間。要指示 TypeScript 使用 Vue 的 JSX 類型定義,請確保在 tsconfig.json 中包含以下內容:

{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "vue"
// ...
}
}

你也可以通過在文件頂部添加 /* @jsxImportSource vue */ 註釋來按文件選擇加入。

如果有依賴全局 JSX 命名空間存在的代碼,可以通過顯式導入或引用 vue/jsx 在你的專案中註冊全局 JSX 命名空間,從而保留完全與 3.4 之前一致的全局行為。

渲染函數實踐 - Render Function Recipes

以下是一些將模板功能轉換為等效渲染函數/JSX 的常見實踐。

v-if 模板:

<template>
<div>
<div v-if="ok">yes</div>
<span v-else>no</span>
</div>
</template>

等效渲染函數/JSX:

// 渲染函數
h('div', [ok.value ? h('div', 'yes') : h('span', 'no')])

// JSX
<div>{ok.value ? <div>yes</div> : <span>no</span>}</div>

v-for 模板:

<template>
<ul>
<li v-for="{ id, text } in items" :key="id">
{{ text }}
</li>
</ul>
</template>

等效渲染函數/JSX:

// 渲染函數
h(
'ul',
items.value.map(({ id, text }) => {
return h('li', { key: id }, text)
})
)

// JSX
<ul>
{items.value.map(({ id, text }) => {
return <li key={id}>{text}</li>
})}
</ul>

v-on

以 "on" 開頭並接著大寫字母的屬性名被視為事件監聽器。例如,onClick 等同於模板中的 @click。

// 渲染函數
h(
'button',
{
onClick(event) {
/* ... */
}
},
'Click Me'
)

// JSX
<button onClick={(event) => { /* ... */ }}>
Click Me
</button>

事件修飾符 - Event Modifiers`

對於 .passive、.capture 和 .once 事件修飾符,可以在事件名後使用駝峰式拼寫來連接。例如:

// 渲染函數
h('input', {
onClickCapture() { /* 捕獲模式的監聽器 */ },
onKeyupOnce() { /* 只觸發一次 */ },
onMouseoverOnceCapture() { /* 一次 + 捕獲 */ }
})

// JSX
<input
onClickCapture={() => {}}
onKeyupOnce={() => {}}
onMouseoverOnceCapture={() => {}}
/>

對於其他事件和鍵盤修飾符,可以使用 withModifiers 助手:

import { withModifiers } from 'vue'

// 渲染函數
h('div', {
onClick: withModifiers(() => {}, ['self'])
})

// JSX
<div onClick={withModifiers(() => {}, ['self'])} />

組件 - Components

要為組件創建 vnode,傳給 h() 的第一個參數應該是組件定義。這意味著在使用渲染函數時,不需要註冊組件 - 可以直接使用導入的組件:

import Foo from './Foo.vue'
import Bar from './Bar.jsx'

// 渲染函數
function render() {
return h('div', [h(Foo), h(Bar)])
}

// JSX
function render() {
return (
<div>
<Foo />
<Bar />
</div>
)
}

動態組件使用渲染函數也很簡單:

import Foo from './Foo.vue'
import Bar from './Bar.jsx'

// 渲染函數
function render() {
return ok.value ? h(Foo) : h(Bar)
}

// JSX
function render() {
return ok.value ? <Foo /> : <Bar />
}

如果某個組件是按名稱註冊且無法直接導入(例如由庫全局註冊),可以使用 resolveComponent() 助手來編程解決。

渲染插槽 - Rendering Slots

在渲染函數中,插槽可以從 setup() 上下文中訪問。slots 對象上的每個插槽都是一個返回 vnode 陣列的函數:

export default {
props: ['message'],
setup(props, { slots }) {
return () => [
// 默認插槽:
// <div><slot /></div>
h('div', slots.default()),

// 命名插槽:
// <div><slot name="footer" :text="message" /></div>
h('div', slots.footer({ text: props.message }))
]
}
}

JSX 等效:

// 默認
<div>{slots.default()}</div>

// 命名
<div>{slots.footer({ text: props.message })}</div>

傳遞插槽 - Passing Slots

將子元素傳遞給組件與將子元素傳遞給元素略有不同。我們需要傳遞一個插槽函數,或者一個插槽函數的對象。插槽函數可以返回任何正常渲染函數可以返回的內容,這些內容將在子組件中訪問時被規範化為 vnode 陣列。

// 單個默認插槽
h(MyComponent, () => 'hello')

// 命名插槽
h(MyComponent, null, {
default: () => 'default slot',
foo: () => h('div', 'foo'),
bar: () => [h('span', 'one'), h('span', 'two')]
})

JSX 等效:

// 默認
<MyComponent>{() => 'hello'}</MyComponent>

// 命名
<MyComponent>{{
default: () => 'default slot',
foo: () => <div>foo</div>,
bar: () => [<span>one</span>, <span>two</span>]
}}</MyComponent>

傳遞函數形式的插槽允許它們由子組件懶加載,這使得插槽的依賴項由子組件而不是父組件進行跟踪,從而使更新更準確高效。

作用域插槽 - Scoped Slots

在父組件中渲染作用域插槽時,將插槽傳遞給子組件。注意插槽現在有一個參數 text。插槽將在子組件中被調用,並將子組件的數據傳遞給父組件。

// 父組件
export default {
setup() {
return () => h(MyComp, null, {
default: ({ text }) => h('p', text)
})
}
}

記得傳遞 null 以避免將插槽視為道具。

// 子組件
export default {
setup(props, { slots }) {
const text = ref('hi')
return () => h('div', null, slots.default({ text: text.value }))
}
}

JSX 等效:

<MyComponent>{{
default: ({ text }) => <p>{ text }</p>
}}</MyComponent>

內建組件 - Built-in Components

內建組件如 <KeepAlive>、<Transition>、<TransitionGroup>、<Teleport> 和 <Suspense> 必須導入才能在渲染函數中使用:

import { h, KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'

export default {
setup () {
return () => h(Transition, { mode: 'out-in' }, /* ... */)
}
}

v-model

v-model 指令在模板編譯期間被擴展為 modelValue 和 onUpdate

道具 - 我們需要自己提供這些道具:

export default {
props: ['modelValue'],
emits: ['update:modelValue'],
setup(props, { emit }) {
return () =>
h(SomeComponent, {
modelValue: props.modelValue,
'onUpdate:modelValue': (value) => emit('update:modelValue', value)
})
}
}

自定義指令 - Custom Directives

可以使用 withDirectives 將自定義指令應用於 vnode:

import { h, withDirectives } from 'vue'

// 自定義指令
const pin = {
mounted() { /* ... */ },
updated() { /* ... */ }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
[pin, 200, 'top', { animate: true }]
])

如果指令按名稱註冊且無法直接導入,可以使用 resolveDirective 助手進行解析。

模板引用 - Template Refs

使用組合式 API 時,模板引用可以通過將 ref() 本身作為道具傳給 vnode 來創建:

import { h, ref } from 'vue'

export default {
setup() {
const divEl = ref()

// <div ref="divEl">
return () => h('div', { ref: divEl })
}
}

函數型元件 - Functional Components

函數型元件是一種不具有自己狀態的元件形式。它們像純粹的函數一樣:傳入 props,傳出 vnodes。它們在渲染時不會創建元件實例(即沒有 this),也不會有常規的元件生命周期鉤子。

要創建函數型元件,我們使用一個普通的函數,而不是選項物件。這個函數實際上就是該元件的渲染函數。

函數型元件的函數簽名與 setup() 鉤子相同:

function MyComponent(props, { slots, emit, attrs }) {
// ...
}

大多數常規的元件配置選項在函數型元件中不可用。不過,我們可以通過將 propsemits 當作屬性來定義它們:

MyComponent.props = ['value']
MyComponent.emits = ['click']

如果沒有指定 props 選項,則傳遞給函數的 props 物件將包含所有屬性,這些屬性將與 attrs 相同。除非指定 props 選項,否則屬性名稱不會被標準化為駝峰式命名。

對於有明確 props 的函數型元件,屬性繼承與常規元件的行為相似。然而,對於沒有明確指定 props 的函數型元件,只有 classstyleonXxx 事件監聽器會從 attrs 繼承。無論如何,可以將 inheritAttrs 設為 false 來禁用屬性繼承:

MyComponent.inheritAttrs = false

函數型元件可以像常規元件一樣註冊和使用。如果將一個函數作為 h() 的第一個參數傳遞,它將被視為函數型元件。

打字函數型元件 - Typing Functional Components

函數型元件可以根據是否有命名來進行打字。Vue 的官方擴展也支持對正確打字的函數型元件進行類型檢查,當它們在 SFC 模板中被消費時。

命名的函數型元件 - Named Functional Component

import type { SetupContext } from 'vue'

type FComponentProps = {
message: string
}

type Events = {
sendMessage(message: string): void
}

function FComponent(
props: FComponentProps,
context: SetupContext<Events>
) {
return (
<button onClick={() => context.emit('sendMessage', props.message)}>
{props.message} {' '}
</button>
)
}

FComponent.props = {
message: {
type: String,
required: true
}
}

FComponent.emits = {
sendMessage: (value: unknown) => typeof value === 'string'
}

匿名的函數型元件 - Anonymous Functional Component

import type { FunctionalComponent } from 'vue'

type FComponentProps = {
message: string
}

type Events = {
sendMessage(message: string): void
}

const FComponent: FunctionalComponent<FComponentProps, Events> = (
props,
context
) => {
return (
<button onClick={() => context.emit('sendMessage', props.message)}>
{props.message} {' '}
</button>
)
}

FComponent.props = {
message: {
type: String,
required: true
}
}

FComponent.emits = {
sendMessage: (value) => typeof value === 'string'
}
所以現在除了模板還有渲染函數跟JSX的寫法啊!
差異不知道是什麼?

寫法的差異?

在 Vue.js 中,現在可以使用模板(template)、渲染函數(render function)和 JSX 來定義組件的視圖。這三種方法各有優缺點,適用於不同的場景。下面是它們的差異和適用場合:

1. 模板(template)

特點:

  1. 直觀和簡單:模板語法非常接近 HTML,對於熟悉 HTML 的開發者來說,上手容易。
  2. 限制較少:模板語法涵蓋了大多數常見的用例,適合構建大部分的 Vue 組件。
  3. 模板編譯:Vue 會在編譯階段將模板轉換為渲染函數。

適用場合:

  • 大多數情況下,尤其是組件邏輯相對簡單、視圖結構清晰的情況。

例子:

<template>
<div class="container">
<h1>Hello, Vue!</h1>
<p>This is a paragraph.</p>
</div>
</template>

<script>
export default {
name: 'MyComponent'
}
</script>

<style scoped>
.container {
padding: 20px;
}
</style>

2. 渲染函數(render function)

特點:

  1. 完全靈活:渲染函數可以使用 JavaScript 完全控制組件的渲染邏輯。
  2. 高靈活性:適合需要高度自定義的情況,支持更複雜的動態視圖生成。
  3. 代碼可讀性:對於不熟悉 JavaScript 的開發者來說,可能不如模板直觀。

適用場合:

  • 需要完全自定義的視圖邏輯,或者當模板語法無法滿足需求時。

例子:

export default {
render(h) {
return h('div', { class: 'container' }, [
h('h1', 'Hello, Vue!'),
h('p', 'This is a paragraph.')
]);
}
}

3. JSX

特點:

  1. 語法糖:JSX 是渲染函數的語法糖,更接近模板語法,但本質上是渲染函數。
  2. 靈活且直觀:結合了模板的直觀性和渲染函數的靈活性。
  3. 需要配置:需要 Babel 插件來支持 JSX 語法。

適用場合:

  • 需要靈活的視圖邏輯,但希望代碼結構接近模板語法的情況。

例子:

import { defineComponent } from 'vue';

export default defineComponent({
render() {
return (
<div class="container">
<h1>Hello, Vue!</h1>
<p>This is a paragraph.</p>
</div>
);
}
});

比較總結

  1. 模板(template)
    • 優點:簡單、直觀、上手容易。
    • 缺點:靈活性較低,適合大多數情況但不適合高度自定義需求。
  2. 渲染函數(render function)
    • 優點:靈活性最高,完全控制渲染邏輯。
    • 缺點:可讀性較低,對不熟悉 JavaScript 的開發者不友好。
  3. JSX
    • 優點:結合了模板的直觀性和渲染函數的靈活性。
    • 缺點:需要配置 Babel 插件,對不熟悉 JSX 的開發者可能有學習成本。

選擇建議

  • 如果項目需求簡單,使用模板語法可以提高開發效率和代碼可讀性。
  • 如果需要高度自定義的視圖邏輯,且對 JavaScript 很熟悉,可以考慮使用渲染函數。
  • 如果需要靈活性,但又希望代碼結構接近模板語法,可以考慮使用 JSX。

總之,根據項目的需求和開發者的習慣來選擇最合適的方式,三者都是 Vue.js 提供的強大工具,合理使用可以使開發更加高效和靈活。

avatar-img
2會員
70內容數
分享生活趣事~
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
卡關的人生 的其他內容
Vue 渲染機制使用虛擬 DOM 將模板轉換為實際的 DOM 節點,並高效地更新這些節點。虛擬 DOM 是 UI 的內存表示,與真實 DOM 同步。渲染過程分為編譯、掛載和修補三個步驟。編譯將模板轉為渲染函數,掛載遍歷虛擬 DOM 樹並構建真實 DOM 樹,修補則比較新舊虛擬 DOM 樹並應用變更。
Vue 的反應性系統利用了 JavaScript 的 Proxy 和 getter/setter 機制,使得對物件屬性的變更能夠自動觸發視圖更新。這種無侵入性的設計使得狀態管理變得簡單且直觀,無需手動同步視圖。反應性的核心在於追蹤依賴項和觸發副作用。
Composition API 是 Vue 3 的一組 API,允許使用導入的函數編寫 Vue 組件,涵蓋反應性 API、生命週期鉤子和依賴注入。它主要在單文件組件的 <script setup> 語法中使用。
Vue 是一個靈活且可逐步採用的框架,適用於不同使用情境以平衡技術棧複雜度、開發者體驗和最終性能。Vue 可以作為獨立腳本文件使用,不需構建步驟,適合簡單前端邏輯。也可用來構建標準 Web 組件,嵌入到任何 HTML 頁面中。對於需要豐富互動性的應用,可構建單頁應用程式 (SPA)。
項目 API 涉及整體應用的全局屬性及配置,通常透過 TypeScript 的模組擴充來增強全局屬性,如 app.config.globalProperties。
在使用 Vue 組件 API 和 TypeScript 的開發中,通常會遇到類型錯誤和需要 debug 的情況。組件 API 下的 TypeScript 提供了更強的型別檢查和類型推斷功能,這有助於減少錯誤。
Vue 渲染機制使用虛擬 DOM 將模板轉換為實際的 DOM 節點,並高效地更新這些節點。虛擬 DOM 是 UI 的內存表示,與真實 DOM 同步。渲染過程分為編譯、掛載和修補三個步驟。編譯將模板轉為渲染函數,掛載遍歷虛擬 DOM 樹並構建真實 DOM 樹,修補則比較新舊虛擬 DOM 樹並應用變更。
Vue 的反應性系統利用了 JavaScript 的 Proxy 和 getter/setter 機制,使得對物件屬性的變更能夠自動觸發視圖更新。這種無侵入性的設計使得狀態管理變得簡單且直觀,無需手動同步視圖。反應性的核心在於追蹤依賴項和觸發副作用。
Composition API 是 Vue 3 的一組 API,允許使用導入的函數編寫 Vue 組件,涵蓋反應性 API、生命週期鉤子和依賴注入。它主要在單文件組件的 <script setup> 語法中使用。
Vue 是一個靈活且可逐步採用的框架,適用於不同使用情境以平衡技術棧複雜度、開發者體驗和最終性能。Vue 可以作為獨立腳本文件使用,不需構建步驟,適合簡單前端邏輯。也可用來構建標準 Web 組件,嵌入到任何 HTML 頁面中。對於需要豐富互動性的應用,可構建單頁應用程式 (SPA)。
項目 API 涉及整體應用的全局屬性及配置,通常透過 TypeScript 的模組擴充來增強全局屬性,如 app.config.globalProperties。
在使用 Vue 組件 API 和 TypeScript 的開發中,通常會遇到類型錯誤和需要 debug 的情況。組件 API 下的 TypeScript 提供了更強的型別檢查和類型推斷功能,這有助於減少錯誤。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節旨在介紹TypeScript中的函數,包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節,讀者可以學習到如何在TypeScript中使用不同的方式來定義函數,如函數聲明、函數表達式、箭頭函數和匿名函數等。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節旨在介紹TypeScript中的函數,包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節,讀者可以學習到如何在TypeScript中使用不同的方式來定義函數,如函數聲明、函數表達式、箭頭函數和匿名函數等。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找