[Vue學習筆記]（二）資料綁定與Vue基礎
本篇重點會描述Vue如何做資料的綁定，及基礎的指令（v-if、v-bind)。
ㄧ、Vue實例與資料綁定
（ㄧ）Vue的實例化
要建立Vue的應用非常容易，只要建置出一個Vue的物件，就能使用，
var app = new Vue({
// 選項
})- el 選項
el是用來指定一個頁面中的DOM元素，可以是HTMLElement、CSS選擇器，比方說：
<div id = "app></div>
var app = new Vue({
el: '#app'
})這樣就掛載成功了，之後我們如果要存取<div id = “app></div>的元素，我們都能直接透過app.$e1來進行存取，Vue提供很多的屬性跟方法，之後會一一做介紹。
- data 選項
我們也可以在Vue中建立data的選項，將可能會用到的資料全部放到data之中，方便我們維護。
var app = new Vue({
el:'#app',
data: {
name: 'andy'
}
})
console.log(app.name); // andy
// 修改資料
app.name = 'alex';
console.log(app.name); // alex（二）Vue的生命週期
- 鉤子函數：在所有函數執行前，先執行的函數
Vue實例化之前，會經歷一系列的初始化過程，也會呼叫對應的生命週期鉤子函數，如下圖所示
從以下程式碼，我們先創建上圖中每一個生命週期函數，並在console打印出來，要注意的是，beforeDestroy與destroyed只會在Vue自己使用$destroy摧毀才會被調用。
結果為下圖：
(三）Vue的內插與運算式
如果我們想要在視圖中看到資料的內容，可以使用{{ }}來內插資料，並將我們綁定的資料即時顯示出來。
如下面程式碼，我們在data中定義一個名為car的資料，只要在視圖中使用{{car}} 就能顯示出car的資料內容 ‘藍寶堅尼’。
若只想顯示html而非將資料解釋後的純文字，可以使用v-html
我們也可以在{{}}裡面進行js的運算式操作，如：
{{ number/10 }}
{{ isOK ? '確定':'取消' }}（五）篩檢程式
如果想要先格式化文本，我們可以添加” | ”對資料進行過濾，舉例，假設我暪想要讓字母全部變成大寫可以這樣寫，先在Vue的選項中加入一個filters的屬性，裡面是放你想要怎麼修改資料的函數。
輸出： ANDY
二、指令與事件
指令是Vue中最常使用的功能，它的字首為“v-”，上面寫過的v-html就是一種指令，主要的功能為當運算式的值改變時，對應將某些行為應用到DOM之上。
v-if
<div id = '#app'>
<p v-if = "show">顯示此文</p>
</div>
<script>
var app = new Vue({
el:'#app'
data:{
show:true
}
})當show為true時，v-if = true，p標籤就會被插入，反之為flase的話，p標籤就會被移除，Vue會優雅地幫你處理DOM的事情。
v-bind
v-bind是用來跟data進行綁定，如下列所示，當imgUrl的資料變更時，src也會進行變更，這是bind最基本的用法，我們也可以使用它來操作class屬性。
<div id = '#app'>
<img v-bind:src = "imgUrl" />
</div>
<script>
var app = new Vue({
el:'#app'
data:{
imgUrl: 'http://xxx.png'
}
})v-on
v-on超級重要，他就是用來監聽DOM事件，比方說onclick、onmouseover等事件，如下列程式：
<div id = '#app'>
<input type="button" value="按鈕" v-on:click="onClick">
</div>
<script>
var app = new Vue({
el:'#app',
methods: {
onClick:function(){
alert("123");
}
}
})
</script>當我們按下按鈕時，就會觸發onClick這個方法。
我們通常會將方法或函數寫在methods裡面，與data分開管理，函數內有一個this屬性指向的是目前Vue實例的本身，所以可以透過「this.屬性」的形式改變資料。
v-bind v-on簡寫
- v-bind
<a v-bind:href="url"></a>
可寫成：
<a :href="url"></a>- v-on
<button v-on:click="handleClick"></button>
可寫成：
<button @click="handleClick"></button>這次介紹了Vue的生命週期與許多基本的概念，我覺得最難理解的地方就是v-bind，需要透過多加練習來理解此觀念。
Github連結
我是Andy，謝謝你看完這篇文章，如果文章有幫助到你的話，希望不吝於幫我拍手 🙌🙌
