Vue2.5开发去哪儿网App 第二章笔记
程序员文章站
2023-11-06 08:37:52
Vue完成 TodoList 1.默认方式 TodoList
view code
view code
view code
view code
vue完成 todolist
1.默认方式
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>todolist</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputvalue">
<button v-on:click="additem">添加</button>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
<script>
var app = new vue({
el:'#app',
data:{
list:[],
inputvalue:''
},
methods:{
additem:function () {
this.list.push(this.inputvalue)
this.inputvalue = ''
}
}
})
console.log(app.$data)
</script>
</body>
</html>
2.以全局组件的方式
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputvalue">
<button v-on:click="additem">添加</button>
<tode-item v-bind:content="item" v-for="item in list"></tode-item>
</div>
<script>
var myconponent = vue.extend({
props:['content'],
template:"<li>{{content}}</li>"
})
vue.component('tode-item',myconponent)
var app = new vue({
el:'#app',
data:{
list:[],
inputvalue:''
},
methods:{
additem:function () {
this.list.push(this.inputvalue)
this.inputvalue = ''
}
}
})
</script>
</body>
</html>
3.以局部组件的方式
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>局部组件 todolist</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputvalue">
<button v-on:click="additem">添加</button>
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
</div>
<script>
var myconponent = {
props:['content'],
template:"<li>{{content}}</li>"
}
var app = new vue({
el:'#app',
components:{
'todo-item':myconponent
},
data:{
list:[],
inputvalue:''
},
methods:{
additem:function () {
this.list.push(this.inputvalue)
this.inputvalue = ''
}
}
})
</script>
</body>
</html>
vue 组件间传值
子组件向父组件传值
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>局部组件 todolist</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputvalue">
<button v-on:click="additem">添加</button>
<!--v-bind简写：: v-on: @-->
<todo-item :content="item" :index="index" @delete="handleitemdelete" v-for="(item,index) in list"></todo-item>
</div>
<script>
var myconponent = {
props:['content','index'],
template:"<li @click='handleitemclick'>{{content}}</li>",
methods:{
handleitemclick:function () {
this.$emit('delete',this.index)
}
}
}
var app = new vue({
el:'#app',
components:{
'todo-item':myconponent
},
data:{
list:[],
inputvalue:''
},
methods:{
additem:function () {
this.list.push(this.inputvalue)
this.inputvalue = ''
},
handleitemdelete:function (index) {
console.log(index)
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
下一篇： Vue文件封装日历组件