這次帶給大家怎樣使用Vue組件，使用Vue組件的注意事項有哪些，以下就是實戰案例，一起來看一下。
Vue實例
專案啟動過程
看看現在我們的項目，想想整個專案的啟動過程是什麼（以直接開啟index .html的方法存取為例來說明）？
你先打開了index.html，裡面只有一個寫了一個id='root'的p，還有你引入了打包之後的程式碼，然後Vue自己肯定運行了一下（可以認為是Vue初始化）。
接著，應該是執行了entry.js(因為打包是webpack打包的，你設定的入口檔就這一個)。
entry.js做了什麼，是的，創建了一個Vue實例對象，然後這個物件管理的區域根據el屬性知道，應該是index.html中id='root'的那個p，因此剩下的事情就只有明白這個Vue實例物件是如何管理這片區域的就可以了，這就是接下來的內容了。
什麼是Vue實例物件?
根據官方文件的說明：每個Vue應用程式都是透過用Vue函數建立新的Vue實例開始的。
你可以簡單的理解，他就是一個普普通通的對象罷了，只不過這個對像被賦予了一些特殊的功能，讓我們來了解一下他吧！
【我們接下來都是在entry.js裡面創建的那個Vue物件上面進行實驗的】
一個Vue實例物件建立的方法如下：
var vm=new Vue({
//一堆配置
});登入後複製
因此，接下來要說的就是一些常用的配置（不是全部，比較特殊的以後應該會說，畢竟開始就全部，我怕彼此心都太累了）。
Vue實例物件基本配置
【1】el:選擇器| DOM結點
在我們的專案中，我們配置的是：
el:'#root'
這是一個字串，有點類似CSS選擇器，它會使用查找到的結點作為管理區域（當然還有別的CSS選擇器也可以）。
除此之外，你還可以直接傳遞一個結點，例如現在我們修改一下程式碼：
el: document.getElementById('root')登入後複製
這樣也是可以了，你可以試試看。
【2】render:(createElement:()=>VNode)=>VNode
上面的是ES6的箭頭函數寫法，舉個栗子：
上面ES6的寫法等同於下面ES5的寫法：
(function(x,y){
return x+y;
})(1,2);登入後複製
簡單的說就是：(x,y)=>x y就表示一個有二個參數x和y，回傳x y的函數，因此上面的函式用ES5的寫法就是：
function(createElement){
//createElement是一个函数，返回类型为VNode
//这个函数的返回类型也应该是VNode
return VNode;
}登入後複製
備註：VNode是Vue編譯產生的虛擬節點，想想Jquery節點，還有Node節點，是不是味道很像。
因此，我把專案中的render稍微改一下：
render: function (createElement) {
return createElement(App);
}登入後複製
是不是很清晰了，說白了，就是一個最後回傳值是VNode的函數。
因此看見節點這二個字，應該可以理解頁面為什麼顯示的是App裡面的模板了吧，如何路由調整為什麼配置的是.vue文件大概也有點感覺了吧。
【3】router:VueRouter
這個比較容易理解，就是知道使用的路由配置是什麼，由於專案中是：
看著很奇怪，我們稍微修改一下：
//上面的import routerObj from './router';这一句要跟着修改一下
router: routerObj
登入後複製
基本的就到這裡，就三個，別的屬性因為還關聯很多東西，會一點點來說明。
Vue物件生命週期
官方的圖我就不放了，感覺意義不大，推薦入門了以後可以去看看，因此後面的文章可能會說。
下面我們來先在entry.js裡面修改一下程式碼，看看運行結果，以下是程式碼：
//根对象
var vm = new Vue({
//挂载点
el: document.getElementById('root'),
//2.使用刚刚的路由配置
router: routerObj,
//启动组件
render: function (createElement) {
return createElement(App);
},
//下面是Vue对象的几种状态
beforeCreate: function () {
console.debug('Vue对象目前状态：beforeCreate');
},
created: function () {
console.debug('Vue对象目前状态：created');
},
beforeMount: function () {
console.debug('Vue对象目前状态：beforeMount');
},
mounted: function () {
console.debug('Vue对象目前状态：mounted');
},
beforeUpdate: function () {
console.debug('Vue对象目前状态：beforeUpdate');
},
updated: function () {
console.debug('Vue对象目前状态：updated');
},
beforeDestroy: function () {
console.debug('Vue对象目前状态：beforeDestroy');
},
destroyed: function () {
console.debug('Vue对象目前状态：destroyed');
}
});登入後複製
運行一下看看控制台。
因此，就是說，Vue物件從創建前到最後死亡，在各個階段狀態改變的時候，都提供了一個鉤子方法，你可以註冊一下，如果你希望在特定狀態改變的時候幹點什麼的話。
到这里，基本上Vue对象实例应该比较清楚了吧？看看我们的代码，应该只有那几个.vue的文件里面的东西没有说清楚了（本文就是把前面写过的代码都说清楚，后面就可以一个新知识点接着一个的来丰富项目，因为都没有疑惑了，学习起来应该不会痛苦了吧！）。
Vue组件实例
说明
Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种，比如你还可以通过Vue.component()的方法来创建，不过这些都以后吧，我们这里就只说明.vue文件这一种（不喜欢一下子说太多，而且仔细想想，不就是API吗）。
【下面都是在PageTwo.vue里面进行修改，菜单名称修改为:Vue组件实例】
.vue文件的基本模板如下（下面都会是ES5的写法，本人还是不太喜欢ES6或者TS，原谅我，反正本质一样）：
<template>
</template>
<script>
export default {
//一些配置，和前面说的Vue实例类似
}
</script>
<style>
</style>登入後複製
三个地方，分工明确：模板 + 控制 + 样式
接下来我们说明配置中常用的选项（很多具体的就留到后面一点点品位，好吧，留的有点多）：
常用配置
【1】data
先看看PageTwo.vue现在的代码：
<template>
<section>
<input type="text" v-model="justDoIt">
<p>
输入的数据：{{justDoIt}}
</p>
</section>
</template>
<script>
export default {
//一些配置
data() {
return {
justDoIt: "初始化数据"
};
}
};
</script>
<style>
</style>登入後複製
模板中的代码应该不用说了吧，前面一篇文章说的很清楚了，直接看看data。
其返回了一个键值对（还有别的写法，推荐你这样写，因为这里如果"初始化数据"这几个字是变量，这种写法形成了闭包，是安全的），在这里就是给当前组件对象是data里面添加了一个justDoIt的数据，然后上面或者别的地方才可以用，他就是干了这事情。
【2】methods
接着，我们添加一下methods属性：
methods: {
doIt() {
alert(this.justDoIt);
}
}登入後複製
其实methods和data类似，只不过是用来添加的不是数据，而是方法，因此，你现在可以在模板里面添加下面代码来调用这个方法（记住，添加的全部代码必须由一个标签包裹）：
<input type="button" value="DoIt" v-on:click="doIt()">
登入後複製
v-on:click就是类似原生的onClick，不过因为是vue的方法，你应该用他的。
现在，你可以点击一下页面的按钮试一下，是不是很舒服。
【3】watch
这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合，比如你添加下面的代码：
watch: {
justDoIt: function(newval, oldval) {
console.log("justDoIt改变了，新值为：" + newval + ",旧值为：" + oldval);
}
}登入後複製
如何你运行一下，打开控制台，修改输入框的值的时候，是不是控制台时刻打印了这句话。
【4】computed
这个叫做计算属性，前面一篇文章说过了，不清楚的看看PageOne.vue，应该可以明白。
简单的说就是，它用到的data里面的值改变的时候，自己会重新计算。
生命周期
和Vue对象一样，也有类似的生命周期钩子，你可以试试，这里就随便提一下。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
如何使用Vue实现PopupWindow组件
如何操作jQuery实现电子时钟效果
以上是怎樣使用Vue組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
