[程式] Vue 基本介紹 : RAELLEN

Vue.js 介紹

Vue.js 具備直觀的語法讓開發者在學習上都可以輕鬆上手，搭配它簡單的雙向綁定，讓我們可以專注於資料狀態的管理。搭配它多樣化的延伸工具，可以開發 SPA ( Single Page Application )。

MVVM 結構 Vue不是一個完全MVVM的架構，只是受到MVVM的啟發。我們在畫面上看到的外觀就是View，而我們所操控的就是Model。

資料的動態 ViewModel是與畫面做綁定的，因此寫程式碼時只需要寫Model，資料變動的同時，ViewModel就會去控制視圖的變化。因此調整視圖或是資料時，View及Model兩邊的資訊會同時變更。

可以放入多個Vue app(應用程式) 宣告多個 Vue 應用程式，在Vue的開發者工具中就會看見多個<root> 但通常只會建立一個應用程式。

不適用巢狀結構應用程式中不能包另外一個應用程式。

開發環境 Vue 是透過資料來驅動畫面的，而資料是不斷在變動的，因此除錯時需要了解目前資料的狀態。基於以上狀況， Vue 較難以使用console.log的方式來進行除錯，利用瀏覽器中 Vue 插件的環境來除錯，是比較理想的方式。

透過CDN 建置新專案

對於製作原型或學習，你可以這樣使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

對於生產環境，我們推薦鏈接到一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

透過vue-cli 建置新專案

$ npm install -g vue-cli
$ vue init webpack-simple [project name]

$ cd [project name]
$ npm install
$ npm run dev

建立應用程式

Vue在建立時會宣告一個新的 Vue 應用程式，裡面擺放物件；而生成之後必須綁定一個 HTML 的元素。而Vue一次只能綁定一個元素，因此綁定ID是比較好的。

in body

<div id="vueApp">
  {{ text }}
</div>

in script

var app = new Vue({
  el: '#vueApp',
  data: {
    text:'這裡是一串文字',
    array:[
    {item1},
    {item2}
    ]
  }
})

MVVM 的概念

MVVM與MVC的差別

MVC 概念

透過Controller轉接去要求Model取資料

MVVM 概念

ViewModel是與畫面做綁定的，因此寫程式碼時只需要寫Model，資料變動的同時，ViewModel就會去控制視圖的變化。

因此調整視圖或是資料時，View及Model兩邊的資訊會同時變更。

與傳統jQuery的差別

傳統的jQuery是直接操作DOM元素，而Vue.js在操作DOM元素時是透過資料的狀態去操作畫面。

聲明式渲染

Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進DOM 的系統：在script中綁定好元素，再回到元素中用{{}}去呼叫

在 html 中

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

Vue指令

vue指令 Vue筆記除了使用{{}}的方式，也可利用指令的方式來綁定資料。

v-model：可以實現資料的雙向綁定
v-text：相當於js的innerText
v-html：相當於js的innerHTML
v-bind：（單向）動態綁定一個或多個attribute屬性指令
v-for、v-if：做類似forEach的迴圈
v-on：處理互動行為

常見簡寫

v-on: == @
v-bind ==

v-model 雙向綁定

可以透過本指令，綁定物件的資料。說明 : 把 input的value值 和 data里的msg 绑定到了一起,一方改变,另外一方也会跟改变

使用方式 : v-model 一般使用在表單元素上
限制使用：
- <input>
- <select>
- <textarea>
- components

重點 : v-model 使用在不同的表单元素上, 绑定的值不一样 v-model 绑定到文本输入框里面 => 绑定是字符串类型的内容 v-model 绑定到多选框里面 ==> 绑定是布尔类型true/false

in body

<div id="vueApp">
    <input type="text" v-model="message">
</div>

in script

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

v-html

預期：string
詳細：更新元素的innerHTML。注意：內容按普通HTML插入-不會作為Vue模板進行編譯。如果試圖使用v-html組合模板，可以重新考慮是否通過使用組件來替代。

Html注意事項在網站上動態渲染任意HTML是非常危險的，因為容易導致XSS攻擊。只在可信內容上使用v-html，永不用在用戶提交的內容上。

v-bind 動態屬性指令

單向動態綁定數據（從M->V）透過增加屬性的方式，可以連結圖片或是網址、或是增加class

v-bind官方說明
簡寫：v-bind: 可簡寫為 :

{{}} 不能用在属性值上, 一般使用在标签内容部分，位置
v-bind 動態綁定一個數據 (單向 M -> V)
v-bind 一般使用在屬性上，任意標籤皆可使用

