vue.js用法和特性詳解

時間 2019-12-14

原文原文鏈接

前言javascript

最近用Vue.js作了一個數據查詢平臺，還作了一個拼圖遊戲，忽然深深的感到了vue的強大。html

Vue.js是一套構建用戶界面(user interface)的漸進式框架。與其餘重量級框架不一樣的是，Vue 從根本上採用最小成本、漸進增量(incrementally adoptable)的設計。Vue 的核心庫只專一於視圖層，而且很容易與其餘第三方庫或現有項目集成。另外一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也徹底可以爲複雜的單頁應用程序提供有力驅動。vue

Vue.js目前已經更新到2.x，功能和語法上有必定升級和修改，本文首先介紹基礎內容。java

以後的內容會陸續更新。jquery

一、新手指南

　　vue的使用很是簡單，下載vue.js或vue.min.js直接導入便可使用。 git

二、vue初步入門

2.1聲明式渲染

　　Vue.js 的核心是，能夠採用簡潔的模板語法來聲明式的將數據渲染爲 DOM：github

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

　　這樣就會輸入：Hello Vue！數組

　　咱們已經生成了第一個 Vue 應用程序！這看起來和渲染一個字符串模板很是相似，可是 Vue 在背後作了大量工做。如今數據和 DOM 已經被關聯在一塊兒，全部的數據和 DOM 都是響應式的。咱們如何對這一切清晰領會？只需打開你的瀏覽器的 JavaScript 控制檯（如今，就在當前頁面打開），而後設置 app.message 的值，你將看到上面的示例所渲染的 DOM 元素會相應地更新。瀏覽器

　　除了文本插值(text interpolation)，咱們還能夠採用這樣的方式綁定 DOM 元素屬性：app

<div id="app-2">
  <span v-bind:title="message">
    鼠標懸停此處幾秒，
    能夠看到此處動態綁定的 title！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁面加載於 ' + new Date().toLocaleString()
  }
})

　　鼠標懸停幾秒後，就能夠看到動態的提示。

　　這裏咱們遇到一些新內容。你看到的 v-bind 屬性被稱爲指令。指令帶有前綴 v-，表示是由 Vue 提供的專用屬性。可能你已經猜到了，它們會在渲染的 DOM 上產生專門的響應式行爲。簡而言之，這裏該指令的做用就是：「將此元素的title 屬性與 Vue 實例的 message 屬性保持關聯更新」。

　　若是你再次打開瀏覽器的 JavaScript 控制檯，並輸入 app2.message = '一些新的 message'，就會再次看到，綁定了title 屬性的 HTML 已經進行了更新。

2.1條件與循環

　　控制切換一個元素的顯示也至關簡單：

<div id="app-3">
  <p v-if="seen">如今你能夠看到我</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

　　繼續在控制檯輸入 app3.seen = false，你應該會看到 span 消失。

　　這個示例代表，咱們不僅是能夠將數據綁定到文本和屬性，也能夠將數據綁定到 DOM 結構。並且，Vue 也提供一個強大的過渡效果系統，能夠在 Vue 插入/更新/刪除元素時，自動使用過渡效果。

　　還有其它一些指令，每一個都具備各自不一樣的特殊功能。例如，v-for 指令，可使用數組中的數據來展現一個項目列表：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '建立激動人心的代碼' }
    ]
  }
})

3 、vue實例

　　每一個 Vue 應用程序都是經過 Vue 函數建立出一個新的 Vue 實例開始的：

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

　　儘管沒有徹底遵循 MVVM 模式，可是 Vue 的設計仍然受到了它的啓發。做爲約定，一般咱們使用變量 vm (ViewModel 的簡稱) 來表示 Vue 實例。

3.1data 和 methods

　　在建立 Vue 實例時，會將全部在 data 對象中找到的屬性，都添加到 Vue 的響應式系統中。每當這些屬性的值發生變化時，視圖都會「及時響應」，並更新相應的新值。

// data 對象
var data = { a: 1 }
// 此對象將會添加到 Vue 實例上
var vm = new Vue({
  data: data
})
// 這裏引用了同一個對象！
vm.a === data.a // => true
// 設置實例上的屬性，
// 也會影響原始數據
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

　　每當 data 對象發生變化，都會觸發視圖從新渲染。值得注意的是，若是實例已經建立，那麼只有那些 data 中的本來就已經存在的屬性，纔是響應式的。也就是說，若是在實例建立以後，添加一個新的屬性，例如：

vm.b = 'hi'

　　而後，修改 b 不會觸發任何視圖更新。若是你已經提早知道，以後將會用到一個開始是空的或不存在的屬性，你就須要預先設置一些初始值。例如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

　　除了 data 屬性， Vue 實例還暴露了一些有用的實例屬性和方法。這些屬性與方法都具備前綴 $，以便與用戶定義(user-defined)的屬性有所區分。例如：

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 (newValue, oldValue) {
  // 此回調函數將在 `vm.a` 改變後調用
})

3.2vue實例的聲明週期

　　vue實例的聲明週期是一個很重要的概念，理解以後能夠經過它實現不少功能。

　　看下這段代碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <div id="container">個人聲明週期，你們看吧！</div>
        
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">

        //如下代碼時顯示vm整個生命週期的流程
        var vm = new Vue({
            el: "#container",
            data: {
                test : 'hello world'
            },
            beforeCreate: function(){
                console.log(this);
                showData('建立vue實例前',this);
            },
            created: function(){
                showData('建立vue實例後',this);
            },
            beforeMount:function(){
                showData('掛載到dom前',this);
            },
            mounted: function(){
                showData('掛載到dom後',this);
            },
            beforeUpdate:function(){
                showData('數據變化更新前',this);
            },
            updated:function(){
                showData('數據變化更新後',this);
            },
            beforeDestroy:function(){
                vm.test ="3333";
                showData('vue實例銷燬前',this);
            },
            destroyed:function(){
                showData('vue實例銷燬後',this);
            }
        
        });
        function realDom(){
            console.log('真實dom結構：' + document.getElementById('container').innerHTML);
        }
        function showData(process,obj){
            console.log(process);
            console.log('data 數據：' + obj.test)
            console.log('掛載的對象：')
            console.log(obj.$el)
            realDom();
            console.log('------------------')
            console.log('------------------')
        }
        
    </script>
</html>

　看一下效果圖

　　經過控制檯的打印效果能夠看出來，實例化 vue 對象大體分爲建立vue實例、掛載到dom、數據變化更新、vue實例銷燬 4個階段，，注意每一個階段都有對應的鉤子，咱們能夠經過對這些鉤子進行操做，達成一些功能。雖然初學者用不太上，可是提早了解一下仍是好的，到時候碰到實際功能要能想獲得生命週期的鉤子。