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 上开了一个收费专栏<左耳听风>,这个专栏会开 ...
随机推荐
- JVM垃圾回收之CMS收集器
从前文JVM垃圾回收几种常见算法和常见收集器我们知道,CMS是老年代垃圾收集器.CMS 收集器主要关注系统停顿时间.CMS 是 Concurrent Mark Sweep 的缩写,意为并发标记清除,从 ...
- python 操作符**与*的用法
- postman添加测试
我们有的时候可能需要登陆才能使用下面的接口 解决方案.在浏览器中找到cookie.然后放在postman中的Headers中
- SpringApplication.run 做了哪些事？
SpringApplication.run一共做了两件事,分别是 创建SpringApplication对象 利用创建好的SpringApplication对象,调用run方法论 结论: 面试官: 我 ...
- jquery animated选择器 语法
jquery animated选择器 语法 作用::animated 选择器选取当前的所有动画元素.直线电机参数 语法:$(":animated") jquery animated ...
- 实战build-react（三）+ style-components
npm install --save style-components https://www.jianshu.com/p/27788be90605(copy) "axios": ...
- npm 安装与卸载模块
1. 只卸载模块 由于之前安装过,在 package.json 中的记录仍然存在 npm uninstall lodash 2. --save 参数使用 卸载模块的同时删除在 package.json ...
- Bootstap
Bootstrap框架 Bootstrap框架 Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序 ...
- JMS学习五（ActiveMQ的本地事务）
1.ActiveMQ的本地事务 在一个JMS客户端,可以使用本地事务来组合消息的发送和接收.JMS Session接口提供了commit和rollback方法.事务提交意味着生产的所有消息被发送,消费 ...
- Spring Boot教程（六）在springboot中验证表单信息
构建工程 创建一个springboot工程,由于用到了 web .thymeleaf.validator.el,引入相应的起步依赖和依赖,代码清单如下: <dependencies> &l ...