初識Vue，簡單的todolist
阿新 • • 發佈：2018-07-11
meta vue value .org component app set let bmi
vue開發源碼：https://vuejs.org/js/vue.js
todolist代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入門</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input v-model="inputValue" type="text" name="">
<button @click="submit">提交</button>
<ul>
<todo-item
v-for="(item, index) in list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
@update="handleUpdate"
>
</todo-item>
</ul>
<input v-model="updateValue" type="text" name="">
<button @click="update">確定</button>
</div>
</body>
<script type="text/javascript">
Vue.component("todo-item", {
props:["content", "index"],
template:‘<li>{{content}} <button @click="handleClick">remove</button><button @click="handleUp">update</button></li>‘,
methods:{
handleClick:function() {
this.$emit(‘delete‘, this.index)
},
handleUp:function() {
this.$emit(‘update‘, this.index)
}
}
})
new Vue({
el:"#app",
data: {
inputValue : ‘‘,
updateValue : ‘‘,
in:‘‘,
list:[]
},
methods: {
submit:function() {
if(this.inputValue.trim() !== "") {
this.list.push(this.inputValue);
}
this.inputValue = ‘‘
},
handleDelete: function(index) {
this.list.splice(index, 1);
},
handleUpdate: function(index) {
this.updateValue = this.list[index]
this.in = index;
},
update: function() {
console.log(this.in)
this.list.splice(this.in, 1, this.updateValue);
this.updateValue = ‘‘
}
}
})
</script>
</html>
重點：子組件與父組件的值傳遞
初識Vue，簡單的todolist