<!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>
近期热议
推荐标签 标签
-
BAE
19 引用 • 75 回帖 • 616 关注
百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。
-
frp
16 引用 • 7 回帖 • 2 关注
frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。
-
服务器
124 引用 • 580 回帖
服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。
-
Flume
9 引用 • 6 回帖 • 613 关注
Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。
- Kotlin
-
程序员
544 引用 • 3531 回帖
程序员是从事程序开发、程序维护的专业人员。
-
区块链
91 引用 • 751 回帖
区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。
-
SQLServer
19 引用 • 31 回帖 • 2 关注
SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。
-
面试
324 引用 • 1395 回帖 • 1 关注
面试造航母,上班拧螺丝。多面试,少加班。
-
Swagger
26 引用 • 35 回帖
Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。
-
Ruby
7 引用 • 31 回帖 • 196 关注
Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。
-
NGINX
311 引用 • 546 回帖
NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。
-
快应用
15 引用 • 127 回帖 • 1 关注
快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。
-
分享
245 引用 • 1776 回帖 • 1 关注
有什么新发现就分享给大家吧!
-
Ubuntu
123 引用 • 168 回帖
Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。
-
jsoup
6 引用 • 1 回帖 • 473 关注
jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。
-
负能量
88 引用 • 1234 回帖 • 441 关注
上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)
-
abitmean
• 39 关注
有点意思就行了
-
资讯
54 引用 • 85 回帖
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。
-
gRpc
11 引用 • 9 回帖 • 49 关注
-
TensorFlow
20 引用 • 19 回帖 • 1 关注
TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。
-
运维
148 引用 • 257 回帖
互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。
-
锤子科技
4 引用 • 31 回帖 • 8 关注
锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。
-
ngrok
7 引用 • 63 回帖 • 613 关注
ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。
-
CAP
11 引用 • 5 回帖 • 580 关注
CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。
-
游戏
171 引用 • 814 回帖
沉迷游戏伤身,强撸灰飞烟灭。
-
ActiveMQ
19 引用 • 13 回帖 • 641 关注
ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于