一個Java後端的Vue自學筆記
JavaScript的強大不必多言。做為一名後端開發工程師，不會前端是不行的，這年頭走哪都講究個全棧麼。Angular、React、Vue等js庫的出現，徹底顛覆了後端開發對前端的認識。本人最近自學了一些Vue的皮毛，寫下這篇部落格不是為了譁眾取寵，權當是為自己做一個Vue學習筆記。這篇部落格主要記錄了我學習Vue基礎知識，完成一個TodoList小功能的開發過程。
首先進入Vue的官網下載Vue.js（Vue官網下載）開發版本，由於是學習基礎知識，就不使用CDN了。儲存vue.js之後，新建index.html檔案：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門</title> <script src="./vue.js"></script> </head> <body> <!-- --> <div id="root">{{msg}}</div> <script> var my_vue = new Vue({ el:"#root", data:{ msg:"hello world" } }) </script> </body> </html>
在這個index.html檔案中，使用引入<script>將剛才下載的vue.js巢狀進來。建立一個id="root"的div，稱之為掛載點，然後在js程式碼中建立名為my_vue的vue例項( var my_vue = new Vue({...}) )，其中el表示接管的DOM物件，此時我們建立的my_vue就和這個div進行了繫結。我們還在my_vue中定義了data，其中msg的值為"hello world"，而在div中接收時，需要使用{{msg}}（插值表示式）的形式進行接收。瀏覽器中的效果如圖：
我們還可以在my_vue中定義模板template，在其中可以指定具體的html內容，此時掛載點中內容就是模板中的內容。
在data中還可以定義其他的資料，在掛載點中用v-text或v-html的形式進行顯示：
<h1 v-text="msg"></h1><h1 v-html="msg"></h1>二者的區別在於v-text會進行轉譯，而v-html不會
vue中可以使用@符號對元素繫結事件，例如@click，然後在vue例項中新增methods，在其中定義具體的方法：
<h1 @click="handleClick">{{msg}}</h1> ... var v1 = new Vue({ el:"#root", data:{ msg:"hello world" }, methods:{ handleClick:function(){ this.msg = "你好，世界" } } })
此時，點選"hello world"之後，其內容就會變成"你好，世界"。這裡，我們發現一個現象，當msg的值改變之後，我們不需要直接操作dom，vue例項會監聽到資料的改變，自動對dom進行更新，頁面也自動發生了改變。
我們可以使用 ： 進行屬性的繫結，將vue例項中的資料繫結到掛載點的屬性值中。使用v-model指令進行雙向繫結，即頁面中的值發生改變時，會改變vue例項中的值：
...
<input v-model="content"/>
<div>{{content}}</div>
...
var v1 = new Vue({
el:"#root",
data:{
content:"this is content"
}
})可以使用computed指令表示計算屬性，使用watch指令表示偵聽器：
<div id="root">
<div>
<input v-model="firstName"/>
<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
</div>
<script>
var v1 = new Vue({
el:"#root",
data:{
firstName:"",
lastName:"",
count:0
},
computed:{
fullName:function(){
return this.firstName +" "+ this.lastName
}
},
watch:{
fullName:function(){
return this.count++
}
}
})
</script> 我們可以使用v-if和v-show來控制元素的顯示與否，二者的區別在於：當傳入的顯示值是false時，v-if會在頁面上將控制的dom刪除掉，而v-show會改變dom的css為display：none
<div id="root">
<div v-if="show">hello world</div>
<div v-show="show">你好，世界</div>
<button @click="handleClick">toggle</button>
</div>
<script>
var v1 = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>使用v-for來迴圈展示list：
<div id="root">
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
var v1 = new Vue({
el:"#root",
data:{
list:[1,2,3]
}
})
</script>其中item表示迴圈中具體的每一項元素，index表示該元素的下標，這裡我們需要為迴圈體指定一個key屬性以提高渲染的效率，這裡使用index作為key的值（實際上這不是一個好的選擇）
現在，我們需要明白元件的概念。元件其實就是指頁面上的某一部分。在Vue中，元件就是例項，例項就是元件。元件之間也是可以互相通訊的。可以使用下面的程式碼定義一個全域性元件：
<script>
Vue.component('todo-item',{
template:'<li>abc</li>'
})
</script>最後，進行一個TodoList的功能的開發，附上程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門-TodoList的刪除功能-----</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--<li v-for="(item,index) of list" :key="index">{{item}}</li>-->
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item><!--訂閱 監聽delete 監聽之後呼叫handleDelete方法-->
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index); //釋出 標誌為delete
}
}
})
var v1 = new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit:function(){
if(this.inputValue.trim() == ""){
alert("請輸入內容");
this.inputValue = "";
return ;
}
this.list.push(this.inputValue);
this.inputValue="";
},
handleDelete:function(index){
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>在這段程式碼中，我們實現了TodoList非常簡單的功能：在input框中輸入內容，點選提交之後，就會以ul的形式展示出來，當點選ul中的li時，就會將其刪除掉。
首先我們使用v-model指令將input框的值和vue例項v1中的inputValue進行了雙向繫結，然後提供了提交按鈕的click事件和方法。然後我們定義了名為'todo-item'的元件，在其中定義了其模板是一個li標籤，並對其進行了v-for迴圈。在todo-item元素中，我們給了他一個屬性content其值為item，也就是迴圈的list中的元素，而這個content元素是通過父元件傳給他的，所以需要寫成：content（我們可以認為id="root"的div為父元件，而todo-item為子元件），同樣的，父元件通過index屬性將迴圈中的index傳給了子元件。而子元件想要接收content和index這兩個屬性，就需要在props中定義（props:['content','index']）而這就是父子元件之間的通訊：父元件將值以屬性的形式傳給子元件。然後，子元件再其模板中將content元素以差值表示式的形式顯示出來。這樣我們就實現TodiList的新增功能。
而要實現TodoList的刪除功能，我們首先需要明確，其實我們就是通過子元件的click事件，將自己的下標告訴父元件，然後在父元件中將list中的對應下標的一項刪掉即可，而這就是父子元件之間的通訊：子元件將值傳給父元件。這裡我們需要用到釋出/訂閱模式，在子元件的每一個li中，我們已經從父元件那裡接收到了自己的index值，所以只需要定義一個handleClick方法，在這個方法中，我們使用釋出模式（this.$emit('delete',this.index)），以delete為標記，將index值釋出出去。而在父元件中，通過@delete的形式發起訂閱，當監聽到delete的釋出之後，呼叫父元件自身的handleDelete方法，然後在該方法中將list中對應的元素刪除即可。