首頁 > web前端 > 前端問答 > vuejs是API嗎

vuejs是API嗎

青灯夜游
發布: 2023-01-11 09:22:41
原創
1632 人瀏覽過

vuejs不是API。 vuejs是一套用於建立使用者介面的漸進式JavaScript框架,旨在更好地組織與簡化Web開發。而API是指應用程式介面,是一些預先定義的函數,目的是提供應用程式與開發人員基於某軟體或硬體得以存取一組例程的能力。

vuejs是API嗎

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

vuejs不是API。

Vue (讀音 /vjuː/,類似 view) 是一套用於建立使用者介面的漸進式JavaScript框架,旨在更好地組織與簡化Web開發。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。

Vue 的核心函式庫只專注於視圖層,不僅易於上手,也方便與第三方函式庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類別庫結合使用時,Vue 也完全能夠為複雜的單頁應用(SPA)提供驅動。

Vue.js 還提供了MVVM 資料綁定和一個可組合的元件系統,具有簡單、靈活的API,其目標是透過盡可能簡單的API 實現響應式的資料綁定和可組合的視圖組件。

API(Application Programming Interface,應用程式介面)是一些預先定義的函數,目的是提供應用程式與開發人員基於某軟體或硬體得以存取一組例程的能力,而又無需存取原始碼,或理解內部工作機制的細節。

vuejs中的一些API

#vm指new Vue取得的實例

(1)當dom標籤裡的值和data裡的值綁定後,更改data對應的值可以即時更新標籤裡的值;

但後續新增的值是無效的(綁定失敗)。

(2)將可以將物件直接作為data的一個屬性,是有效的(因為物件按值傳遞);

所以該屬性和該物件是全等的;

(3)vm的介面有:

vm.$data是vm的data屬性;

vm.$el是el屬性所指向的dom結點;

vm.$watch是監視屬性變化(例如data裡的值)(參考(九))

(4)vue實例的宣告週期,有幾個關鍵函數:

created:事件綁定結束後,函數直接在宣告vue實例的時候,作為vue實例中的一個屬性,下同。

vm.$mount:掛載dom結點;

beforeCompile:載入範本之前;

compiled:載入範本之後;

ready:完成之後(我猜的);

beforeDestroy:摧毀之前;

destroyed:摧毀之後;

(5)vm.$mount(掛載的id或類別名)

在new Vue實例的時候,不加el,則表示不掛載只生成,生成之後,可以透過該方法來手動掛載到某個地方,如果符合條件的有多個,則掛載到第一個地方;

(6)v-for遍歷數組、對象,可以創建多個標籤;例如用於創建表格;

(7)轉義: {{}} 兩個大括號,不會轉義值的html標籤;

{{{}}}  三個大括號,會將數值的html標籤轉義,也就是變成html文字;

不能在值內再放入綁定資料(除非使用partials,但我還不會);

(8)在插值的大括號內,可以放入表達式(不能放函數);

(9)在插值的大括號內,加入管道符號|,可以使用過濾器;

       capitalize就是將首字母大寫的過濾器;

       過濾器只能放在表達式最後,且無法成為表達式的一部分;

       過濾器可加為參數;

       過濾器可自訂(但目前仍不知道自訂自訂(但目前仍不知道自訂已定義的方法);

(10)指令:

v-if=」變數名稱」           當某值為true時存在;

      名=」變數名稱」             將等號後的變數名稱(指向vm的data屬性中的同名屬性),與該標籤的html屬性綁定在一起。

       v-on:事件類型=」函數名稱」            觸發事件類型時,執行methods裡的函數;

##  : v.冒號);

(11)計算屬性computed

       這裡的屬性,可以當做data屬性裡的使用;優點是data裡的數值變更時,這裡會跟著一起改變;

       可以使用較複雜的表達式(內插只能用簡單的表達式);

(12)計算屬性的setter和getter

###########

預設是getter(物件的get屬性),也就是當某個值改變時,觸發回呼函數(或get方法);

當計算屬性改變時,需要改變某些值(例如改變10個值,在其他地方寫監聽這個值就不好),那麼則需要設定setter(物件的set屬性),也就是當計算屬性改變時,觸發set方法;

(13)監視屬性vm.$watch(被監視的屬性, 回呼函數)

       監視的是data屬性;

回呼函數的第一個參數是改變後的值,第二個參數是改變前的值;

       屬性的值改變時觸發;

(14)class綁定:

       用v-bind:class#  物件形式,key為class類別名,值表示是否顯示這個class類別;

       可以直接將一個object物件放置在v-bind:class的值中,並將這個物件放置在data屬性中,這樣設定這個object物件的屬性即可;

       class的陣列寫法:陣列裡的成員為變數名,如果該變數不是object對象,則變數的值為類別名稱;如果是物件時,物件的key是類別名稱,數值表示是否顯示;

(15)style綁定:

       以v-bind:style

      形式為物件,物件的key是樣式名稱(如fontSize,注意樣式名需要採用駝峰式而不是css式),值是樣式的值;

       可以直接將物件名稱放在v-bind:style的等式右邊;

       物件的數值改變,將即時影響內嵌樣式;

       某些樣式,則可針對瀏覽器加上前綴(但某些無法為所有瀏覽器相容);

#相關推薦:《

vue.js教學

以上是vuejs是API嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板