Vue js前端框架介紹與實作

基礎

瀏覽器相容性：

Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ES 5 特性。但它支持所有相容 ES 5 的瀏覽器。

 

使用

我們可以直接使用<script>標籤直接引入Vue.js。

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

 

聲明式渲染(Render)

Vue.js 的核心使用簡單的模板語法來將數據渲染進網頁的DOM系統中。

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

var app = new Vue({ 
    el: '#app',
    data: {
        message: 'Hello Vue JS!'
    },
    
})

現在數據和 DOM 已經被建立了關聯，所有東西都是響應式的。我們要怎麼確認呢？打開你的瀏覽器的 JavaScript 控制台，我們可以找到app.message這個物件，我們修改它的值，網頁就會馬上更新文字。

 

我們也可以用這樣的方式來綁定值

<div id="app-2">
  <span v-bind:title="message">
    將滑鼠游標懸停幾秒鐘查看此處動態綁定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁面載入時間： ' + new Date().toLocaleString()
  }
})

 

如果想要控制一個元素的顯示也很簡單！

<div id="app-3">
  <p v-if="seen">你現在看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Vue js 還有其他強大的指令，v-for 這個指令可以綁定陣列資料，來渲染出一個Html列表。

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '實作整個專案' }
    ]
  }
})

Vue js的事件處理也很簡單，我可以使用v-on指令來新增一個事件監聽器。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反轉訊息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Vue js還提供了v-model指令，可輕鬆的實現前端表單輸入與js邏輯層狀態的雙向綁定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

 

組件化應用的建置：

組件系統在Vue js中是一個重要的概念，可以讓我們使用小型且獨立，可複用的組件來建構一個大型應用。

 

在Vue中註冊一個組件很簡單：

// 定義名稱為todo-item的新組件
Vue.component('todo-item', {
  template: '<li>這是一個代辦事項</li>'
})

 

現在我們可以用它來建構一個組件模板：

<div id="app">
  <ol>
    <todo-item></todo-item>
    <todo-item></todo-item>
  </ol>
</div>

這樣就可以達到複用的效果

接下來，我們來讓這個組件更複雜一點，我們來建構一個可以由父階層傳遞資料給子組件的方法，讓這個組件可以顯示不同的資訊。

Vue.component('todo-item', {
  // todo-item 組件現在接受一個"prop"，類似一個自定義的屬性，而這個prop名稱為"todo"。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

我們可以使用v-bind指令將資料集for循環到每個項目中。

<ol>
   <!--
     現在我們為每個 todo-item 提供 todo 對象
     todo 對像是一個變數。我們也需要為每個組件提 
     供一個“key”，以便資料的處理。-->
   <todo-item
    v-for="item in foodList"
    v-bind:todo="item"
    v-bind:key="item.id">
   </todo-item>
</ol>

Vue.component('todo-item', {
  // todo-item 組件現在接受一個"prop"，類似一個自定義的屬性，而這個prop名稱為"todo"。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app = new Vue({
  el: '#app',
  data: {
      foodList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '起司' },
          { id: 2, text: '馬鈴薯' }
        ]
      }
})

 

Vue Instance(實例)

Vue Instance，官網翻譯為實例，可以解釋為實體化一個Vue的物件。

一個Vue的應用可以透過new vue來建立root Vue instance。

 

Data and Methods

當一個Vue實例被創建時，它會將data所有屬性加入到Vue的reactivity system(響應式系統)，

也就是說當這些屬性值改變時，View會立即更新渲染為新的屬性值。

// 我們的數據對象
var data = { a: 1 }

// 該對象被加到一個Vue物件中
var vm = new Vue({
  data: data
})


// 數據對象屬性值與Vue物件屬性值是相同的
console.log(vm.a == data.a) // => true
 

// 設置Vue物件的屬性值，也會影響原有的數據屬性值
vm.a = 2
console.log(data.a) // => 2


// 反之亦然
data.a = 3
console.log(vm.a)  // => 3

