MVVM

Vue的整體概念是MVVM。
View(介面) -> ViewModel(資料繫結器) -> Model(資料狀態)
在MVVM的架構中，各部份處理的任務是

模型(Model)：負責提供數據，例如：新增、刪除、修改。
介面(View)：負責展示數據。
ViewModel(VM)：負責處理業務邏輯(像是觸發事件)。將 View 和 Model 綁定為 ViewModel，當數據發生改變，View 會即時更新。

創建Vue物件

首先，先來介紹一下怎麼在專案上使用Vue。
ex:

---HTML---
<div id="app">
    {{message}}
        <input type="text" v-model="message"> 
</div>

---JavaScript---
var app = new Vue({
    el: '#app',
    data: {
        message: '你好嗎'
    }
})

在上面這個範例，在HTML文件中，我們有先為一個區塊命名一個id叫app。
接著，你在你的JS檔案裡面，創建一個變數，並用他來創建Vue的物件。
像上面這個例子，就是用app這個變數去創建Vue物件。
接著，在Vue的物件的成員屬性中，
el 是代表你要綁定區塊的id或class名稱是什麼。
通常我們不會綁定class名稱，因為，相同的class名稱可以在專案裡面重複宣告，這樣會造成
Vue的物件綁定錯誤。
所以，通常都會綁定id名稱。
data 這個成員屬性裡面，就放各種資料在裡面，像這邊就是放message這個字串成員。

Vue物件不要巢狀的方式創建

---html---
<div id="app">
   {{ text }}
   <div id="app2">
         {{ text2 }}
   </div>
</div>

---JavaScript---
var app = new Vue({
   el: "#app",
   data:{
      text: '這是一段話'
   }
})

var app2 = new Vue({
   el: "#app2",
   data:{
      text2 : '這是一段話2'
   }
})

以上這個範例會報錯，它會說’text2 is not defined’，及瀏覽器找不到text2。
由此可知，雖然，創建兩個Vue的應用程式在同一個html文件中是沒問題的。
但是，你不能用巢狀的方式來建立Vue的應用程式，這樣會導致內層的Vue物件，
瀏覽器會找不到它，進而報錯。

v-model

v-model: 跟資料形成雙向綁定的功能。
通常會用在input或textarea這種場合。

---HTML---
<div id="app">
    {{message}}
        <input type="text" v-model="message"> 
</div>

---JavaScript---
var app = new Vue({
    el: '#app',
    data: {
        message: '你好嗎'
    }
})

以上這個例子，input的欄位會跟message的內容完成雙向綁定，
及我們也可以同時透過修改input欄位裡面的內容，即時的更改
畫面中message的內容。

v-text

v-text: 將文字內容塞到指定的html標籤中。
ex:

---HTML---
<div id="app">
    <div v-text="message"></div>
</div>

---JavaScript---
var app = new Vue({
    el: '#app',
    data: {
        message: '你好嗎'
    }
})

以上這個範例，我們就可以將message的內容，透過v-text，
塞到div這個html標籤中，有點像新增textNode節點的方式。

v-html

v-html: 可以插入新的html標籤。
ex:

---HTML---
<div id="app">
    <div v-html="message"></div>
</div>

---JavaScript---
var app = new Vue({
    el: '#app',
    data: {
    message: '<h1>標題一</h1>'
    }
})

以上這個範例，透過v-html，我們就可以將message存的html標籤的語法內容，帶入目的地。

要特別注意，如果你不是在某個html標籤中，將v-html的內容鑲進去的話，該html的內容是沒有作用的喔
即:

---HTML---
<div id="app">
    <div>你好</div>
    {{message}}
</div>

---JavaScript---
var app = new Vue({
    el: '#app',
    data: {
    message: '<h1>標題一</h1>'
    }
})

上面這個範例，在message的部分會直接變成字串'<h1>標題一</h1>'，而沒有h1的html標籤的功能喔。

v-bind

v-bind: 如果要將某個內容(像是className或網址)，直接加到某個元件的html屬性上，可使用v-bind。
v-bind還有另一個寫法，就是縮寫:。
ex:

