<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-model input输入双向绑定数据
当用户输入数据，input发生改变时，输入的内容会自动保存到inputValue中
-->
<input type="text" v-model="inputValue">
<button @click="handleClick">提交</button>
<ul>
<todo-item :content="item" v-for="item in list"></todo-item>
</ul>
</div>
</body>
<script type="text/javascript">
//全局组件 Vue.component(name, options)
// Vue.component('TodoItem', {
// props: ['content'],
// template: `<li>{{this.content}}</li>`
// })
//局部组件
let TodoItem = {
props: ['content'],
template: `<li>{{this.content}}</li>`
}
let app = new Vue({
el: '#app',
data: {
list: [],
inputValue: ''
},
//局部组件注册
components: {
TodoItem
},
methods: {
handleClick () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</html>