除了數據屬性，Vue還提供了一些有用的實例屬性與方法，他們都有前缀字$，以分辨我們自訂的屬性或是官方提供的屬性方法。

例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#app',
  data: data
})

// vm.$data跟data物件是相同的
console.log(vm.$data === data); // => true

// vm的$el方法跟js的document.getElementById找元素的方法是一樣的
console.log(vm.$el === document.getElementById('app'));  // => true


// $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
    // 這個callback將在`vm.a` 改變後調用
    console.log(`newValue is ${newValue}`);
    console.log(`oldValue is ${oldValue}`);
})

// 改變data屬性a的值，就會觸發官方自訂的事件$watch
vm.$data.a = 2;

 

模板語法

Vue js使用基於Html的模板語法，允許開發者將DOM綁定至底層Vue實例中的數據。

Vue會將模板編譯成虛擬DOM渲染函數，並結合響應式系統，能計算出最少需要重新渲染那些組件，並把DOM的操作減少到最少。

 

插值

#文本

數據綁定最常見的方式就是使用"Mustache"語法，也就是跟Angular一樣使用兩個雙大括號:

<span>Message: {{ msg }}</span>

 

#原始Html

雙大括號會被解析為普通文本，如果想要輸出真正的Html，你需要使用v-html指令:

var vm = new Vue({
  el: '#app',
  data: {
    rawHtml: ' <span style="color: red">This should be red.</span>'
  }
})

<div id="app">
  <p>Using mustaches: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

 

#特性

Mustache語法不能作用在Html特性上，這時候您必須使用v-bind指令:

<div v-bind:id="dynamicId"></div>

<button v-bind:disabled="isButtonDisabled">Button</button>

var vm = new Vue({
  el: '#app',
  data: {
    // 動態id，隨機產生一個亂數  
    dynamicId: Math.random(),
    // 按鈕是否要禁用  
    isButtonDisabled: true
  }
})

 

#使用 JavaScript表達式

<div id="app">
  <!--數字相加-->
  <div>{{ number + 1 }}</div>
  <!--三元運算式-->
  <div>{{ ok ? 'YES' : 'NO' }}</div>
  <!--文字反轉-->
  <div>{{ message.split('').reverse().join('') }}</div>
  <!--動態綁定id-->
  <div v-bind:id="'list-' + id">動態綁定id</div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    // 數字  
    number: 1,
    // 布林值
    ok: true,
    // 文字  
    message: 'abcd',
    // id值  
    id: '123'  
  }
})

 

#參數

一些指令語法能接受一個參數，以指令名稱後面接冒號表示，如v-bind指令可以用於即時的更新html特性:

<a v-bind:href="url">昕力大學網站連結</a><br />

另一個例子是v-on指令，它用於監聽DOM事件:

<a v-on:click="doSomething">點擊事件</a>

var vm = new Vue({
  el: '#app',
  data: {
   url: 'https://www.tpisoftware.com/tpu/',
   doSomething: function() {
       alert('點擊了!');
   }      
  }
})

 

#動態參數

這是在2.6.0版本新增的，可以用方括號括起來代表JavaScript的一個表達式的指令參數:

<a v-bind:[attributeName]="url"> 昕力大學網站連結</a>

這邊要注意的是，可能是因為官網提到的attributeName為Vue的保留字，使用這個名稱會找不到定義。

用其他名稱即可:

var vm = new Vue({
  el: '#app',
  data: {
      bindhref: 'href',
      url: 'https://www.tpisoftware.com/tpu/',
      
  }
})

<a v-bind:[bindhref]="url"> 昕力大學網站連結</a>

 

計算屬性與監聽器

#計算屬性

如果有複雜的邏輯，都應該使用計算屬性。

使用說明如下:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // 'this' 指向vm實例物件
      return this.message.split('').reverse().join('')
    }
  }
})

計算屬性好處是他有快取的效用，這意思就是只要message還沒發生改變，多次呼叫reversedMessage計算屬性也會立即回應之前計算的結果，而不會再次執行函式。

 

