<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--定义挂载vue对象的div--> <div id="app"> <todo-list></todo-list> </div> <!--通过cdn的方式引入vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 定义一个todo-item组件 Vue.component('todo-item', { // props属性，定义子组件可以接收的参数以及类型和默认值，通过属性绑定的方式就可以传入参数， // 下文的:title="item.title" :del="item.del" props: { title: String, del: { type: Boolean, default: false } }, // data属性用于定义组件内部的参数，通过一个函数返回，无论被其他地方引用多少次，可以保证内部数据独立 data: function () { return { } }, // template属性定义组件模板代码 // v-if指令，条件控制语句，根据其条件表达式返回的boolean值，判定当前标签的行为 // v-else指令 // v-show 控制标签是否显示 // @click ，@语法糖，是v-on指令的简写，意思是进行实践绑定，这里的意思当检测到click事件时，调用handleClick函数 template: ` <li> <a v-if="!del" >{{title}}</a> <a v-else style="text-decoration: line-through">{{title}}</a> <button v-show="!del" @click="handleClick">删除</button> </li> `, // 定义当前组件的方法 methods: { handleClick(){ console.log("点击删除按钮") // this.$emit 方法，会触发父组件的一个事件，这个方法一般是子组件向父组件传递数据时使用 // 当前场景是 触发父组件的delete方法，并传递一个参数，多个参数的话用逗号隔开就行 // 这里的delete事件，是自定义的事件，上文的click事件时内置的事件 this.$emit('delete', this.title) } } }) // 定义一个TODOlist组件 Vue.component('todo-list', { // 模板代码 // @delete 绑定delete事件触发时执行的方法 // v-for 循环指令 // :title 冒号是v-bind指令的简写，用于属性绑定 template: ` <ul> <todo-item @delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del"></todo-item> </ul> `, props: { }, methods: { handleDelete(val){ console.log("点击" + val) } }, data: function () { return { list: [ { title: '课程1', del: false }, { title: '课程2', del: true } ] } } }) let vm = new Vue({ // 挂载 el: "#app", data: { // title: String, // del: { // type: Boolean, // default: false // } } }) </script> </body> </html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于