vue的元件及其使用方法

2022-09-07 15:54:10 字數 1074 閱讀 1457

vue作為一款優秀的前端開發框架,在元件方面確實比純粹的html要方便得多。

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

雖然可以在乙個頁面中內建另外的頁面,但是這樣的操作也是相當麻煩,而我經常為了偷懶便直接貼上複製了,而這卻導致了頁面**非常冗長且冗餘嚴重,修改起來也是非常的麻煩,往往乙個地方修改要改好幾個頁面。

而今,學了vue的元件,便可以很輕鬆地解決這個問題。

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

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

那麼怎麼使用元件呢?

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

直接定位到下面的components這一項。

可以看到,首先我們定義了乙個名叫todoitem的元件,這是乙個在頁面內定義的元件,只能在頁面內進行重用,但是對於其他頁面而言卻是用不了的。這似乎不是我們想要的。

別急,往下我們就可以看到我們有第二個叫hello的元件,可以看到我們並沒有像上面一樣,而只是寫了乙個helloworld,這可不是乙個字串,可以將其理解為乙個變數,這個變數就是乙個元件,而這個變數正是在第一行定義的,說是定義也不準確,可以當成是一種引入。

它引入了另外乙個頁面,那個頁面也是乙個.vue檔案。於是這個頁面在使用這個元件的時候就會將這個元件的內容顯示到頁面上。

那麼怎麼使用呢?

很簡單,可以直接當成html的標籤一樣使用。

效果如圖:

詳解vue全域性元件與區域性元件使用方法

vue全域性 區域性註冊,以及一些混淆的元件 main.js入口檔案的一些常用配置,在入口檔案上定義的public.vue為全域性元件,在這裡用的是pug模版 wraper 的形式相當於 main.js檔案 main.js入口檔案的內容 import vue from vue import rout...

詳解vue全域性元件與區域性元件使用方法

這篇文章主要為大家詳細介紹了vue全域性元件與區域性元件的使用方法,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。vue全域性 區域性註冊,以及一些混淆的元件 main.js入口檔案的一些常用配置,在入口檔案上定義的public.vue為全域性元件,在這裡用的是pu...

Alert 元件使用方法

關於flash的alert元件 關於flash的alert元件 在flashmx2004的幫助手冊中不全,大致使用方法如下 1.從元件面板拖alert到舞台上再刪除 使加入庫中 2.新增 import mx.controls.alert 3.使用alert元件方法 顯示alert元件比較簡單,用al...