vue基础代码（非webpack）
vue基础代码（非webpack）
<!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>Document</title>
<script src="/static/js/axios.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="removeItems">delete</button>
<todo>
<todo-title slot="todo-title-in_todo" v-bind:title="title"></todo-title>
<todo-items slot="todo-items-in_todo" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index"
v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
</body>
<script>
Vue.component("todo" ,{
template: "<div>\
<slot name='todo-title-in_todo'></slot>\
<ul>\
<slot name='todo-items-in_todo'></slot>\
</ul>\
</div>"
});
Vue.component("todo-title" ,{
props: ["title"],
template: "<div>{{title}}</div>"
});
Vue.component("todo-items" ,{
props: ["item","index"],
template: '<li>{{ index }}----{{ item }} <button @click="remove">delete</button></li>',
methods: {
remove: function (index){
console.log("remove");
this.$emit('remove', index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: null,
todoItems: null
},
methods: {
removeItems: function (index){
console.log("removeItems: "+this.todoItems[index]);
this.todoItems.splice(index, 1);
}
},
mounted() {
axios.get("/static/data.json").then(response=>(
console.log(response.data),
this.todoItems = response.data.slot,
this.title = response.data.title
))
},
});
</script>
</html>
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.