1 Vue 元件的使用

使用 kebab-case

vue.
component
('my-component-name'
,)

當使用 kebab-case (短橫線分隔命名) 定義乙個元件時，你也必須在引用這個自定義元素時使用 kebab-case，例如。

使用 pascalcase

vue.component('mycomponentname', )

當使用 pascalcase (首字母大寫命名) 定義乙個元件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說和都是可接受的。注意，儘管如此，直接在 dom (即非字串的模板) 中使用時只有 kebab-case 是有效的。

全域性註冊使用

"components-demo"
>
>
button-counter
>
>
button-counter
>
>
button-counter
>
div>

// 定義乙個名為 button-counter 的新元件
vue.
component
('button-counter',}
,  template:
'you clicked me } times.'})
newvue
()

用事件丟擲乙個值

>
:style=""
>
v-for
="(post, index) in posts"
:key
='index'
:post
="post"
@set-font-size
="setfontsize"
>
blog-post
>
div>
div>

vue.
component
('blog-post',)
newvue(,
,]},
methods:},
})

在元件上使用 v-model

>
v-model
="inputval"
>
input-mod
>
>
}div
>
div>

vue.
component
('input-mod',)
newvue(,
})

1 Vue 基礎指令

1 vue 指令 1 v model 主要在表單中使用，文字框 teaxare 單選下拉等 2 v text 文字渲染類似 3 v show 控制dom顯示隱藏 display none,display block 4 v if 也可以控制dom 顯示隱藏，如果dom 不顯示整個dom就沒有。...

1 Vue 基礎指令

1 vue介紹和引入js

一 vue是什麼？vue 讀音 vju 類似於 view 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，vue 也...

1 Vue 元件的使用

1 Vue 基礎指令

1 Vue 基礎指令

1 vue介紹和引入js

相關推薦