如今Vue.js越來越火了，主學後端的我也開始學習前端的熱門框架了。首先簡單介紹一下Vue.js,Vue.js是以數據驅動和組件化的思想構建的。相比於Angular.js，它提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用。
如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因爲Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery。
Vue.js主要採用MVVM模式，如下圖所示，主要描述了該模式下ViewModel是如何和View以及Model進行交互的。
ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是作用於某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。
好了，理論簡單介紹了一下，接下來我們來擼代碼了，我用的是vue-2.6.10.js,大家可以在官網或者Github上進行下載。接下來我會先亮出代碼，然後挑裏面重要的知識點進行講解，第一個Demo如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js基礎指令</title>
<style>
[v-cloak] {
display: none;
}
</style>
<script src="vue-2.6.10.js"></script>
</head>
<body>
<!-- Vue實例控制的元素區域,就是MVVM中的V -->
<div id="app">
<!-- 使用v-cloak能夠解決插值表達式閃爍的問題 -->
<p v-cloak>{{ msg }}</p>
<!-- 默認v-text沒有閃爍問題 -->
<h4 v-text="msg"></h4>
<p v-html="msg2"></p>
<!-- v-bind中,可以寫合法的JS表達式,縮寫是: -->
<input type="button" value="按鈕" :title="mytitle+'123'">
<!-- v-on代表事件綁定機制,縮寫是@ -->
<input type="button" value="按鈕" @click="show">
</div>
<script>
//創建Vue的實例,vm對象相當於MVVM中的VM調度者
var vm = new Vue({
el: '#app', //表示new的Vue實例要控制頁面上哪個區域
//data相當於MVVM中的M,用來保存每個頁面中的數據
data: { //data屬性存放的是el要用到的數據
msg: '歡迎學習Vue',//通過Vue提供的指令,很方便就能把數據渲染到頁面,
// 不再手動操作DOM元素了
msg2: '<h1>大家好,我是autumn_leaf.</h1>',
mytitle:'這是我自己定義的title'
},
methods: {
show: function () {
alert('Hello!');
}
}
})
</script>
</body>
</html>
上述代碼中，body中div中的id值爲app，在新建的Vue實例中屬性el標註爲id的值，在前面加上'#'，便可以控制這一片的頁面區域，我們可以看到主頁面區域用到了五個指令，分別是v-cloak,v-text,v-html,v-bind,v-on,接下來我會逐一進行講解。
（1）v-cloak: 該指令主要用於解決屏幕閃動的問題，當網絡較慢時，網頁還在加載Vue.js,而導致Vue來不及渲染,這時頁面就會顯示出 Vue 源代碼。而我們可以使用 v-cloak 指令來解決這一問題；
（2）v-text: 該指令主要用於將數據解析爲純文本，但是卻不能輸出真正的html；
（3）v-html:該指令可以用來解析html的代碼，並輸出文本的信息；
（4）v-bind:該指令主要用於給html標籤設置屬性，在以上代碼中，我們縮寫成了:符號,我們綁定了input標籤的title屬性,裏面的內容可以是合法的js表達式；
（5）v-on:該指令主要用於綁定html事件，在以上代碼中，我們縮寫成了@符號，我們通過調用methods對象裏的show函數，從而顯示出Hello；
在整個代碼裏面，我們沒有操作DOM元素，通過Vue實例中的data屬性就可以直接添加數據了。
以上代碼運行結果如下圖所示：
鼠標放在第一個按鈕上，會出現"這是我自己定義的title123''的字樣，點擊第二個按鈕，會跳出Hello的彈出框。
上述代碼中,<div id="app">.......</div>相當於MVVM中的V，創建的vm實例相當於VM調度者,而data屬性相當於MVVM中的M，用於保存頁面的數據，確實邏輯清晰，容易學習。
好了，基礎知識就介紹到這兒了，接下來我們寫一個跑馬燈的小案例來鞏固剛剛所學的內容，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑馬燈效果</title>
<script src="vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="浪起來" @click="lang">
<input type="button" value="低調" @click="stop">
<h4>{{ msg }}</h4>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
msg: '猥瑣發育,別浪!穩住,我們能贏!',
intervalId: null //在data上定義計時器id
},
methods: {
lang() {
//防止多次點擊
if(this.intervalId != null) return ;
//console.log(this.msg);
this.intervalId = setInterval(() => {
//截取開頭字符以及結尾字符
var start = this.msg.substring(0, 1);
var end = this.msg.substring(1);
//重新拼接,得到新的字符串
this.msg = end + start;
}, 400)
},
//停止計時器
stop() {
clearInterval(this.intervalId);
//每當清除了計時器id,需要重新置爲null
this.intervalId = null;
}
}
})
</script>
</body>
</html>
運行效果如下圖所示：
我們點擊浪起來的按鈕，會不斷出現"猥瑣發育,別浪!穩住,我們能贏!"的倒體字樣，當我們點擊低調的按鈕時，則當前字樣靜止不動。
在data屬性中我們定義了兩個參數，一個是msg用來顯示信息，一個intervalId用來表示計時器的id,methods對象中定義了兩個函數，分別是lang函數和stop函數，在lang函數中，我們爲了防止多次點擊的情況出現，先進行了if語句的判斷，然後用到了setInterval函數，裏面用於截取新的字符信息，傳給msg，並設置了400ms的頻率週期，在stop函數中，每當我們點擊清空計時器的id時，必須要重新賦值爲null,這樣接下來再次點擊浪起來纔不會出現問題。
好了，本次的分享就到這裏了，接下來我會繼續更新Vue相關的知識，有疑惑的同學可以評論區下方進行留言哦！