#計算屬性VS監聽屬性

Vue提供了一種更通用的方式來觀察與響應Vue實例物件上數據的變動，也就是監聽屬性watch，但有些數據需要隨著其他數據變動而變動時，就很容易濫用了。

我們來看以下的例子:

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

再來比較計算屬性的寫法:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

是不是計算屬性比較簡潔呢?

只要firstName或lastName其中有個數據變動，就會呼叫計算屬性重新得到新的fullName，並刷新渲染畫面。

 

Class與Style綁定

要控制Html元素的Class，我可以用v-bind指令來處理。

 

#綁定Html Class

我們可以傳給v-bind:class一個物件對象，可以動態的切換class。

<div v-bind:class="{ active: isActive }"></div>

數據屬性isActive來決定這個active Class是否要顯示。

我們也可以傳入多組的Class來做切換，如下:

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: true
}

Class渲染結果為:

<div class="static active text-danger"></div>

 

#陣列式語法

我們可以將一組陣列資料傳給v-bind:class。

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染為:

<div class="active text-danger"></div>

 

#綁定Html Style

v-bind:style語法非常直觀。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

也可以直接綁定一個物件對象:

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '30px'
  }
}

 

#陣列式語法

也可以綁定多個Style到同一個元素上:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

 

條件渲染

v-if指令根據條件來顯示一個區塊內容。

<h1 v-if="awesome">Vue is awesome!</h1>

 

也可以用v-else指令顯示另一個區塊內容:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no!</h1>

 

另一種根據條件顯示區塊內容的指令是v-show。

<h1 v-show="ok">Hello!</h1>

v-show指令還是會把Html DOM元素渲染出來，只是使用css屬性display來顯示隱藏。

 

v-if VS v-show

v-if是真實的條件渲染，它會確保顯示或隱藏時，真的去銷毀或重建其Html DOM元素與其綁定的事件。

v-show而不管是要顯示或隱藏都會真實的渲染出Html DOM元素，再用css屬性去隱藏或顯示。

 

列表渲染

我們前面有提到v-for指令來渲染一個列表。那我們來講解一些更深入的用法。

在v-for區域中，我們可以訪問所有父作用區域的屬性。還支持當前項目的索引參數。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ indexMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    indexMessage: 'Index',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

我們也可以使用來遍歷一個物件的屬性。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

var example2 = new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

我們也可以使用第二個參數名稱(key name)，與第三個參數名稱(index索引值):

<ul id="v-for-object" class="demo">
 <li v-for="(value, name, index) in object">
   {{ index }}. {{ name }}: {{ value }}
  </li>
</ul>

 

陣列更新檢測

#變異方法 (mutation method)

Vue有以下這些監聽陣列變動的變異方法，這些方法都會觸發視圖更新:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

所以我們可以在Vue實例中的陣列資料增加一組資料，列表就會再增加一筆資料。

example1.items.push({ message: 'Baz' })

 

事件處理

#監聽事件

可以用v-on指令來監聽DOM事件，並在觸發時運行一些js函式。

<div id="example-1">
 <button v-on:click="counter += 1">Add 1</button>
 <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

我們點擊Add 1按鈕，Html中的點擊次數就會增加。

 

#事件呼叫方法

我們也可以將事件綁定我們寫好的方法。

