<!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>
近期热议
推荐标签 标签
-
ZeroNet
1 引用 • 21 回帖 • 649 关注
ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。
-
外包
26 引用 • 233 回帖
有空闲时间是接外包好呢还是学习好呢?
-
CSDN
14 引用 • 155 回帖 • 1 关注
CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。
-
SQLite
4 引用 • 7 回帖
SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。
-
Office
5 引用 • 34 回帖
Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。
-
WebSocket
48 引用 • 206 回帖 • 281 关注
WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。
-
工具
300 引用 • 768 回帖 • 1 关注
子曰:“工欲善其事,必先利其器。”
-
etcd
6 引用 • 26 回帖 • 546 关注
etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。
-
又拍云
20 引用 • 37 回帖 • 571 关注
又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。
-
安装
132 引用 • 1184 回帖
你若安好,便是晴天。
-
国际化
8 引用 • 26 回帖 • 1 关注
i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。
-
GraphQL
4 引用 • 3 回帖 • 7 关注
GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。
-
HHKB
5 引用 • 74 回帖 • 521 关注
HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。
-
OpenCV
15 引用 • 36 回帖 • 2 关注
-
职场
127 引用 • 1708 回帖 • 1 关注
找到自己的位置,萌新烦恼少。
-
ActiveMQ
19 引用 • 13 回帖 • 685 关注
ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。
-
以太坊
34 引用 • 367 回帖
以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。
-
招聘
188 引用 • 1057 回帖
哪里都缺人,哪里都不缺人。
-
Outlook
1 引用 • 5 回帖 • 3 关注
-
SOHO
7 引用 • 55 回帖 • 5 关注
为成为自由职业者在家办公而努力吧!
-
智能合约
1 引用 • 11 回帖 • 1 关注
智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。
-
机器学习
77 引用 • 37 回帖
机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。
-
WiFiDog
1 引用 • 7 回帖 • 616 关注
WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。
-
代码片段
206 引用 • 1492 回帖 • 1 关注
代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加
[css]
或[js]
用于区分代码片段类型。 -
Docker
497 引用 • 934 回帖
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。
-
Ruby
7 引用 • 31 回帖 • 270 关注
Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。
-
TextBundle
1 引用 • 2 回帖 • 81 关注
TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于