王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
<!-- 前端组件化
使用组件化开发大型项目,可大大提供代码的维护
-->
<html>
<title>todolist</title>
<body>
<div id="app">
<input type="text" v-model="inputVal">
<button v-on:click="onClick">提交</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-list v-bind:content="item" v-for="item in list"></todo-list>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义全局组件
// Vue.component("TodoList",{
// //接收数据
// props:[
// 'content'
// ],
// template:"<li> {{content}} </li>"
// })
//局部组件
var TodoList={
props:[
'content'
],
template:"<li> {{content}} </li>"
}
var app = new Vue({
el:'#app',
// 局部组件需要在此注册,全局组件不用
components:{
TodoList:TodoList
},
data:{
list:[],
inputVal:''
},
methods:{
onClick:function(){
// alert(this.inputVal)
//向list中添加数据
this.list.push(this.inputVal);
//清空input内容
this.inputVal='';
}
}
})
</script>
</html>
