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>
课程名:{{title}}
价格:{{prize}}
</li>`,
data: function () {
return {}
},
method: { }
})
Vue.component('todo-list', {
template: `
<ul>
<todo-item v-for="item in classList" :title="item.title" :prize="item.prize"></todo-item>
</ul>
`, 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>
- 这里定义了两个组件，todo-item和todo-list
- Vue.component('组件名',{}) 组件名全局唯一不能重复
vue组件注册(极客时间Vue视频笔记)的更多相关文章
- vue组件事件(极客时间Vue视频笔记)
vue组件核心:事件 <body> <div class="app"> <todo-list></todo-list> {{mess ...
- 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 ...
- 【视频合集】极客时间 react实战进阶45讲 【更新中】
https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...
- 极客时间_Vue开发实战_汇总贴
视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...
- 前端性能优化成神之路--vue组件懒加载（Vue Lazy Component ）
---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...
- 左耳朵耗子：我为什么要在极客时间 App 开设独家专栏？
参考链接:https://www.infoq.cn/article/2018/01/why-geektime 不少朋友都知道我在极客时间App 上开了一个收费专栏<左耳听风>,这个专栏会开 ...
随机推荐
- ip addr详解
Windows上查看IP地址是ipconfig, Linux上是ifconfig,但是Linux上还有一个命令叫ip addr可以查看IP地址. ip addr : lo: <LOOPBACK, ...
- 【Luogu5294】[HNOI2019]序列
题目链接 题意 给定一个序列,要求将它改造成一个非降序列,修改一个数的代价为其改变量的平方. 最小化总代价. 另有\(Q\) 次询问,每次修改一个位置上的数.(询问之间独立,互不影响) Sol 神仙 ...
- CDOJ 203 并查集+优先队列 好题
题目链接 Islands Time Limit: 30000/10000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) S ...
- 消息 15135，级别 16，状态 8，过程 sp_addextendedproperty，对象无效。不允许有扩展属性，或对象不存在。
不知道网上为啥有那么多复制粘贴的文章,写点原创不好吗?堂而皇之的贴别人的文章有意思吗? 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,对象无效.不允许有扩 ...
- Redis高级命令及特性（安全性）
高级命令 keys * : 返回满足的所有键 ,可以模糊匹配 exists :是否存在指定的key,存在返回1,不存在返回0 exprie:设置某个key的过期时间 ttl:查看剩余时 ...
- Replicate（网络复制）,ActorRole（角色）,Ownership（所有权）以及RPC（远程调用）等等
I. Replication Replication指的是 从服务端向客户端 传递数据和信息的行为.注意是单向的,不会从客户端传递信息和数据到服务端. 假设一个Actor被设置为Replicates, ...
- HDU1254--推箱子（BFS+DFS）
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s) ...
- python正则之match search findall
match:只匹配一次,开头匹配不上,则不继续匹配 a,b,\w+ match(a,"abcdef") 匹配a >>> re.match("a" ...
- 《Effective Java》读书笔记 - 8.通用编程
Chapter 8 General Programming Item 45: Minimize the scope of local variables local variables应该在他们要被用 ...
- laravel中model类中好用的方法
public function field() { return $this->belongsTo(HrmAuthFieldsModel::class, 'filed_id', 'id'); } ...