vue组件事件(极客时间Vue视频笔记)
vue组件核心:事件
<body>
<div class="app">
<todo-list></todo-list>
{{message}}--{{message+','+message}}
<div :id='message' v-if="showMessage">{{title}}</div>
<div v-else style="text-decoration: line-through;">{{title}}--{{title}}</div>
<div :id='message' v-show="showMessage">{{title}}</div>
</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: {
title: String,
prize: {
type: Number,
default: 40
}
},
template: `<li>
<button @click="handleClick">删除</button>
课程名:{{title}}
价格:{{prize}}
</li>`,
data: function () {
return {}
},
methods: {
//按钮点击事件
handleClick(){
console.log("handleClick");
//向父组件的@delete事件传递this.title参数,在父组件中delete(var){}即可接收到此参数
this.$emit('delete',this.title);
}
}
})
Vue.component('todo-list', {
template: `
<ul>
<todo-item @delete="handleDelete" v-for="item in classList" :title="item.title" :prize="item.prize"></todo-item>
</ul>
`,
methods:{
//@delete对应的事件
handleDelete(val){
console.log("handleDelete",val);
}
},
data: function () {
return {
classList: [
{
title: '课程1',
prize: 50 },
{
title: '课程2',
prize: 80
}
]
}
}
})
var vm = new Vue({
el: '.app',
data: {
message: 'hello world',
showMessage: false,
title: "是否删除", }
})
</script>
</body>
- 还有一些事件修饰符，比方说 v-on:keyup.enter="submit" 监听键盘enter键调用submit方法
- 阻止单击事件继续传播 v-on:click.stop=""
vue组件事件(极客时间Vue视频笔记)的更多相关文章
- vue组件注册(极客时间Vue视频笔记)
vue组件注册 组件是为了方便代码复用,只需引入组件即可在不同的地方使用想同的功能代码 <body> <div class="app"> <todo- ...
- vue插槽用法(极客时间Vue视频笔记)
vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 极客时间-vue开发实战学习（ant-design vue作者）
vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...
- 第一个vue程序(极客时间Vue视频笔记)
第一个vue程序 <body> <div class="app"> {{message}}--{{message+','+message}} <div ...
- java爬虫系列第四讲-采集"极客时间"专栏文章、视频专辑
1.概述 极客时间(https://time.geekbang.org/),想必大家都知道的,上面有很多值得大家学习的课程,如下图: 本文主要内容 使用webmagic采集极客时间中某个专栏课程生成h ...
- 极客时间_Vue开发实战_汇总贴
视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...
- 【视频合集】极客时间 react实战进阶45讲 【更新中】
https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...
- 左耳朵耗子：我为什么要在极客时间 App 开设独家专栏？
参考链接:https://www.infoq.cn/article/2018/01/why-geektime 不少朋友都知道我在极客时间App 上开了一个收费专栏<左耳听风>,这个专栏会开 ...
- "做中学"之“极客时间”课程学习指导
目录 "做中学"之"极客时间"课程学习指导 所有课程都可以选的课程 Java程序设计 移动平台开发 网络攻防实践 信息安全系统设计基础 信息安全专业导论 极客时 ...
随机推荐
- 集合操作符 Union / Union All / Intersect / Minus
集合操作符 Union / UnionAll / Intersect / Minus -- 生成测试数据 create table dept_01 as select * from dept wher ...
- 【NOIP2012模拟11.1】塔（加强）
题目 玩完骰子游戏之后,你已经不满足于骰子游戏了,你要玩更高级的游戏. 今天你瞄准了下述的好玩的游戏: 首先是主角:塔.你有N座塔一列排开.每座塔各自有高度,有可能相等. 这个游戏就不需要地图了. 你 ...
- 获取树莓派ip地址的方法
1.有显示器 (1)鼠标停留在屏幕右上角网络图标上,2-3秒会显示网络连接信息(2) 图形界面下打开终端运行ifconfig命令 2.登录路由器查看名叫raspberry的设备 3.电脑上运行命 ...
- .NET DotnetSpider--WebDrvierSpider(ajax动态加载的数据获取)
爬虫获取数据时,可能会遇到AJAX加载的页面,如果无法分析出接口的话,就只能使用秘密武器——WebDriverDownloader.不过最好还是分析出接口为好,WebDriver的性能实在是太低了.现 ...
- ASP教程:gb2312和utf-8乱码问题解决
文章为转载:https://www.xp.cn/b.php/31663.html 尊重作者版权 今天做网站的时候,客户要一个博客,于是就利用了本博客所用的程序pjblog.经常做网站的人都知道,在同一 ...
- 阿里jetcache
- 计算器work_day05
day_work_05 ------Python是一个优雅的大姐姐 作业计算器 设计思路 按照运算优先级和正则先算括号内的值,提出来判断符号问题,然后依次计算. 分析题目设计了四个函数,分别为a)去括 ...
- luogu P1352 没有上司的舞会 x
P1352 没有上司的舞会 题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员 ...
- 157. [USACO Nov07] 奶牛跨栏(第三次考试大整理)
157. [USACO Nov07] 奶牛跨栏 输入文件:hurdles.in 输出文件:hurdles.out 简单对比 时间限制:1 s 内存限制:128 MB 译 by CmYkRg ...
- HDU 6578 Blank
hdu题面 Time limit 1000 ms Memory limit 262144 kB OS Windows Source 2019 Multi-University Training Con ...