<div id="example-2">
  <!-- `greet` 是方法名稱 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在Vue實例中的`methods`屬性定義方法
  methods: {
    greet: function (event) {
      // `this`在方法中指的是當前的Vue實例
      alert('Hello ' + this.name + '!')
      // `event` 是原生DOM事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以直接呼叫方法，
// 直接呼叫方法，就不是來自於DOM事件觸發，
// 就沒有event，所以只會alert一次。
example2.greet(); // => 'Hello Vue.js!'

 

#事件修飾符

我們事件的方法中調用event.preventDefault()或event.stopPropagation()，是很常見的用法。但是方法應該只有純粹的邏輯處理，而不是去處理DOM事件的一些細節。

所以Vue為v-on提供了事件修飾符。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止點擊事件繼續傳遞 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕捉模式 -->
<!-- 即元素本身觸發的事件先在此處理，然後才交由內部元素處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在event.target是當前元素本身時觸發處理函式 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件只會觸發一次 -->
<a v-on:click.once="doThis"></a>
        
<!-- 滾動事件的默認行為 -->
<!-- 不會等待`onScroll`完成  -->
<!-- 這包含了`event.preventDefault()`的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
        
<!-- 只有在 `key` 是 `Enter` 時調用`vm.submit()` -->
<input v-on:keyup.enter="submit">

 

#系統修飾鍵

可以用以下修飾符來實現按下對應的按鍵的監聽器。

• .ctrl
• .alt
• .shift
• .meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
        
<!-- Alt 或 Shift同時按下觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 只有Ctrl按下才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒有任何系統修飾符按下才觸發 -->
<button @click.exact="onClick">A</button>

 

#鼠標按鈕修飾符

• .left
• .right
• .middle

 

表單輸入綁定

可以用v-model指令在表單<input>、<textarea>、<select>元素上建立雙向數據綁定。

#文本

<div id="example-1">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>   

var example1 = new Vue({
  el: '#example-1',
  data: {
    message: ''
  }
})

 

#多行文本

<div id="example-1">
  <span>Multiline message is:</span>
  <p style="white-space: pre-line;">{{ message }}</p>
  <br>
  <textarea v-model="message" placeholder="add multiple lines"> 
  </textarea>
</div>   

 

#複選框

單個複選框，綁定布林值:

<div id="example-1">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>   

var example1 = new Vue({
  el: '#example-1',
  data: {
    checked : false
  }
})

多個複選框，綁定同一個陣列:

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

var example1 = new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

#Radio Button

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

var example1 = new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

 

#下拉選單

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

var example1 = new Vue({
  el: '#example-5',
  data: {
    selected: ''
  }
})

#下拉選單複選

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

var example1 = new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

 

用v-for渲染動態下拉選單:

<div id="example-6">
  <select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

var example1 = new Vue({
  el: '#example-6',
  data: {
    // 預設選參數'C'選項  
    selected: 'C',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

 

#值綁定

我們也可以使用v-model綁定到我們實例物件中的屬性值。

<div id="example-6">
  <!-- 當選中時，`picked`值為 "a" -->
  <input type="radio" v-model="picked" value="a">
  <br>
  <span>picked Selected: {{ picked }}</span>
  <!-- 當選中時，`toggle`值為true 或 false -->
  <br>
  <input type="checkbox" v-model="toggle">
  <span>toggle Selected: {{ toggle }}</span>
  <br>
  <!-- 當選中時，`selected`值為 "abc" -->
  <select v-model="selected">
    <option value="abc">ABC</option>
  </select>
  <br>
  <span>select Selected: {{ selected }}</span>
</div>

<!-- 也可以使用"true-value" 或 "false-value，來定義選中的值跟沒選中的值。" -->
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

 

我們也可以使用v-bind來綁定一個動態物件屬性。

<select v-model="selected">
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 當選中時
typeof vm.selected // => 'object'
vm.selected.number // => 123

 

#修飾符

.lazy

<!-- 在"change"時才更新 -->
<input v-model.lazy="msg" >

.number

<!-- 限定輸入為數字型態時使用 -->
<input v-model.number="age" type="number">

.trim

<!-- 自動過濾輸入的字頭字尾空白 -->
<input v-model.trim="msg">

 

組件基礎

我們來定義一個名為"button-counter"的組件:

Vue.component('button-counter', {
  // 這邊要注意的是，組件的data為一個函式，函式要返回其對象物件屬性。
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

var example1 = new Vue({ el: '#components-demo' })

 

我們建立好組件後，就可以當作自定義元素來使用。

<div id="components-demo">
  <button-counter></button-counter>
</div>

組件好處就是可以複用:

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

 

透過Prop向子組件傳遞數據:

Vue.component('button-counter', {
    // 定義兩個Prop屬性
    props: {
      // 字串屬性
      title: String,
      // 數字型態屬性
      increment: Number
    }

我們根據上一個例子，來做一些名稱的傳入與顯示，與設定按鈕每次遞增的數量:

Vue.component('button-counter', {
    // 定義兩個Prop屬性
    props: {
      // 字串屬性    
      title: String,
      // 數字型態屬性    
      increment: Number
    },
    data: function () {
        return {
          count: 0
        }
      },
  // 每次點擊，就增加傳入increment的遞增量    
  template: '<button v-on:click="count = count + increment">{{ title }} clicked me {{ count }} times.</button>'
})

var example1 = new Vue({ el: '#components-demo' })

<div id="components-demo">
  <button-counter v-bind:increment="1" title="Jimmy"></button-counter>
  <button-counter v-bind:increment="2" title="Joe"></button-counter>
  <button-counter v-bind:increment="3" title="John"></button-counter>
</div>

這邊要注意的是，increment是Number型態，要使用v-bind來傳遞動態物件屬性，不然接收到的會是字串。

 

監聽子組件事件

有時候在開發子組件的時候，會需要跟父階層組件溝通。

比如說，以上面的例子來說，我們想要知道是哪個人點擊了按鈕，並在父階層DOM元素顯示出名子。

<button-counter v-on:send-name="onSendName" v-bind:increment="1" title="Jimmy"></button-counter>

我們在子組件上定義一個子組件事件叫"send-name"，並呼叫父階層方法"onSendName"。

template: `<button v-on:click="$emit('send-name', title)" v-on:click="count = count + increment">{{ title }} clicked me {{ count }} times.</button>`

並在子組件的template的按鈕增加點擊事件，透過$emit方法呼叫我們自定義的方法"send-name"，並傳入"title"參數給方法。

var example1 = new Vue({ 
    el: '#components-demo',
    data: {
        clickMsg: 'No user click!'
    },
    methods: {
    onSendName: function (name) {
        this.clickMsg = `${name} click!`
    }
}
})

在父親階層定義方法"onSendName"，並接受"name"參數，在那個方法中再處理其參數，再傳給我們自訂的實例物件屬性"clickMsg"。

<div id="components-demo">
  <button-counter v-on:send-name="onSendName" v-bind:increment="1" title="Jimmy"></button-counter>
  <button-counter v-on:send-name="onSendName" v-bind:increment="2" title="Joe"></button-counter>
  <button-counter v-on:send-name="onSendName" v-bind:increment="3" title="John"></button-counter>
  <div>{{ clickMsg }}</div>
</div>

父階層再將實例物件屬性"clickMsg"顯示出來。

所以我們點擊按鈕時，就可以把子組件屬性傳遞給父階層做處理。

 

結論

目前Vue js社群的成長度可以說相當快。

 

  Vue對於向上擴展或是向下擴展都有很好的相容性，在向上擴展方面，有提供強大的路由函式庫來對應大型應用專案，也有提供Vue-CLI來快速建構專案與打包專案。在向下擴展方面就類似於jQuery，只要把下面標籤放入頁面就能運行並可以進行開發了。

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

  在起步階段不需要額外學JSX、ES6、TypeScript，或是整個框架建構系統，只需要很短的時間就能建構出一個簡單的應用。

  在效能方面也可以說相當快，因為操作DOM的成本都是昂貴的，現今網頁的資料量都很龐大，其網頁的DOM元素也相對來得多，頻繁的更新會造成效能的瓶頸，而Vue使用Virtual DOM，Vue會精確知道哪個組件需要被渲染，所以在運行時的效能都是非常快的。

  Vue在Html跟css的整體思維還是擁抱經典的Web技術，在任何符合規範的Html都是合法的模板，這使得設計師與開發者都能更容易理解和參與其專案。

  想要學習Vue，只需要有良好的Html與JavaScript基礎就能進行開發，在現今JavaScript快速變化的世界中，真的可以說相當容易與快速上手。