Vue從甜小白到皮大佬系列(一) Vue是個啥?

閱讀時間預估:3分鐘

啥是Vue?

當你看到這篇文章的時候,想必這位大俠不免多少略知Vue這個世界級別的框架的來頭,華裔程序貴族尤雨溪大佬的開源做品(膜拜大佬三分鐘...),從面世至今gitHub上的點贊數量已經超過Angular,React等著名框架,🔥的發紫,着實有後來者居上的感受,Vue借鑑了前二者的優秀設計模式和思想以一種漸進式的模式呈現給咱們,意圖也很是明顯,小白上手首選,學習成本低,開源社區活躍,廢話很少說,接下來跟(da)着(lao)個人腳步,帶你從小白進階大佬(chui niu)..

Vue -漸進式JavaScript框架

介紹

大佬叮囑: 萬層高樓平地起,做爲vue小白vue官方中文網必定要努力的通讀幾遍,案例必定要多敲幾遍哦.

• vue 中文網
• vue github
• Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架

庫和框架有啥區別

咱們所說的前端框架與庫的區別？

Library

庫，本質上是一些函數的集合。每次調用函數，實現一個特定的功能，接着把控制權交給使用者

• 表明：jQuery
• jQuery這個庫的核心：DOM操做，即：封裝DOM操做，簡化DOM操做
• jQuery 源碼分析系列

Framework

框架，是一套完整的解決方案，使用框架的時候，須要把你的代碼放到框架合適的地方，框架會在合適的時機調用你的代碼

• 框架規定了本身的編程方式，是一套完整的解決方案
• 使用框架的時候，由框架控制一切，咱們只須要按照規則寫代碼

主要區別

• You call Library, Framework calls you

• 核心點：誰起到主導做用（控制反轉）

  • 框架中控制整個流程的是框架
  • 使用庫，由開發人員決定如何調用庫中提供的方法（輔助）

• 好萊塢原則：Don't call us, we'll call you.

• 框架的侵入性很高（從頭至尾）

啥是MVVM?

• MVVM，一種更好的UI模式解決方案
• 從Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普

MVC

• M: Model 數據模型（專門用來操做數據，數據的CRUD）
• V：View 視圖（對於前端來講，就是頁面）
• C：Controller 控制器（是視圖和數據模型溝通的橋樑，用於處理業務邏輯）

後端中經常採用MVC模式.

MVVM組成

• MVVM ===> M / V / VM
• M：model數據模型
• V：view視圖
• VM：ViewModel 視圖模型

優點對比

• MVC模式，將應用程序劃分爲三大部分，實現了職責分離

• 在前端中常常要經過 JS代碼 來進行一些邏輯操做，最終還要把這些邏輯操做的結果如今頁面中。也就是須要頻繁的操做DOM

• MVVM經過數據雙向綁定讓數據自動地雙向同步

  • V（修改數據） -> M
  • M（修改數據） -> V
  • 數據是核心

• Vue這種MVVM模式的框架，不推薦開發人員手動操做DOM

Vue中的MVVM

雖然沒有徹底遵循 MVVM 模型，Vue 的設計無疑受到了它的啓發。所以在文檔中常常會使用 vm (ViewModel 的簡稱) 這個變量名錶示 Vue 實例

學習Vue要轉化JS老觀念

• 不要在想着怎麼操做DOM，而是想着如何操做數據！！！以數據來驅動開發.

起步 - Hello Vue

• 安裝:npm i -S vue

<!-- 指定vue管理內容區域，須要經過vue展現的內容都要放到找個元素中  一般咱們也把它叫作邊界 數據只在邊界內部解析-->
<div id="app">{{ msg }}</div>
 
<!-- 引入 vue.js -->
<script src="vue.js"></script>
 
<!-- 使用 vue -->
<script>
  var vm = new Vue({
    // el：提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標
    el: '#app',
    // Vue 實例的數據對象，用於給 View 提供數據
    data: {
      msg: 'Hello Vue'
    }
  })
</script>
複製代碼

Vue實例

