用vue3.0写一个简单的todo功能
创建项目
1.创建一个index.html文件,并引入<script src=“https://unpkg.com/vue@next”>
touch index.html
开始写入代码
1.写好基本的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
//App组件
const App = {}
//挂在组件到app上
const app = Vue.createApp(App).mount("#app")
</script>
</body>
</html>
创建一个app-nav组件
- 1.注册一个app-nav组件并传值给父组件
let appNav = `<div>
<label for="inputValue">大宝剑服务项目:</label>
<input id="inputValue" v-model="inputval"/>
<button @click="handleAddItem">添加</button>
</div>`
//注册一个组件app-nav
app.component("app-nav", {
//模板
template: appNav,
data() {
return {
//输入框的值
inputval:""
}
},
methods: {
handleAddItem() {
//传给父组件
this.$emit("add-item", this.inputval)
this.inputval = ""
}
}
})
- 2.父组件接口子组件传过来的值
<app-nav class="app-nav" @add-item="addItem"></app-nav>
methods: {
addItem(e) {
if(this.list.includes(e)){
alert("该项目已存在");
return
}
this.list.push(e);
}
}
创建一个app-view组件
- 1.注册一个app-view组件并接收父组件的值
let appView = `<div>
<ul>
<li>
<span style="flex:1">项目</span>
<span style="flex:1">操作</span>
</li>
<li v-for="(item,index) in list" :key="index+item" >
<span style="flex:1">{{item}}</span>
<div style="flex:1">
<span @click.self="handleDelete(index)">删除</span>
</div>
</li>
</ul>
</div>
`
app.component("app-view", {
template: appView,
props: ['list'],
data() {
return {}
},
methods: {
handleDelete(index) {
this.$emit('delete-item', index)
}
}
})
2.父组件传值给子组件
<app-view class="app-view" :list="list" @delete-item="deleteItem"></app-view>
methods: {
deleteItem(e) {
this.list.splice(e, 1)
}
}
完整的案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue3.0初体验</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
#app{
max-width: 600px;
height: 400px;
margin: 30px auto;
box-shadow: 0 0 10px #ccc;
padding:20px 10px;
}
.app-nav{
text-align: center;
}
.app-view {
max-width:400px;
margin:0 auto;
}
.app-view ul,.app-view li{
list-style: none;
padding: 0;
}
.app-view li{
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content:space-around;
text-align: center;
}
.app-view li:hover{
background-color: rgb(206, 248, 234);
}
</style>
</head>
<body>
<div id="app">
<app-nav class="app-nav" @add-item="addItem"></app-nav>
<app-view class="app-view" :list="list" @delete-item="deleteItem"></app-view>
</div>
<script>
const App = {
data() {
return {
message: "hello Vue3.0",
list: ['精油推背', '泰式洗头', '冰火两重天']
}
},
methods: {
addItem(e) {
if(this.list.includes(e)){
alert("该项目已存在");
return
}
this.list.push(e);
},
deleteItem(e) {
this.list.splice(e, 1)
}
}
}
const app = Vue.createApp(App)
let appNav = `<div>
<label for="inputValue">大宝剑服务项目:</label>
<input id="inputValue" v-model="inputval"/>
<button @click="handleAddItem">添加</button>
</div>`
app.component("app-nav", {
template: appNav,
data() {
return {
inputval:""
}
},
methods: {
handleAddItem() {
this.$emit("add-item", this.inputval)
this.inputval = ""
}
}
})
let appView = `
<div>
<ul>
<li>
<span style="flex:1">项目</span>
<span style="flex:1">操作</span>
</li>
<li v-for="(item,index) in list" :key="index+item" >
<span style="flex:1">{{item}}</span>
<div style="flex:1">
<span @click.self="handleDelete(index)">删除</span>
</div>
</li>
</ul>
</div>
`
app.component("app-view", {
template: appView,
props: ['list'],
data() {
return {}
},
methods: {
handleDelete(index) {
this.$emit('delete-item', index)
}
}
})
app.mount("#app")
</script>
</body>
</html>