Vue元件使用技巧 is屬性

2021-10-05 10:10:19 字數 1361 閱讀 2825

首先,提起vue的元件,大家都不會陌生,使用起來就像使用普通標籤一樣簡單,功能也可以隨意定製,真的是很方便.

但是基於html語法,一些特定的標籤,比如等.

標籤下,只有標籤是有效的,同理表現下只有有效,那麼如果我們想加入自定義的元件該怎麼辦呢.

這種方法顯然是不太適合的:

>

>

my-component

>

ul>

這時候就是is出場的時候了.

引用官方的示例:

>

vue.

component

("todo-item",}\

remove\\'

, props:

['title']}

);let vm =

newvue(,

,], nexttodoid:4}

, methods:);

this

.newtodotext ="";

}}})

;

頁面效果:

這裡我們使用了①

"todo-item" v-

for=

"(todo, index) in todos"

:key=

"index"

:title=

"todo.title" @remove=

"todos.splice(index, 1)"

>

<

/li>

而不是②

v-for

="(item, index) in todos"

:key

="item.id"

:title

="item.title"

>

todo-item

>

由於①使用的是標籤,所以在中是沒有任何問題的,但是這裡的關鍵在於is="todo-item"屬性,它實現的效果和②是相同的,但是重要的是它不會引起瀏覽器解析的錯誤.

Vue 元件例項屬性的使用

因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會貼需要...

Vue 元件例項屬性的使用

因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會貼需要...

Vue元件 元件的屬性

在html中使用元素,會有一些屬性,如class,id,還可以繫結事件,自定義元件也是可以的。當在乙個元件中,使用了其他自定義元件時,就會利用子元件的屬性和事件來和父元件進行資料交流。比如,子元件需要某個資料,就在內部定義乙個prop屬性,然後父元件就像給html元素指定特性值一樣,把自己的data...