• 注意 1：先在data中聲明數據，再使用數據
• 注意 2：能夠經過 vm.$data 訪問到data中的全部屬性，或者 vm.msg

var vm = new Vue({
  data: {
    msg: '你們好,我是Geek-James'
  }
})
 
vm.$data.msg === vm.msg // true
複製代碼

數據綁定

• 最經常使用的方式：Mustache(插值語法)，也就是 {{}} 語法
• 解釋：{{}}從數據對象data中獲取數據
• 說明：數據對象的屬性值發生了改變，插值處的內容都會更新
• 說明：{{}}中只能出現JavaScript表達式 而不能解析js語句
• 注意：Mustache 語法不能做用在 HTML 元素的屬性上

<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>
 
<!-- ！！！錯誤示範！！！ -->
<h1 title="{{ err }}"></h1>
複製代碼

雙向數據綁定 Vue two way data binding

• 雙向數據綁定：將DOM與Vue實例的data數據綁定到一塊兒，彼此之間相互影響

  • 數據的改變會引發DOM的改變
  • DOM的改變也會引發數據的變化

• 原理：Object.defineProperty中的get和set方法

  • getter和setter：訪問器
  • 做用：指定讀取或設置對象屬性值的時候，執行的操做

• Vue - 深刻響應式原理

• MDN - Object.defineProperty()

/*  defineProperty語法 介紹 */
var obj = {}
Object.defineProperty(obj, 'msg', {
  // 設置 obj.msg = "1" 時set方法會被系統調用 參數分別是設置後和設置前的值
  set: function (newVal, oldVal) {  },
  // 讀取 obj.msg 時get方法會被系統調用
  get: function ( newVal, oldVal ) {}
})
複製代碼

Vue雙向綁定的極簡實現

• 剖析Vue原理&實現雙向綁定MVVM

<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>
 
<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'),
    obj = {}
 
// 給對象obj添加msg屬性，並設置setter訪問器
Object.defineProperty(obj, 'msg', {
  // 設置 obj.msg  當obj.msg反生改變時set方法將會被調用  
  set: function (newVal) {
    // 當obj.msg被賦值時 同時設置給 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})
 
// 監聽文本框的改變 當文本框輸入內容時 改變obj.msg
txt.addEventListener('keyup', function (event) {
  obj.msg = event.target.value
})
</script>
複製代碼

動態添加數據的注意點

• 注意：只有data中的數據纔是響應式的，動態添加進來的數據默認爲非響應式
• 能夠經過如下方式實現動態添加數據的響應式
  • 1 Vue.set(object, key, value) - 適用於添加單個屬性
  • 2 Object.assign() - 適用於添加多個屬性

var vm = new Vue({
  data: {
    stu: {
      name: 'jack',
      age: 19
    }
  }
})
 
/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')
 
/* Object.assign 將參數中的全部對象屬性和值 合併到第一個參數 並返回合併後的對象*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })
複製代碼

異步DOM更新

• 說明：Vue 異步執行 DOM 更新，監視全部數據改變，一次性更新DOM

• 優點：能夠去除重複數據，對於避免沒必要要的計算和 避免重複 DOM 操做上，很是重要

• 若是須要那到更新後dom中的數據 則須要經過 Vue.nextTick(callback)：在DOM更新後，執行某個操做（屬於DOM操做）

  • 實例調用vm.$nextTick(function () {})

methods: {
  fn() {
    this.msg = 'change'
    this.$nextTick(function () {
      console.log('$nextTick中打印：', this.$el.children[0].innerText);
    })
    console.log('直接打印：', this.$el.children[0].innerText);
  }
}
複製代碼

Vue是個啥? 看完這篇不知道面前的這位大俠是否真正的領略到,歡迎留言點贊加評論,文章有不對的地方懇請各位大佬提出.

若是個人分享對面前的這位大俠有所啓發,懇請以程序員最高禮遇點✨ 星加分享的方式鼓勵我.

關注公衆號回覆:學習 領取前端最新最全學習資料,也能夠進羣和大佬一塊兒學習交流

猛戳我點星星