vue元件中的「 」 「 」 「 」屬性

2022-08-11 13:39:14 字數 761 閱讀 9566

冒號屬性

:是指令 v-bind 的縮寫,是為了動態繫結資料,用於響應式地更新 html 特性。

加了冒號,後面是變數或表示式;不加冒號的是字串。

如圖:將home元件中的 probe-type 的值傳給子元件scroll的時候,需要的是乙個數字型別,所以這裡要加上:,否則3就會被當成乙個字串

當我們去掉:的時候,會報錯:

因此如果不使用冒號,等號後面就可以寫字串等原始型別資料。這時就無法進行動態繫結資料了。

2. @屬性

@ 是指令 v-on 的縮寫,用來監聽dom事件,比如點選、拖拽、鍵盤事件等等。

3. v-on的修飾符.

修飾符是以半形句號.指明的特殊字尾,用於指出乙個指令應該以特殊方式繫結。vue提供了修飾符來幫助我們方便的處理一些事件:

.stop - 呼叫 event.stoppropagation()。

.prevent - 呼叫 event.preventdefault()。

. - 只當事件是從特定鍵觸發時才觸發**。

.native - 監聽元件根元素的原生事件。

.once - 只觸發一次**。

官方文件:

Vue元件 元件的屬性

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

Vue中router link元件的屬性

以下面的路由配置為例,介紹一下router link元件的屬性 routes 路由的目標,值可以是乙個字串,也可以是描述目標位置的物件,觸發 預設click觸發 導航會立刻把to的值傳送給router.push 方法。home 首頁router link to 首頁router link boole...

vue元件中prop屬性

所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結 父級 prop 的更新會向下流動到子元件中,但是反過來則不行。每次父級元件發生更新時,子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在乙個子元件內部改變 prop。在元件中修改 prop 傳遞過來的資料 vu...