詳解 vue.js用法和特性

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

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

前言

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

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

Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級(jí)和修改，本文首先介紹基礎(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!'
 }
})

　　這樣就會(huì)輸入：Hello Vue！

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

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

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

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

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

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

2.1條件與循環(huán)

　控制切換一個(gè)元素的顯示也相當(dāng)簡單：

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

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

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

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

<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)建激動(dòng)人心的代碼' }
 ]
 }
})

3 、vue實(shí)例

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

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

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

3.1data 和 methods

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

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

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

vm.b = 'hi'

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

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

　　除了 data 屬性， Vue 實(shí)例還暴露了一些有用的實(shí)例屬性和方法。這些屬性與方法都具有前綴 $，以便與用戶定義(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 是一個(gè)實(shí)例方法
vm.$watch('a', function (newValue, oldValue) {
 // 此回調(diào)函數(shù)將在 `vm.a` 改變后調(diào)用
})

3.2vue實(shí)例的聲明周期

　　vue實(shí)例的聲明周期是一個(gè)很重要的概念，理解之后可以通過它實(shí)現(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">
  //以下代碼時(shí)顯示vm整個(gè)生命周期的流程
  var vm = new Vue({
   el: "#container",
   data: {
    test : 'hello world'
   },
   beforeCreate: function(){
    console.log(this);
    showData('創(chuàng)建vue實(shí)例前',this);
   },
   created: function(){
    showData('創(chuàng)建vue實(shí)例后',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實(shí)例銷毀前',this);
   },
   destroyed:function(){
    showData('vue實(shí)例銷毀后',this);
   }
  });
  function realDom(){
   console.log('真實(shí)dom結(jié)構(gòu)：' + document.getElementById('container').innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log('data 數(shù)據(jù)：' + obj.test)
   console.log('掛載的對(duì)象：')
   console.log(obj.$el)
   realDom();
   console.log('------------------')
   console.log('------------------')
  }
 </script>
</html>

　看一下效果圖

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

總結(jié)

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

您可能感興趣的文章: