Vue之初識Vue

時間 2019-11-06

標籤 vue 之初简体版

原文原文鏈接

前言

若是你以前已經習慣了用jQuery操做DOM，學習Vue.js時請先拋開手動操做DOM的思惟，
由於Vue.js是數據驅動的，你無需手動操做DOM。它經過一些特殊的HTML語法，將DOM和
數據綁定起來。一旦你建立了綁定，DOM將和數據保持同步，每當變動了數據，DOM也會相
應地更新。javascript

1、Vue簡介

1.1 漸進式框架-Vue

vue官網說：Vue.js是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue
採用自底向上增量開發的設計。
漸進式我我的理解就是階梯式向前。vue是輕量級的，它有不少獨立的功能或庫，咱們會根據
咱們的項目來選用vue的一些功能。就像咱們開發項目時若是隻用到vue的聲明式渲染，我就
只用vue的聲明渲染，而咱們要用他的組件系統，咱們能夠引用它的組件系統。
vue的漸進式表現爲：html

聲明式渲染——組件系統——客戶端路由——-大數據狀態管理——-構建工具

1.2 Vue兩個核心點

1.2.1 響應式數據綁定

當數據發生變化是，vue自動更新視圖。
它的原理是利用了 Object.definedProperty 中的setter/getter 代理數據，
監控對數據的操做。（這就是爲何vue不支持ie8 以及更早的ie瀏覽器的緣由）前端

1.2.2 組合的視圖組件
ui頁面映射爲組件書
劃分組件可維護、可重用、可測試
vue

1.3 虛擬Dom

js的運行速度已經很快了，然而大量的DOM 操做就會變得很慢，可是前端自己就是要經過
JS處理DOM來更新視圖數據的。這樣在更新數據後會從新渲染頁面，這樣就形成在沒有
改變數據的地方也從新渲染了DOM節點。這樣性能方面就會很受影響。java

利用在內存中生成與真實DOM與之對應的數據結構，這個在內存中生成的結構稱之爲虛擬DOM。
當數據發生變化時，可以智能的計算出從新渲染組件的最小代價並應用到DOM操做上。
vue就是利用了這一點。（vue 渲染組件的步驟圖：）
瀏覽器

2、MVVM模式

咱們可能常常據說的有MVC模式和MVVN模式。
angularJS就是所謂的 MVC 模式的框架，model 、view、controller。
而vue 是 MVVM 模式的框架：數據結構

M： model （數據層，也就是指數據（前端是js））
V：view ( 也就是指DOM層或用戶界面 )
VM : view-model (處理數據和界面的中間層，也就是指Vue)

3、第一個Vue程序

<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello world!'
        }
    })
</script>
</html>

1)構造器
每一個 Vue.js 應用都是經過構造函數 Vue 建立一個Vue的根實例啓動：app

var vm = new Vue({
  // 選項
})

2）屬性與方法
每一個 Vue 實例都會代理其 data 對象裏全部的屬性：框架

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 設置屬性也會影響到原始數據
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。
這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。例如：dom

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個回調將在 `vm.a`  改變後調用
})

3）實例生命週期
每一個 Vue 實例在被建立以前都要通過一系列的初始化過程。例如，實例須要配置數據
觀測(data observer)、編譯模版、掛載實例到 DOM ，而後在數據變化時更新 DOM 。
在這個過程當中，實例也會調用一些生命週期鉤子，這就給咱們提供了執行自定義邏輯的
機會。

<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        beforeCreate: function () {
            console.log("vue beforeCreate......")
        },
        created: function () {
            console.log("vue created......")
        },
        beforeMount: function () {
            console.log("vue beforeMount......")
        },
        mounted: function () {
            console.log("vue mounted......")
        },
        beforeUpdate: function () {
            console.log("vue beforeUpdate......")
        },
        updated: function () {
            console.log("vue updated......")
        },
        beforeDestroy: function () {
            console.log("vue beforeDestroy......")
        },
        destroyed: function () {
            console.log("vue destroyed......")
        }
    })
</script>

</html>

結果：

vue beforeCreate......
vue created......
vue beforeMount......
vue mounted......

谷歌瀏覽器控制檯輸入 app.message = 11111
vue beforeUpdate......
vue updated......

app.$destroy()
vue beforeDestroy......
vue destroyed......
undefined