目前前端流行的三大框架React，Angular，Vue，那我們應該學習哪一個呢。通過對三個框架的了解，Vue相對來說入門比較簡單，容易學習，但是要想達到精通還是需要一定時間和精力去學習和探索，還要通過實戰(zhàn)項目不斷積累開發(fā)經(jīng)驗。

首先我們要了解Vue，這個框架能做什么，能為我們開發(fā)提供哪些便利，開發(fā)的環(huán)境需要哪些等等？

Vue官網(wǎng)：https://cn.vuejs.org/v2/guide/

Vue開發(fā)的兩種模式

1.直接

模板語法

使用雙大括號（{{ xxx }}）對文本內容進行數(shù)據(jù)綁定。

{{message}}

指令

v-bind：用于HTML標簽的屬性上面，也可以使用表達式。

v-html：用于插入原始的 html。

v-on：用于監(jiān)聽DOM事件。

v-if，v-else，v-else-if：用于根據(jù)條件值渲染一塊內容。

{{message}}

{{message}} demo

v-show：用于根據(jù)條件顯示或隱藏元素，元素始終保留在DOM中，是通過css屬性 display 實現(xiàn)。

{{message}} hidden

v-for：通過一個數(shù)組來渲染一個列表。

// html 數(shù)據(jù)綁定

// vue 實例 data 定義 data: { list: [ { id: 1, name: 'name 1' }, { id: 2, name: 'name 2' } ] }

v-model：在表單元素input，textarea，select元素上實現(xiàn)雙向數(shù)據(jù)綁定。

計算屬性

計算屬性是用于簡單計算的，減少模板中的邏輯，是基于響應式依賴進行緩存，相關響應式依賴發(fā)生改變就會重新計算。

// html 綁定 {{ count }} // vue 實例 var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!', title: 'demo', rawHtml: "

-

當數(shù)據(jù)變化時執(zhí)行異步或者開銷較大，使用 watch 監(jiān)聽屬性來響應數(shù)據(jù)變化。如果監(jiān)聽對象內部數(shù)據(jù)變化，需添加屬性 deep: true 。

// html 數(shù)據(jù)綁定

// vue 實例 var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!', fullName: "", lastName: "" }, watch: { lastName: function(newVal, oldVal) { this.fullName = "Li " + newVal; } } })

樣式綁定

操作元素的 class 和內聯(lián)樣式使用 v-bind 處理，通過表達式計算出字符串結果就可以實現(xiàn)綁定。

使用：v-bind:class，v-bind:style

// 使用對象賦值 v-bind:class

// 使用數(shù)組 // 使用對象賦值 v-bind:style // 使用數(shù)組 // vue 實例的數(shù)據(jù)對象 data: { isActive: true, activeCls: 'active', errorCls: 'error', activeColor: 'red', styles: {color: 'red'} }

生命周期

在創(chuàng)建Vue 實例時都要經(jīng)過一系列的初始化過程，例如：需要編譯模板、設置數(shù)據(jù)監(jiān)聽、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。在這個過程會執(zhí)行一些生命周期鉤子的函數(shù)。

beforeCreate：實例初始化之后，在數(shù)據(jù)和事件配置之前調用。

created：實例創(chuàng)建完成之后被調用，數(shù)據(jù)，方法，屬性和事件已配置完成。

beforeMount：在掛載開始之前被調用，還未生成HTML到頁面中。

mounted：掛載完成之后調用，模板中的html渲染到了HTML頁面中。

beforeUpdate：數(shù)據(jù)更新時調用，發(fā)生在虛擬 DOM 重新渲染和打補丁之前。

updated：數(shù)據(jù)更改導致的虛擬 DOM 重新渲染和打補丁。

beforeDestroy：實例銷毀之前調用，此時實例還可以使用。

destroyed：實例銷毀后調用。

Vue

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。