JAVA學習筆記系列 菜鳥Vue學習筆記(四)

2021-09-24 08:48:04 字數 407 閱讀 9709

菜鳥vue學習筆記(四)

上週學習了使用vue來操作表單元素進行資料雙向繫結,今天我們來學習下vue中的元件,vue中的元件作用就是去封裝一些常用的頁面標籤,將其當做乙個整體,以便在其他位置直接使用一組標籤。例如:

這是定義了乙個全域性的元件,在其他位置使用方式為:

好,我們初步的認識了元件,感覺它就像乙個自定義標籤一樣。那麼vue的元件到底有哪些方式定義呢?vue元件分為全域性元件和區域性元件,顧名思義,全域性元件就是在所有引用到此元件的地方都可以使用,而區域性元件只能在定義區域性元件對應的地方使用。

例如:定義全域性元件

定義區域性元件:

元件不一定都是單純的靜態元件,也可以在元件中繫結變數。例如:

使用時,需要指定變數,例如:

基本的元件使用我們暫時說到這,下次我們說說路由的使用。

JAVA教程 菜鳥Vue學習筆記(五)

菜鳥vue學習筆記 五 上次我們學習了vue的元件,這次我們來學習一下路由的使用。在vue中,所謂的路由其實跟其他的框架中的路由的概念差不多,即指跳轉的路徑。注意 在vue中,要使用路由,必須匯入vue router.js,並且需要在vue.js下方匯入。具體示例如下 檢視一檢視二 分析如下 在頁面...

菜鳥Vue學習筆記(二)

菜鳥vue學習筆記 二 今天天氣不錯,心情也不錯,最近學習vue越來越順利了,今天接著學習,接著記錄。首先,來學習下常用的v bind屬性,它的作用是在屬性中使用vue中定義的變數的值。恩,很簡單嘛,那麼如果需要顯示文字和變數一起怎麼辦呢?檢視 原來如此,需要拼接字串啊,好像v bind 可以簡寫為...

菜鳥Vue學習筆記(三)

菜鳥vue學習筆記 三 本週使用了vue來操作表單,接下來說下vue中雙向繫結表單元素的用法。vue中雙向繫結是使用的v model,所謂的雙向繫結即改變變數的值,表單元素的值也會改變,同樣的,改變表單元素的值變數的值也會改變。例如 使用者資訊為 是不是非常簡單?常用的文字框,密碼框等用法都基本相識...