Vue入門

阿新 • • 發佈：2020-07-30

Vue

Soc：關注度分離原則

Vue只負責檢視層 HTML+CSS+JS

檢視：給使用者看，重新整理後臺給的資料

不管

網路通訊：axios

頁面跳轉：vue-router

狀態管理：vuex

Vue-UI：ICE

前端三要素

HTML（結構）：超文字標記語言，決定網頁的結構和內容
CSS（表現）：層疊樣式表，設定網頁的表現樣式
JavaScript（行為）：是一種弱指令碼語言，其原始碼不需要經過編譯，而是由瀏覽器解釋執行，用於控制網頁的行為。

css/新技能

M：模型 V：檢視 C：控制

JavaScript框架

jQuery：大家熟知的JavaScripts框架，優點是簡化了DOM操作，缺點是DOM操作太頻繁，影響前端效能；在前端眼裡使用它僅僅是為了相容IE

6，7，8
Angular：Google收購的前端框架，由一群Java程式設計師開發，其特點是將後臺的MVC模式搬到了前端並增加了模組化開發的理念，與微軟合作，採用TypeScript語法開發；對後臺程式設計師友好，對前端程式設計師不太友好；最大的缺點是版本迭代不合理（如：1代->2代，除了名字，基本是兩個東西）
React：Facebook出品，一款高效能的JS前端框架；特點是提出了新概念【虛擬DOM】用於減少真是DOM操作，在記憶體中模擬DOM操作，有效的提升了前端渲染效率；缺點是使用複雜，因為需要格外學習【jSX】語言
Vue：一款漸進式JavaScript框架，所謂漸進式就是逐步實現新特性的意思，如實現模組化開發，路由，狀態管理等新特性。其特點是綜合了Angular（模組化）和React（虛擬DOM）的優點；
Axios：前端通訊框架；因為Vue的邊界很明確，就是處理DOM，所以並不具備通訊能力，此時就需要額外使用一個通訊框架與伺服器互動；當然也可以直接選擇jQuery提供的AJAX通訊能力；

虛擬DOM：利用記憶體

計算屬性-->Vue特色

集大成者

MVVM+DOM

UI框架

Ant-Design：阿里巴巴出品，基於React的UI框架
ELemeUI，iview，ice：餓了麼出品，基於Vue的UI框架
Bootstrap：Twitter推出的一個用於前端開發的開源工具包
AmazeUI：一款HTML5跨屏前端框架

JavaScript構建工具

Babel：JS編譯工具，主要用於瀏覽器不支援的ES新特性，比如用於編譯TypeScript
WebPack：模組打包器，主要作用是打包，壓縮，合併及按序載入

三端統一

混合開發（Hybrid App）

主要目的是實現一套程式碼三端統一（PC，Android：.apk，iOS：.ipa）並能夠呼叫裝置底層硬體（如：感測器，GPS，攝像頭等），打包方式主要有以下兩種：

雲打包：HBuild->HBuildX，DCloud出品，API Cloud
本地打包：Gordova（前身是PhoneGap）

微信小程式

詳見微信官網，這裡就是介紹一個方便微信小程式UI開發的框架：WebUI

主流前端框架

Vue.js

SpringMVC工作流程

大前端時代

後端人員：輕鬆，便要去研究分散式，微服務，大資料

前端為主的MV*時代

MVC（同步通訊為主）：Model，View，Controller
MVP（非同步通訊為主）：Model，View，Presenter
MVVM（非同步通訊為主）：Model，View，ViewModel

SPA

優點

前後端指責很清晰：前端工作在瀏覽器，後端工作在伺服器。清晰的分工，可以讓開發並行，測試資料的模擬不難，前端可以本地開發。後端則可以專注於業務邏輯的處理，輸出RESTful等介面
前端開發的的複雜性可控：前端程式碼很重，但合理的分層，讓前端程式碼能各司其職。
部署相對獨立：可以快速改進產品體驗

Vue的語法

vue文件：cn.vuejs.org

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>計算器</title>
</head>
<body>
  <div id="app">
    <!-- 計算器功能區域 -->
    <div class="input-num">
      <button @click="sub">
        -
      </button>
      <span v-text="num"></span>
      <button @click="add">
        +
      </button>
    </div>
  </div>
  <!-- 開發環境版本，包含了有幫助的命令列警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    //建立Vue例項
    var app=new Vue({
      el:"#app",
      data:{
        //content:"heimachengxuyun"
        num:1
       },
      methods:{
        add:function(){
          //console.log('add');
          if(this.num<10)
          this.num++;
          else
          alert('別點了，最大啦');
         },
        sub:function(){
          //console.log('sub');
          if(this.num>0)
          this.num--;
          else
          alert('別點了，最小了');
         }
       }
     })
  </script>
</body>
</html>

建立Vue例項時：el(掛載點)，data(資料)，methods(方法)
v-on指令的作用是繫結事件，簡寫為@
方法中通過this，關鍵字獲取data中的資料
v-text指令的作用是：設定元素的文字值，簡寫{{}}
v-html指令的作用是：

v-show指令的作用是：根據表示式的真假，切換元素的顯示和隱藏

原理是修改元素的display，實現顯示隱藏

指令後面的內容，最終都會解析為布林值

值為true元素顯示，值為false元素隱藏

資料改變之後，
v-if指令的作用是：根據表示式的真假，切換元素的顯示和隱藏（操縱dom元素）

v-show和v-if的區別：v-show是操縱樣式，v-if是操縱dom

表示式的值為true，元素存在於dom樹中，為false，從dom樹中移除

頻繁操作的用v-show，正常使用可以v-if。因為操縱dom，效能消耗比較大

v-blind指令的作用是：為元素繫結屬性

完整寫法 v-bind：屬性名=表示式

簡寫寫法直接省略v-bind，只保留 :屬性名

使用動態增刪，更建議使用class
輪播圖

列表資料使用陣列儲存

v-bind指令可以設定元素的屬性，比如src

v-show和v-if都可以切換元素的顯示狀態，頻繁切換用v-show