组件与实例的关系
程序员文章站
2022-03-16 12:42:09
...
组件与实例的关系
- Vue中的每一个组件，都是Vue的一个实例
- 任何一个Vue项目，都是由很多个实例组成的
- 组件里面也可以写methods,也可以写data,也可以写计算属性等
- 如果Vue的根实例，没有模板，它会去找挂载点，它会把挂载点标签下的模板内容当成实例的模板来使用。
- 每一个组件/实例统称为组件，因为组件就是Vue的一个实例，反回来每一个Vue实例就是一个组件。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</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('click')
}
}
})
new Vue({
el: "#root",
data:{
inputValue: '',
list: []
},
methods: {
handleClick: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
页面展示效果