前端開發(fā)核心篇——Vue
      
    
      
        網(wǎng)友投稿
        897
        2022-05-29
		    
      
    
                    
      1. Vue簡介
      Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。 Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計(jì)。通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
      2.Vue.js 目錄結(jié)構(gòu)
      這里是我們要開發(fā)的目錄，基本上要做的事情都在這個(gè)目錄里。里面包含了幾個(gè)目錄及文件：
      assets: 放置一些圖片，如logo等。
      components: 目錄里面放了一個(gè)組件文件，可以不用。
      App.vue: 項(xiàng)目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。
      main.js: 項(xiàng)目的核心文件。
      3. Vue語法
      Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。Vue.js 的核心是一個(gè)允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時(shí)， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。
      ???? ??????{{?message?}} ????
       ????var?app?=?new?Vue({?? ????????el:?'#app',?? ????????data:?{???? ????????????message:?'Hello?Vue!' ??????????} ????????methods:add(){ ?????????? ????})
      Vue 構(gòu)造器中有一個(gè)el 參數(shù)，它是 DOM 元素中的 id。改動(dòng)全部在以上指定的 div 內(nèi)，div 外部不受影響。data 用于定義屬性。methods 用于定義的函數(shù)，可以通過 return 來返回函數(shù)值。{{ }} 用于輸出對(duì)象屬性和函數(shù)返回值。
      1) 插值
      數(shù)據(jù)綁定最常見的形式就是使用 {{...}}（雙大括號(hào)）的文本插值。
      使用 v-html 指令用于輸出 html 代碼。
      2）指令
      指令帶有前綴 v-，以表示它們是 Vue 提供的特殊 attribute。可能你已經(jīng)猜到了，它們會(huì)在渲染的 DOM 上應(yīng)用特殊的響應(yīng)式行為。
      前端開發(fā)核心篇——Vue
      v-model 指令用來在 input、select、textarea、checkbox、radio 等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，根據(jù)表單上的值，自動(dòng)更新綁定的元素的值。
      按鈕的事件我們可以使用 ?v-on 監(jiān)聽事件，并對(duì)用戶的輸入進(jìn)行響應(yīng)。
      條件判斷使用 v-if 指令。可以用 v-else 指令給 v-if 添加一個(gè) "else" 塊。
      使用 v-show 指令來根據(jù)條件展示元素。
      v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數(shù)據(jù)數(shù)組并且 site 是數(shù)組元素迭代的別名。
      3）計(jì)算屬性
      計(jì)算屬性關(guān)鍵詞是 computed。例子如下：
      ???? ??????
      Original?message:?"{{?message?}}"
       ??????
      Computed?reversed?message:?"{{?reversedMessage?}}"
       ????
       ?????? ????????var?vm?=?new?Vue({?? ????????????el:?'#example',?? ????????????data:?{???? ????????????message:?'Hello' ??????},?? ??????computed:?{????//?計(jì)算屬性的?getter ????????reversedMessage:?function?()?{??????//?`this`?指向?vm?實(shí)例 ??????????return?this.message.split('').reverse().join('') ????????} ??????} ????})
      vm.reversedMessage 依賴于 vm.message，在 vm.message 發(fā)生改變時(shí)，vm.reversedMessage 也會(huì)更新。使用 methods 來替代 computed，效果上兩個(gè)都是一樣的，但是 computed 是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods ，在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行。可以說使用 computed 性能會(huì)更好，但是如果你不希望緩存，你可以使用 methods 屬性。
      4）監(jiān)聽屬性
      監(jiān)聽屬性 watch，我們可以通過 watch 來響應(yīng)數(shù)據(jù)的變化。
      5）樣式綁定
      class 與 style 是 HTML 元素的屬性，用于設(shè)置元素的樣式，我們可以用 v-bind 來設(shè)置樣式屬性。為 v-bind:class 設(shè)置一個(gè)對(duì)象，從而動(dòng)態(tài)的切換 class。
      6）條件渲染
      v-if 指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染。另一個(gè)根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件-和子組件適當(dāng)?shù)乇讳N毀和重建。v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。
      7） 事件處理
      v-on 可以接收一個(gè)定義的方法來調(diào)用。
      ???????? ??????????Add?1 ??????????
      The?button?above?has?been?clicked?{{?counter?}}?times.
       ????????????var?example1?=?new?Vue({?? ????????????el:?'#example-1',?? ????????????data:?{???? ????????????????counter:?0 ??????????} ????????})
      在事件處理程序中調(diào)用一些非常常見的需求。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。為了解決這個(gè)問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點(diǎn)開頭的指令后綴來表示的。.stop、.prevent、.capture、.self、.once、
      .passive。
      ???????? ???????? ???????? ???????? ???????? ???????? ???????? ???????? ???????? ????????...
       ???????? ????????...
       ???????? ????????
      在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符。Vue 提供了絕大多數(shù)常用的按鍵碼的別名：.enter
      .tab、.delete (捕獲“刪除”和“退格”鍵)、.esc、.space、.up、.down、.left、.right。
      8）表單數(shù)據(jù)綁定
      v-model 指令在表單控件 、