vue.js用法和特性詳解

知識 10-14

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

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

1、新手指南

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

2、vue初步入門

2.1聲明式渲染vue的使用非常簡單，下載vue.js或vue.min.js直接導入即可使用。

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

<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 元素屬性：

<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.js用法和特性詳解

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

更多優質內容推薦：

2017優就業就業促進計劃：http://www.ujiuye.com/zt/jycj/?wt.bd=zdy35845tt

中公教育「勤工儉學計劃」，給你一個真正0元學習IT的機會！

http://www.ujiuye.com/zt/qgjx/?wt.bd=zdy35845tt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 IT優就業 的精彩文章:

※spring cloud+dotnet core搭建微服務架構
※Python內置類型——布爾運算
※MYSQL和JDBC的基礎回顧
※NET 實用擴展方法
※this指向調用方

TAG:IT優就業 |