一、数据的循环展示
- 定义data中的数据
data() {
return {
list: ['hello', 'world', 'adam', 'xin']
}
},
- 循环数据:v-for
template: `
<ul>
<li v-for="(item, index) of list">{{item}}-{{index}}</li>
</ul>
`
二、制作todoList
- 增加按钮绑定事件:
<button v-on:click="handleAdditem">增加</button>
- 定义一个输入框,绑上变量:用v-model绑变量
data() {
return {
inputValue: '',
list: []
}
},
<input v-model="inputValue/>
- 点击事件函数
methods: {
handleAdditem() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAdditem() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `
<div>
<input v-model="inputValue"/>
<button v-on:click="handleAdditem">增加</button>
<ul>
<li v-for="(item, index) of list">{{item}}-{{index}}</li>
</ul>
</div>
`
}).mount('#root')
</script>
</body>
</html>
附加:基础部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5 </title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// createApp 表示创建一个Vue应用,存储到app变量中
// 传入的参数表示,这个应用最外层的组件,应该如何展示
// mvvm 设计模式,m=>model 数据、v=>view 试图、vm=> viewModel 视图数据连接层
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
template: "<div>{{message}}</div>"
});
app.mount('#root')
// vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root')
</script>
</body>
</html>