todoList:字面意思就是,有1到多的过程
组件:组件就是页面上的内容,一个页面可以拆分成很多个组件
从代码中可以看出,组件其实是一个vue实例,也可以说vue实例就是一个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>todolist</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id = "text">
<div>
<input v-model = "msg"/> <!--双向绑定-->
<button @click = "Submit">提交</button> <!--@click绑定事件-->
<ul>
<!-- <li v-for = "(item,index) of list " key = "index">{{item}}</li>循环集合 -->
<todo-item v-for = "(item,index) of list "
:key = "index"
:conten = "item"></todo-item>
<!--:content 定义参数,参数名交conten,conten是自定义的参数名,参数值是item-->
</ul>
</div>
</div>
<script>
// Vue.component()这种方式定义的组件是全局组件
Vue.component('todo-item',{//注册组件,注册此组件的时候,第一次我把名字命名成了todo-Item,页面上就一直不显示li标签中的内容
props: ['conten'],//其实每个组件都可视为一个vue对象
template: "<li @click = 'clickk'>{{conten}}</li>",//摸板,注意一个单词也不能错,错了就不行
methods: {
clickk: function(){
alert('你点击的是 : '+ this.conten)
}
}
})
//定义一个局部组件
var TodoItem = {
template: '<li></li>'
}
new Vue({
el: "#text",
// components : {//局部组件的调用
// 'todo-item': TodoItem
// },
data: {
msg : '',
list : []
},methods : {//与click相对应的方法写到这里
Submit : function(){
this.list.push(this.msg)//动态往list中添加元素
this.msg = ''//将输入框中的消息清空
}
}
})
</script>
</body>
</html>