<div id="app">
    <img v-bind:src="imgSrc" v-bind:class="className" alt="">
</div>

---v-bind的縮寫寫法---

<div id="app">
    <img :src="imgSrc" :class="className" alt="">
</div>

另外，不要跟v-model搞混。
v-model跟資料做雙向綁定。
v-bind將某些內容加到某個元件的html屬性上。
ex:

---HTML---
<div id="app">
    <img v-bind:src="imgSrc" v-bind:class="className" alt="">
</div>

---JavaScript---
var app = new Vue({
    el: '#app',
    data: {
        imgSrc: '圖片網址',
        className: 'img-fluid'
    }
})

像上面這個例子，我們就利用v-bind把imgSrc的圖片網址，
塞到img元件的src屬性裡面了。
同時，也利用v-bind將class的屬性綁定成className。

另外，v-bind可以達到動態切換css樣式。
就是 v-bind:style
ex:

---HTML---
<div id="app">
    <img v-bind:src="imgSrc" v-bind:style="styleObject" alt="">
</div>

---JavaScript---
var app = new Vue({
    el: '#app',
    data: {
        imgSrc: '圖片網址',
        styleObject: {
            height: '100px',
            width: '100px'
        }
    }
})

如此，就可以為該img元素套上寬、長各100px的css樣式了。

v-for

v-for: 動態產生多筆資料於畫面上

可以看到在data裡面放有一個陣列list，該陣列裡面有兩個物件。
我們利用v-for去遍歷這個陣列，並把資料呈現在li標籤裡面。

v-if

v-if: 判斷回傳值是tru或false，來決定是否要選染這個標籤
沿用上面的v-for的例子

可以看到在li標籤上，還有綁定了一個v-if判斷當item.age大於20才渲染li。

v-on

v-on: 操作頁面行為
v-on的縮寫是@。

<button v-on:click="reverseText">按鈕</button>

---v-on縮寫改成---
<button @click="reverseText">按鈕</button>

接著，是v-on的使用範例

上面這個例子，
首先，我們利用v-model將input欄位跟text成員屬性綁定在一起。
接著，在button元件，我們利用v-on將click事件與這個按鈕綁定在一起，
且當按下這個按鈕時，就會觸發reverseText這個方法的內容，也就是反字串。
最後，將反轉字串的結果存入newText屬性，並呈現在最後一格div區塊裡面。

Notice 1 :在更改newText和text這兩個成員屬性的時候，要特別加入this，
表示是app這個物件的成員屬性。
Notice 2 :函式定義的時候，要特別寫在methods這個物件裡面。
然後，methods是有s結尾的喔，不要忘了~

透過修飾符，讓v-on操作更簡便

prevenet: 它的功能跟e.preventDefault()一樣。

ex:

 ---HTML---
<div id="app">
    <input type="text" class="form-control" v-model="text">
    <a class="btn btn-primary mt-1" v-on:click.prevent="reverseText">反轉字串</a>
    <div class="mt-3">
    {{ newText }}
    </div>
</div>

---JavaScript---
var app = new Vue({
    el: '#app',
    data: {
        text: '',
        newText: ''
    },
    methods: {
        reverseText: function(){
            console.log('點我', this.name);
            this.newText = this.text.split('').reverse().join('');
        }
    }
})

你可以看到在a標籤的click事件中，有加入一個prevent的修飾符，如此，就可以達到
e.preventdefault()的效果。

其實，還有蠻多修飾符的像是enter之類的，你可以去Vue的官網文件查查。

v-class

v-class: 動態切換className
其實，它是利用v-bind和class來達成動態切換className屬性的效果
它的Vue的語法如下
v-bind:class="{'要加入的className': 判斷式}"

來看一下實際的範例

可以看到上面這個範例，判斷式是isTransform，若isTransform為true，則為該div區塊加入rotate這個className，而rotate這個class就會讓該區塊旋轉45度。
我們是透過在按鈕上綁定一個click事件，該事件會觸發讓isTransform的值變成反向的值，藉此，來切換是否讓div加入rotate這個className。

Landy Blog

基礎 Vue.js 概述