天天看點

vue的元件及其使用方法

​vue​

​​作為一款優秀的前端開發架構,在元件方面确實比純粹的​

​html​

​​要友善得多。

以往在敲前端代碼的時候,我們不可避免的要在不同的頁面使用同樣的代碼,比如導航欄、側邊欄等。

雖然可以在一個頁面中内置另外的頁面,但是這樣的操作也是相當麻煩,而我經常為了偷懶便直接粘貼複制了,而這卻導緻了頁面代碼非常冗長且備援嚴重,修改起來也是非常的麻煩,往往一個地方修改要改好幾個頁面。

而今,學了​​

​vue​

​​的元件,便可以很輕松地解決這個問題。

元件顧名思義,就是用來組合的一些元素。

我們可以将頁面上的每一塊制作成一個元件,然後隻要再調整布局将整這些元件拼湊成我們想要的頁面布局即可。

那麼怎麼使用元件呢?

vue的元件及其使用方法

我們下面都根據上圖來講。

直接定位到下面的​

​components​

​這一項。

可以看到,首先我們定義了一個名叫​

​todoItem​

​的元件,這是一個在頁面内定義的元件,隻能在頁面内進行重用,但是對于其他頁面而言卻是用不了的。這似乎不是我們想要的。

别急,往下我們就可以看到我們有第二個叫​

​hello​

​​的元件,可以看到我們并沒有像上面一樣,而隻是寫了一個​

​helloWorld​

​,這可不是一個字元串,可以将其了解為一個變量,這個變量就是一個元件,而這個變量正是在第一行定義的,說是定義也不準确,可以當成是一種引入。

它引入了另外一個頁面,那個頁面也是一個​

​.vue​

​檔案。于是這個頁面在使用這個元件的時候就會将這個元件的内容顯示到頁面上。

那麼怎麼使用呢?

很簡單,可以直接當成​

​html​

​的标簽一樣使用。

vue的元件及其使用方法