快捷導(dǎo)航

詳解 vue.js用法和特性

更新時間：2017年10月15日 08:41:12 作者：聽醒木一聲收

Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級和修改，本文首先介紹基礎(chǔ)內(nèi)容。感興趣的朋友一起看看吧

前言

最近用Vue.js做了一個數(shù)據(jù)查詢平臺，還做了一個拼圖游戲，突然深深的感到了vue的強大。

Vue.js是一套構(gòu)建用戶界面(user interface)的漸進式框架。與其他重量級框架不同的是，Vue 從根本上采用最小成本、漸進增量(incrementally adoptable)的設(shè)計。Vue 的核心庫只專注于視圖層，并且很容易與其他第三方庫或現(xiàn)有項目集成。另一方面，當與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用程序提供有力驅(qū)動。

Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級和修改，本文首先介紹基礎(chǔ)內(nèi)容。

1、新手指南

　　vue的使用非常簡單，下載vue.js或vue.min.js直接導(dǎo)入即可使用。

2、vue初步入門

2.1聲明式渲染

　　Vue.js 的核心是，可以采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染為 DOM：

<div id="app">
 {{ message }}
</div>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

　　這樣就會輸入：Hello Vue！

　　我們已經(jīng)生成了第一個 Vue 應(yīng)用程序！這看起來和渲染一個字符串模板非常類似，但是 Vue 在背后做了大量工作?，F(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被關(guān)聯(lián)在一起，所有的數(shù)據(jù)和 DOM 都是響應(yīng)式的。我們?nèi)绾螌@一切清晰領(lǐng)會？只需打開你的瀏覽器的 JavaScript 控制臺（現(xiàn)在，就在當前頁面打開），然后設(shè)置 app.message 的值，你將看到上面的示例所渲染的 DOM 元素會相應(yīng)地更新。

　　除了文本插值(text interpolation)，我們還可以采用這樣的方式綁定 DOM 元素屬性：

<div id="app-2">
 <span v-bind:title="message">
 鼠標懸停此處幾秒，
 可以看到此處動態(tài)綁定的 title！
 </span>
</div>
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '頁面加載于 ' + new Date().toLocaleString()  }
})

　　鼠標懸停幾秒后，就可以看到動態(tài)的提示。

　　這里我們遇到一些新內(nèi)容。你看到的 v-bind 屬性被稱為指令。指令帶有前綴 v-，表示是由 Vue 提供的專用屬性?？赡苣阋呀?jīng)猜到了，它們會在渲染的 DOM 上產(chǎn)生專門的響應(yīng)式行為。簡而言之，這里該指令的作用就是：“將此元素的title 屬性與 Vue 實例的 message 屬性保持關(guān)聯(lián)更新”。

　　如果你再次打開瀏覽器的 JavaScript 控制臺，并輸入 app2.message = '一些新的 message'，就會再次看到，綁定了title 屬性的 HTML 已經(jīng)進行了更新。

2.1條件與循環(huán)

　控制切換一個元素的顯示也相當簡單：

<div id="app-3">
 <p v-if="seen">現(xiàn)在你可以看到我</p>
</div>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

　　繼續(xù)在控制臺輸入 app3.seen = false，你應(yīng)該會看到 span 消失。

　　這個示例表明，我們不只是可以將數(shù)據(jù)綁定到文本和屬性，也可以將數(shù)據(jù)綁定到 DOM 結(jié)構(gòu)。而且，Vue 也提供一個強大的過渡效果系統(tǒng)，可以在 Vue 插入/更新/刪除元素時，自動使用過渡效果。

　　還有其它一些指令，每個都具有各自不同的特殊功能。例如，v-for 指令，可以使用數(shù)組中的數(shù)據(jù)來展示一個項目列表：

<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: '學(xué)習(xí) JavaScript' },
  { text: '學(xué)習(xí) Vue' },
  { text: '創(chuàng)建激動人心的代碼' }
 ]
 }
})

3 、vue實例

　　每個 Vue 應(yīng)用程序都是通過 Vue 函數(shù)創(chuàng)建出一個新的 Vue 實例開始的：

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

　　盡管沒有完全遵循 MVVM 模式，但是 Vue 的設(shè)計仍然受到了它的啟發(fā)。作為約定，通常我們使用變量 vm (ViewModel 的簡稱) 來表示 Vue 實例。

3.1data 和 methods

　　在創(chuàng)建 Vue 實例時，會將所有在 data 對象中找到的屬性，都添加到 Vue 的響應(yīng)式系統(tǒng)中。每當這些屬性的值發(fā)生變化時，視圖都會“及時響應(yīng)”，并更新相應(yīng)的新值。

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

　　每當 data 對象發(fā)生變化，都會觸發(fā)視圖重新渲染。值得注意的是，如果實例已經(jīng)創(chuàng)建，那么只有那些 data 中的原本就已經(jīng)存在的屬性，才是響應(yīng)式的。也就是說，如果在實例創(chuàng)建之后，添加一個新的屬性，例如：

vm.b = 'hi'

　　然后，修改 b 不會觸發(fā)任何視圖更新。如果你已經(jīng)提前知道，之后將會用到一個開始是空的或不存在的屬性，你就需要預(yù)先設(shè)置一些初始值。例如：

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

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

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) {
 // 此回調(diào)函數(shù)將在 `vm.a` 改變后調(diào)用
})

3.2vue實例的聲明周期

　　vue實例的聲明周期是一個很重要的概念，理解之后可以通過它實現(xiàn)很多功能。

　　看下這段代碼。

<!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('創(chuàng)建vue實例前',this);
   },
   created: function(){
    showData('創(chuàng)建vue實例后',this);
   },
   beforeMount:function(){
    showData('掛載到dom前',this);
   },
   mounted: function(){
    showData('掛載到dom后',this);
   },
   beforeUpdate:function(){
    showData('數(shù)據(jù)變化更新前',this);
   },
   updated:function(){
    showData('數(shù)據(jù)變化更新后',this);
   },
   beforeDestroy:function(){
    vm.test ="3333";
    showData('vue實例銷毀前',this);
   },
   destroyed:function(){
    showData('vue實例銷毀后',this);
   }
  });
  function realDom(){
   console.log('真實dom結(jié)構(gòu)：' + document.getElementById('container').innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log('data 數(shù)據(jù)：' + obj.test)
   console.log('掛載的對象：')
   console.log(obj.$el)
   realDom();
   console.log('------------------')
   console.log('------------------')
  }
 </script>
</html>

　看一下效果圖

　　通過控制臺的打印效果可以看出來，實例化 vue 對象大致分為創(chuàng)建vue實例、掛載到dom、數(shù)據(jù)變化更新、vue實例銷毀 4個階段，，注意每個階段都有對應(yīng)的鉤子，我們可以通過對這些鉤子進行操作，達成一些功能。雖然初學(xué)者用不太上，但是提前了解一下還是好的，到時候碰到實際功能要能想得到生命周期的鉤子。

總結(jié)

以上所述是小編個大家介紹的詳解 vue.js用法和特性，希望對大家有所幫助！

您可能感興趣的文章: