如何寫乙個Vue元件

2021-09-09 02:14:46 字數 1265 閱讀 9444

***寫的是以.vue結尾的單檔案元件的寫法,是基於webpack構建的專案。

template:模板

js:邏輯

css :樣式

每個元件都有屬於自己的模板,js和樣式。如果將乙個頁面比喻成一間房子的話,元件就是房子裡的客廳、臥室、廚房、廁所。如果把廚房單獨拿出來的話,元件又可以是刀、油煙機...等等。就是說頁面是由元件構成的,而元件也可以是元件構成的。這樣就可以非常的靈活,耦合性也非常的低。

vue.component('******-counter', 

},methods: ,

created () ,

computed:

})

那麼template是用來幹嘛的呢?

js部分的用法

export default 

},methods: ,

created () ,

computed:

}// 在這裡很明顯js部分就是對應的原生寫法內的非template部分了。

// export default這個是es6的模組寫法,不懂的可以先去了解es6的模組化

css部分

要怎麼在其它元件引用該元件?

}

這裡box.vue裡引入了button.vue的元件,並通過components註冊,在box.vue使用時只要使用註冊時候的名稱即可。

父元件如何向子元件傳遞資料?

可以通過prop向子元件傳值。

子元件和父元件的互動其實還有很多,例如子元件要怎麼修改父元件傳遞的值?

因為vue的資料是單向的,所以子元件是不允許修改父元件的值的,官方是通過事件的形式修改的,就是父元件在子元件繫結乙個自定義事件v-on:event1="event1",

然後子元件通過this.$emit('event1')觸發修改。可以理解為修改父元件傳遞的值一定要發生在父元件所在的作用域內。

父元件怎麼獲取子元件的例項?

這裡父元件可以在子元件定義ref,在通過this.$refs.***獲取對應的子元件例項。

而子元件可通過this.$parent獲取父元件的例項。

如何寫乙個Stack?

1.棧是陣列 2.先進後出 3.出棧 4.入棧 手寫乙個雙向鍊錶 棧 public class stackpopandpush public stackpopandpush int lens 返回元素個數 public intsize 返回陣列長度,容量,棧資料長 private intcapaci...

如何寫乙個Vue自定義指令

vue除了核心功能缺省內置的指令 vue 也允許註冊自定義指令。自定義指令是用來操作dom的。儘管vue推崇資料驅動檢視的理念,但並非所有情況都適合資料驅動。自定義指令就是一種有效的補充和擴充套件,不僅可用於定義任何的dom操作,並且是可復用的。寫乙個自定義指令的兩種方式 全域性指令 通過 vue....

如何寫乙個鍊錶

有的時候,處於記憶體中的資料並不是連續的。那麼這時候,我們就需要在 資料結構中新增乙個屬性,這個屬性會記錄下面乙個資料的位址。有了這個位址之後,所有的資料就像一條鍊子一樣串起來了,那麼這個位址屬性就起到了穿線鏈結的作用。相比較普通的線性結構,鍊錶結構的優勢是什麼呢?我們可以總結一下 1 單個節點建立...