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 上开了一个收费专栏<左耳听风>,这个专栏会开 ...
随机推荐
- 基于python的知乎开源爬虫 zhihu
今天在无意之中发现了一个知乎的开源爬虫,是基于Python的,名字叫zhihu_oauth,看了一下在github上面star数还挺多的,貌似文档也挺详细的,于是就稍微研究了一下.发现果然很好用啊.就 ...
- hive中对子查询如in，exists等支持
案例情况:同事使用公司数据探查跑一段代码,部分代码如下,报错,显示不支持in内的子查询.但是直接用虚拟机去跑的话代码没有任何报错,也出结果,很奇怪. SELECT t1.SIGN_CODE AS bu ...
- Java内存区域笔记（一）
程序计数器: 程序计数器是一块较小的内存空间,它可以看作当前线程所执行的字节码的行号指示器. 字节码解释器工作时就是通过改变这个计数器的值来选取下一条需要执行的字节码指令. 由于Java虚拟机的多线程 ...
- Docker(四)：Docker常用命令
除过以上我们使用的Docker命令外,Docker还有一些其它常用的命令 拉取docker镜像 docker pull image_name 查看宿主机上的镜像,Docker镜像保存在/var/lib ...
- 【NOIP2014模拟8.25】设备塔
题目 为了封印辉之环,古代塞姆利亚大陆的人民在异空间中建造了一座设备塔. 简单的说,这座设备塔是一个漂浮在异空间中的圆柱体,圆柱体两头的圆是计算核心,而侧面则是 传输信息所用的数据通道,划分成N *m ...
- 【curl】cookie的分隔符
cookie是以分号作为分隔符的. ex: curl --silent -H "Host: xxx.com" "172.172.178.9:80/item/comm?pi ...
- 对GraphQL-BFF：微服务背景下的前后端数据交互方案的研究-------引用
随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
- C++ 没有合适的默认构造函数（无参数构造函数）
本来今天吧,想写一个proxy class的范例,写着写着出了个问题,见如下代码 ; Array1D* _elemArray = new Array1D[_cap]; 同时我为Array1D这个类写了 ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- DOM操作元素
DOM 操作元素 JavaScript的DOM操作可以改变网页内容.结构和样式.我们可以利用DOM操作元素来改变元素里面的内容.属性等. DOM操作元素: 一.操作元素:(一)innerText .( ...