【Vue課序2】保姆級：初識Vue項目結構和實現第一個Vue組件

一、瞭解項目結構

當通過 vue init webpack 初始化Vue項目時會自動創建一下模板

---

二、瞭解Vue單元組件的構成

介紹： 一個標準的.vue文件由以下模塊構成：

<template></template>

<script></script>

<!-- Add "scoped" attribute to limit CSS to this component only —>
<style scoped></style>

<template>

template： 頁面展示代碼。存放標籤<>語言，第二層只允許存在一個子標籤,以下寫法是不允許的，同級第二級有且僅有一個標籤元素。

<template>
     <h1>{{ msg }}</h1>
     <h2>Essential Links</h2>
</template>

正確的寫法應該爲：

<template>
     <h1>{{ msg }}</h1>
</template>
<script>
// script：業務實現代碼
<script>
export default {
name: "Home",
data() {
    return {};    //數據定義
},
methods: {
    // 組件的方法
},
watch: {
    // watch監聽方法，擅長處理的場景：一個數據影響多個數據
},
computed: {
    // computed擅長處理的場景：一個數據受多個數據影響
},
beforeCreate: function() {
    // 在實例初始化之後，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。
},
created: function() {
    // 實例已經創建完成之後被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， 
    // watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
},
beforeMount: function() {
    // 在掛載開始之前被調用：相關的 render 函數首次被調用。
},
mounted: function() {
    // 編譯好的HTML掛載到頁面完成後執行的事件鉤子
    // el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。
    // 此鉤子函數中一般會做一些ajax請求獲取數據進行數據初始化
},
beforeUpdate: function() {
    // 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
},
updated: function() {
    // 由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。
    // 當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。
    // 然而在大多數情況下，你應該避免在此期間更改狀態，因爲這可能會導致更新無限循環。
    // 該鉤子在服務器端渲染期間不被調用。
},
beforeDestroy: function() {
    // 實例銷燬之前調用。在這一步，實例仍然完全可用。
},
destroyed: function() {
    // Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，
    // 所有的事件監聽器會被移除，所有的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。
}
};
</script>

<!-- style：界面佈局代碼，標準的css語言 ->
<style scoped>
h1,h2 {
    font-weight: normal;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>

---

三、第一個Vue組件

步驟：

1. 打開 src/components文件夾
2. 打開 HelloWorld.vue文件
3. 修改 <script/>中代碼爲：

	export default {
  	  name: "HelloWorld",
  	  data() {
     	   return {
           	 count: 0
       	 };
   	 },
   	 methods: {
     	   click_me() {
       	     this.count++;
      	  }
 	   }
	};

4. 修改<template/>中代碼爲：

	<template>
   	 <div class="hello">
    	    <p>Total Count：{{this.count}}</p>
    	    <button v-on:click.stop="click_me()">on Click Me！</button>
  	  </div>
	</template>

5. 保存代碼，在瀏覽器中點擊按鈕，可以看到數值變化+1。
   

---

提問：如何實現一個Count數值的加減？

思考： 既然剛剛我們通過一個按鈕綁定一個函數實現了對組件內部狀態的修改，那我們是不是可以再實現一個按鈕對內部狀態進行刪減？

1. 修改<script>中methods的代碼：

	methods: {
  	  add_Count() {
      	  this.count++;
   	 },
   	 sub_Count() {
     	   this.count--;
   	 }
	}

2. 修改<template>中代碼：

<div class="hello">
    <p>Total Count：{{this.count}}</p>
    <button v-on:click.stop="add_Count()">Count++</button>
    <button v-on:click.stop="sub_Count()">Count--</button>
</div>

查看效果：