vue内容分发

vue04.js

<!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>vue内容分发</title>
    <script src="./vue/vue.js"></script>
</head>

<body>


    <div id="vue">
        <todo>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-content slot="todo-content" v-for="(item, index) in todoItems" v-bind:item="item" v-bind:index="index" v-on:remove="removeTodoItems(index)"></todo-content>
        </todo>
    </div>
    

    <script>
        Vue.component('todo',{
            template:'
'+ // ""+ // '
    '+ // ""+ // '
'+
// '
'
`
`
}); Vue.component('todo-title',{ props:['title'], template:'
{{title}}
'
}); //这个title跟:title绑定的 Vue.component('todo-content',{ props:['item','index'], template:'
  • {{index+1}}.{{item}} {{item}}
  • '
    , methods: { remove_component: function (index) { // 这里的 remove 是自定义事件的名称,需要在 HTML 中使用 v-on:remove 的方式指派 this.$emit('remove', index); } } }); var vm = new Vue({ el: '#vue', data: { title: "秦老师系列课程1", todoItems: ['狂神说Java', '狂神说运维', '狂神说前端'] }, methods: { // 该方法可以被模板中自定义事件触发 removeTodoItems: function (index) { console.log("删除 " + this.todoItems[index] + " 成功"); // splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目,其中 index 为添加/删除项目的位置,1 表示删除的数量 this.todoItems.splice(index, 1); } } }); </script> </body> </html>

    你可能感兴趣的:(js学习,vue,js,html,javascript)