四、vue.js 核心知識點

1、vue.js的兩個核心是什么?

1、數據驅動,也叫雙向數據綁定。

Vue.js數據觀測原理在技術實現上,利用的是ES5Object.defineProperty和存儲器屬性: getter和setter(所以只兼容IE9及以上版本),可稱為基于依賴收集的觀測機制。核心是VM,即ViewModel,保證數據和視圖的一致性。

2、組件系統。

.vue組件的核心選項:

1、模板(template):模板聲明了數據和最終展現給用戶的DOM之間的映射關系。

2、初始數據(data):一個組件的初始數據狀態。對于可復用的組件來說,這通常是私有的狀態。

3、接受的外部參數(props):組件之間通過參數來進行數據的傳遞和共享。

4、方法(methods):對數據的改動操作一般都在組件的方法內進行。

5、生命周期鉤子函數(lifecycle hooks):一個組件會觸發多個生命周期鉤子函數,最新2.0版本對于生命周期函數名稱改動很大。

6、私有資源(assets):Vue.js當中將用戶自定義的指令、過濾器、組件等統稱為資源。一個組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調用。

等等。

2、對Vue 是一套構建用戶界面的漸進式框架的理解

漸進式代表的含義是:沒有多做職責之外的事。

vue.js只提供了?vue-cli?生態中最核心的?組件系統?和?雙向數據綁定。

像vuex、vue-router都屬于圍繞?vue.js開發的庫。

比如說,你要使用Angular,必須接受以下東西:

必須使用它的模塊機制

必須使用它的依賴注入-

必須使用它的特殊形式定義組件(這一點每個視圖框架都有,難以避免)

所以Angular是帶有比較強的排它性的,如果你的應用不是從頭開始,而是要不斷考慮是否跟其他東西集成,這些主張會帶來一些困擾。

比如說,你要使用React,你必須理解:

函數式編程的理念,

需要知道什么是副作用,

什么是純函數,

如何隔離副作用

它的侵入性看似沒有Angular那么強,主要因為它是軟性侵入。

Vue與React、Angular的不同是,但它是漸進的:

你可以在原有大系統的上面,把一兩個組件改用它實現,當jQuery用;

也可以整個用它全家桶開發,當Angular用;

還可以用它的視圖,搭配你自己設計的整個下層用。

你可以在底層數據邏輯的地方用OO和設計模式的那套理念,

也可以函數式,都可以,它只是個輕量視圖而已,只做了最核心的東西。

3、vue幾種常用的指令

v-if:根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀并重建。

v-show:根據表達式之真假值,切換元素的 display CSS 屬性。

v-for:循環指令,基于一個數組或者對象渲染一個列表,vue 2.0以上必須需配合 key值 使用。

v-bind:動態地綁定一個或多個特性,或一個組件 prop 到表達式。

v-on:用于監聽指定元素的DOM事件,比如點擊事件。綁定事件監聽器。

v-model:實現表單輸入和應用狀態之間的雙向綁定

v-pre:跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯。

v-once:只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節點將被視為靜態內容并跳過。這可以用于優化更新性能。

待續

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容