初識Vue
這段時間由于疫情一直宅在家里，正好趕上學(xué)校有個網(wǎng)頁設(shè)計的比賽滔韵，于是我就做了一個匯總疫情新聞數(shù)據(jù)等等的網(wǎng)頁參加比賽肆捕。
到了今天，網(wǎng)頁基本邏輯已經(jīng)通過jQuery實現(xiàn)了咸产，但是由于是初次開發(fā)項目某宪，對于前后端的數(shù)據(jù)交互以及需要遵循什么規(guī)范等等
我不是很理解，功能雖然實現(xiàn)了锐朴，但是不知道這些寫法會不會造成什么不好的影響兴喂，而且我也不知道接下來怎么寫。所以就索性先放下這件事，
去學(xué)習(xí)一門新的技術(shù)VUE衣迷，希望通過VUE的學(xué)習(xí)找到接著開發(fā)的靈感畏鼓。
一.安裝VUE
沒什么好說的，使用一個框架之前肯定要先從官網(wǎng)上下載下來
<script src="../js/vue.js"></script>
這就直接引入html中直接使用了壶谒。
二.Hello vue!
``
<div id="app">
{{message}}
</div>
``
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
每一個新東西的第一個例子肯定是先和它打個招呼云矫，來一場美麗的邂逅。
三汗菜。使用Vue實現(xiàn)計數(shù)器
``
<div id="app">
<h2>這是一個計數(shù)器：{{counter}}</h2>
<button v-on:click="addCounter">+</button>
<button v-on:click="subCounter">-</button>
</div>
``
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter:0
},
methods:{
addCounter:function () {
this.counter++;
},
subCounter:function () {
this.counter--;
}
}
});
</script>
使用Vue讓我感到很有趣的是他能夠響應(yīng)式的將data中的數(shù)據(jù)同步渲染到網(wǎng)頁中让禀，在之前開發(fā)網(wǎng)頁中，從后臺接收來數(shù)據(jù)之后我需要先通過jQuery獲得那個需要更新的元素陨界，然后創(chuàng)建出子元素實例巡揍，再append到元素中，這個繁瑣的過程現(xiàn)在Vue都幫我們做了菌瘪。這得益于Vue聲明式的編程范式腮敌，而之前的jQuery是命令式的。
四俏扩。使用Vue展現(xiàn)列表
``
<ul id="app">
<li v-for="movie in movies">{{movie}}</li>
</ul>
``
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies:['秦時明月','海賊王','盜夢空間','黑客帝國','假面騎士']
}
});
</script>
這個列表也是響應(yīng)式輸出數(shù)據(jù)的糜工，可以打開console窗口，輸入app.movies.shift(),可以看到秦時明月條目被動態(tài)刪除了录淡，然后輸入app.movies.push("天行九歌");可以看到立馬多出了一條捌木。
之前的例子我還沒什么感覺，這個v-for指令讓我感覺有點jsp內(nèi)味了嫉戚。說實在的刨裆，vue這個Mustache語法和EL表達(dá)式有點像，都是有大括號彼水，不過Mustache胡子多一點崔拥，有兩個大括號，el就一個凤覆。el是從jsp內(nèi)置對象中取值链瓦，Mustache是從Vue對象中取值。
五盯桦。Vue的生命周期
對于一個對象慈俯，特別不是我們自己創(chuàng)建的對象，他的生命周期對于我們程序員來說也是很重要的拥峦，我們可以在這個對象的某個生命周期進(jìn)行一些操作贴膘。像是Servlet就有create,init,service,detroy這些生命階段組成的生命周期一樣，Vue也有它自己的生命周期略号。
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed
上述就是Vue的生命周期刑峡，相比Servlet來說多了很多洋闽，下面我們就通過實例來驗證這些生命節(jié)點我們都能夠執(zhí)行某些操作這個結(jié)論吧。
``
<div v-on:click="textClick" id="app">
{{message}}
</div>
``
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
textClick:function () {
this.message = "Hello World!";
}
},
beforeCreate:function () {
console.log("the Vue is start to create...");
},
created:function () {
console.log("this Vue is created...")
},
beforeMount:function () {
console.log("the Vue is start to mount...");
},
mounted:function () {
console.log("this Vue is mounted...")
},
beforeUpdate:function () {
console.log("the Vue is start to update...");
},
updated:function () {
console.log("this Vue is updated...")
}
});
</script>
注意控制臺的輸出突梦，在后面使用Vue的時候我們就可以在它的某個生命節(jié)點進(jìn)行一些操作了诫舅。
這場美麗的邂逅讓我體會到了Vue的魅力，我算是明白了為什么前端能夠由諸侯爭霸變成這天下三分的局面了宫患，接下來就一步一步走進(jìn)Vue吧