v-bind:class 動態切換

官方說明：Class與Style綁定

對象語法：我們可以傳給 v-bind:class 一個對象，以動態地切換 class 。注意 v-bind:class 指令可以與普通的 class 特性共存

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

data中可以放入類似JSON的資料結構，也就是可以放置陣列進去。添加v-for的屬性做類似forEach的迴圈，並且在標籤中渲染出值。

顯示陣列中數值

 <pre>{{陣列名稱}}</pre>

v-for寫法

作用：巡訪陣列，創造出對應的標籤。

寫法：先v-for指定某個陣列，再在標籤中以{{}}呼叫該陣列的元素

基本寫法

          陣列元素          
<li v-for='item in list'>{{ item.name }} {{ item.id }}</li>

取出陣列索引值

            陣列元素,元素對應的索引
<li v-for='(item,index) in list' >{{ item }} {{ index }}</li>

巡訪特定對象

<li v-for='(value,key) in obj'>{{ value }} {{ key }}</li>

巡訪次数

<li v-for='i in 100'>{{ i }}</li>
<li v-for='i in 100'>{{ i - 1 }}</li>

範例

在html中

<ui>
  <li v-for="item in list">
    {{item.name}}
  </li>
</ui>

在script中

var app = new Vue({
  el: '#app',
  data: {
    list: [
      {
        name: '小明',
        age: 16
      },
      {
        name: '媽媽',
        age: 38,
      },
      {
        name: '漂亮阿姨',
        age: 24
      }
    ]
  }
})

v-if

在v-for的迴圈中加入判斷式

寫法：直接在標籤裡面增加v-for的屬性來添加判斷式

in body

<ul>
    <li v-for="item in list" v-if="item.age < 25">
      {{ item.name }} 年齡是 {{ item.age}}
    </li>
</ul>

v-on : 處理互動行為

官方說明：v-on
v-on: 可簡寫為 @

綁定事件，觸發方法會寫在html的元件上，而不是Vue.js的原始碼中。

寫法：在input中用v-model綁定text，並在data底下再新增一個 method 物件，然後使用 v-on:觸發方式 = "methods"來綁定物件。

在底下利用{{}}呼叫新的newText值

<input v-model="text">
<button v-on:click="reverseText">我是按鈕</button>
{{newText}}

v-on後加上判斷式

在v-on後可以加入判斷式，判斷式直接套用物件，就可以不用寫完整的method。 <button ＠click="isTransform = !isTransform"></button>

關於`this`在 Vue 的用法

在 JavaScript 中 this 在全域環境都會指向 window 如果在 Vue 中 this則會指向 Vue 的 app

利用this指定data底下的物件

範例：

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

修飾符

v-on 搭配修飾符，能夠直接調用事件，而不用通過method。

事件修飾符
- 官方說明：事件修飾符
- 範例：v-on:click.prevent，利用修飾符取代event.preventDefault();

<a href="#" v-on:click.prevent></a>

按鍵修飾符
- 官方說明：按鍵修飾符
- 範例：v-on:keyup.enter，submit會在key是enter時調用

<input v-on:keyup.enter="submit">

computed 運算功能

computed是app中的一個功能，它透過 data 中的值的變更，將結果回傳於變數中，並且可以運用在畫面上。在 computed 中所宣告的任何屬性都會是 function ，且它都會 return 一個值。

範例：

<div id="app">
    {{ reverseText }}
</div>


<script>
    var app = new Vue{
        el: '#app',
        data: {
            text: '',
            newText:''
        },
        computed: {
            reverseText: function(){
            return this.text
            }
        }
    }
</script>

Methods 及 Computed 差別

computed
- 在監控資料更動後，重新運算結果呈現於畫面上
- 一般來說不會修改資料，只會回傳用於畫面呈現的資料
methods
- 就是互動的函式，需要觸發才會運作
- 會用來修改資料內容
效能
- 資料量大時， computed 只要資料變動就會觸發，無形之中執行次數也會增加，自然會比較慢。因此在大量資料時，會建議透過 methods 減少不必要的運算喔

Vue 表單與資料的綁定

選項
雞

豬

牛

晚餐火鍋裡有{{ item }}。

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model="checkboxArray" value="雞">
    <label class="form-check-label" for="check2">雞</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check3" v-model="checkboxArray" value="豬">
    <label class="form-check-label" for="check3">豬</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check4" v-model="checkboxArray" value="牛">
    <label class="form-check-label" for="check4">牛</label>
  </div>
  <p>晚餐火鍋裡有<span v-for="item in checkboxArray">{{item}}</span>。</p>