vue元件和例項的關係Vue是由一個個例項構建而成的，一個元件就是一個Vue的例項，每個元件內部都可以寫屬性，因此每一個元件都是一個Vue的例項。每一個例項都有自己的template模板，如果沒有，根節點就會去掛載點下面找，找到root會把root下面的所有DOM標籤當做這個例項的模板使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元件與例項的關係</title>
<script src="./vue.js"></script>
</head>
<body>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
></todo-item>
</ul>
<script>
// 定義全域性元件
Vue.component("todo-item",{
// 傳參後不能直接使用，必須接收一下才可以使用
props:["content"],
// 每一個元件都是一個例項，可以新增事件和屬性
template: "<li @click="handleClick">{{content}}<li>",
methods:{
handleClick: function() {
alert("clicked")
}
})
new Vue({
el:"#root",
data:{
inputValue:"",
list:[],
},
// 新增事件
handleSubmit: function(){
// 將inputValue push到陣列中
this.list.push(this.inputValue),
// 清空輸入框
this.inputValue=""
</script>
</body>
</html>
不過現在，你只需要明白所有的 Vue 元件都是 Vue 例項，並且接受相同的選項物件 (一些根例項特有的選項除外)。
從上面可以看出， vue 元件本身是一個 vue 例項，同時任何 vue 例項都可以註冊為 vue 元件。
你只是把一個 vue 例項註冊成了另一個 vue 例項的元件而已。
就像物件的屬性也可以是物件一樣，迭代關係。
vue元件和例項的關係Vue是由一個個例項構建而成的，一個元件就是一個Vue的例項，每個元件內部都可以寫屬性，因此每一個元件都是一個Vue的例項。每一個例項都有自己的template模板，如果沒有，根節點就會去掛載點下面找，找到root會把root下面的所有DOM標籤當做這個例項的模板使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元件與例項的關係</title>
<script src="./vue.js"></script>
</head>
<body>
<div>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
></todo-item>
</ul>
</div>
<script>
// 定義全域性元件
Vue.component("todo-item",{
// 傳參後不能直接使用，必須接收一下才可以使用
props:["content"],
// 每一個元件都是一個例項，可以新增事件和屬性
template: "<li @click="handleClick">{{content}}<li>",
methods:{
handleClick: function() {
alert("clicked")
}
}
})
new Vue({
el:"#root",
data:{
inputValue:"",
list:[],
},
// 新增事件
methods:{
handleSubmit: function(){
// 將inputValue push到陣列中
this.list.push(this.inputValue),
// 清空輸入框
this.inputValue=""
}
}
})
</script>
</body>
</html>
區別vue例項會比vue元件多出el和router屬性，而vue元件的data會被要求必須是函式，防止出現同種元件多例項共享同一個data的事情。官網介紹不過現在，你只需要明白所有的 Vue 元件都是 Vue 例項，並且接受相同的選項物件 (一些根例項特有的選項除外)。
從上面可以看出， vue 元件本身是一個 vue 例項，同時任何 vue 例項都可以註冊為 vue 元件。
你只是把一個 vue 例項註冊成了另一個 vue 例項的元件而已。
就像物件的屬性也可以是物件一樣，迭代關係。