vuejs不是API。vuejs是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,旨在更好地組織與簡化Web開發(fā)。而API是指應(yīng)用程序編程接口,是一些預(yù)先定義的函數(shù),目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。
vuejs不是API。
Vue (讀音 /vju?/,類似于 view) 是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,旨在更好地組織與簡化Web開發(fā)。 與其它大型框架不同的是,Vue 被設(shè)計為可以自底向上逐層應(yīng)用。
Vue 的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時,Vue 也完全能夠為復(fù)雜的單頁應(yīng)用(SPA)提供驅(qū)動。
Vue.js 還提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng),具有簡單、靈活的 API,其目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和可組合的視圖組件。
而API(Application Programming Interface,應(yīng)用程序編程接口)是一些預(yù)先定義的函數(shù),目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力,而又無需訪問源碼,或理解內(nèi)部工作機制的細節(jié)。
vuejs中的一些API
vm指new Vue獲取的實例
(1)當(dāng)dom標(biāo)簽里的值和data里的值綁定后,更改data對應(yīng)的值可以實時更新標(biāo)簽里的值;
但后續(xù)添加的值是無效的(綁定失?。?。
(2)將可以將對象直接作為data的一個屬性,是有效的(因為對象按值傳遞);
所以該屬性和該對象是全等的;
(3)vm的接口有:
vm.$data是vm的data屬性;
vm.$el是el屬性指向的dom結(jié)點;
vm.$watch是監(jiān)視屬性變化(比如data里的值)(參照(九))
(4)vue實例的聲明周期,有幾個關(guān)鍵函數(shù):
created:事件綁定結(jié)束后,函數(shù)直接在聲明vue實例的時候,作為vue實例中的一個屬性,下同。
vm.$mount:掛載dom結(jié)點;
beforeCompile:加載模板之前;
compiled:加載模板之后;
ready:完成之后(我猜的);
beforeDestroy:摧毀之前;
destroyed:摧毀之后;
(5)vm.$mount(掛載的id或者類名)
在new Vue實例的時候,不加el,則表示不掛載只生成,生成之后,可以通過該方法來手動掛載到某個地方,如果符合條件的有多個,則掛載到第一個地方;
(6)v-for遍歷數(shù)組、對象,可以創(chuàng)建多個標(biāo)簽;比如用于創(chuàng)建表格;
(7)轉(zhuǎn)義:{{}} 兩個大括號,不會轉(zhuǎn)義值的html標(biāo)簽;
{{{}}} 三個大括號,會將值的html標(biāo)簽轉(zhuǎn)義,即變?yōu)閔tml文本;
不能在值內(nèi)再放入綁定數(shù)據(jù)(除非使用partials,但我還不會);
(8)在插值的大括號內(nèi),可以放入表達式(不能放函數(shù));
(9)在插值的大括號內(nèi),加入管道符|,可以使用過濾器;
capitalize就是將首字母大寫的過濾器;
過濾器只能放在表達式最后,不能成為表達式的一部分;
過濾器可以加參數(shù);
過濾器可以自定義(但目前還不知道自定義的方法);
(10)指令:
v-if=”變量名” 當(dāng)某個值為true時存在;
v-bind:屬性名=”變量名” 將等號后的變量名(指向vm的data屬性里的同名屬性),和該標(biāo)簽的html屬性綁定在一起。
v-on:事件類型=”函數(shù)名” 觸發(fā)事件類型時,執(zhí)行methods里的函數(shù);
v-on的縮寫是@;v-bind的縮寫是:(冒號);
(11)計算屬性computed
這里的屬性,可以當(dāng)做data屬性里的使用;優(yōu)點是data里的數(shù)值變更時,這里會跟著一起改變;
可以使用更復(fù)雜的表達式(插值里只能使用簡單的表達式);
(12)計算屬性的setter和getter
默認(rèn)是getter(對象的get屬性),即當(dāng)某個值改變時,觸發(fā)回調(diào)函數(shù)(或get方法);
當(dāng)計算屬性改變時,需要改變某些值(比如改變10個值,在其他地方寫監(jiān)聽這個值就不好),那么則需要設(shè)置setter(對象的set屬性),即當(dāng)計算屬性改變時,觸發(fā)set方法;
(13)監(jiān)視屬性vm.$watch(被監(jiān)視的屬性, 回調(diào)函數(shù))
監(jiān)視的是data屬性;
回調(diào)函數(shù)的第一個參數(shù)是改變后的值,第二個參數(shù)是改變前的值;
屬性的值改變時觸發(fā);
(14)class綁定:
用v-bind:class
class使用對象形式,key為class類名,值表示是否顯示這個class類;
可以直接將一個object對象放置在v-bind:class的值中,并將這個對象放置在data屬性中,這樣設(shè)置這個object對象的屬性即可;
class的數(shù)組寫法:數(shù)組里的成員為變量名,如果該變量不是object對象,則變量的值為類名;如果是對象時,對象的key是類名,值表示是否顯示;
(15)style綁定:
用v-bind:style
形式是一個對象,對象的key是樣式名(如fontSize,注意樣式名需要采用駝峰式而不是css式),值是樣式的值;
可以直接將對象名放在v-bind:style的等式右邊;
對象的值改變,將實時影響內(nèi)聯(lián)樣式;
對于某些樣式,可以針對瀏覽器加前綴(但某些不能對所有瀏覽器兼容);