vue-瀛?缁?浠?婊℃??-??绾ч??璇?
<html >
<head>
<meta charset="GB2312">
<title>ToDoList</title>
<!--<script src="./lib/vue.js"></script>-->
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email?protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="Tvalue" />
<button v-on:click="handleBtnClick">瀛?缁?浠???浜?lt;/button>
<ul>
<[email?protected]="handleDelete"????delete浜?浠訛???甯?-on-->
<to-dolist v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleDelete">
</to-dolist>
</ul>
</div>
<!--瀵矽薄缂???-->
<script>
//瀛?缁?浠? var ToDolist = {
props: ['content','index'],
//handleZClick??瑕???寮??? template: "<li @click='handleZClick'>{{content}}</li>",
methods: {
handleZClick: function () {
alert('瀛?缁?浠?"琚??瑰??????');
this.$emit("delete", this.index)//??澶?瑙???delete浜?浠? //this.$emit('delete', this.index)//杩?涓?涔???姝ｇ‘??????绗???
}
}
}
//涓葷?浠? var a = new Vue({
el: '#app',
components: {
ToDolist: ToDolist
},
data: {
Tvalue: '',
list:[],
},
methods: {
handleBtnClick: function () {
alert('宸茬??瑰??);
this.list.push(this.Tvalue);
alert('浣?杈??ョ?? ' + this.Tvalue + '????宸叉?绌?);
this.Tvalue = '';
},
handleDelete: function (index) {
alert("瀛?缁?浠?-??handleDelete??浜?浠剁????????");
alert('?瑰?諱?浠?搴??鋒??锛?' + index);
this.list.splice(index,1)//璇ュ??鳳????や?琛?
alert('???や?浠?搴??鳳?' + index+'????锛?');
//alert("瀛?缁?浠?-??handleDelete??浜?浠躲?????ゆ?绌恒??????");
//this.list = [];//this.list =涓?涓?绌烘?扮?锛??ㄩ?ㄦ?绌轟?
}
}
})
</script>
</body>
</html>
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)