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 上开了一个收费专栏<左耳听风>,这个专栏会开 ...
随机推荐
- vscode sftp插件的使用
1.在扩展中搜索 sftp 并下载安装: 2.F1调出命令窗口输入 sftp 点击 SFTP:Config : 3.编辑 sftp.json 文件并保存会在当前工程下形成 sftp.json 文件 4 ...
- 3.Pod控制器应用进阶
一.Pod的生命周期 init container -- Post start -- running -- pre stop -- main container 创建Pod经历的过程:->a ...
- C++为什么不可以把一个数组直接赋值给另一个数组
今天好奇一个问题, int a[3] = {1,2,3]; int b[3]; b=a; 编译器报错, 网上找了一圈, 大概明白: C++就是如此设定的, 数组不能直接赋值, 可以使用std::cop ...
- 【NOIP2017提高组模拟12.10】神炎皇
题目 神炎皇乌利亚很喜欢数对,他想找到神奇的数对. 对于一个整数对(a,b),若满足a+b<=n且a+b是ab的因子,则成为神奇的数对.请问这样的数对共有多少呢? 分析 设\(gcd(a,b)= ...
- String,Integer,int类型之间的相互转换
String, Integer, int 三种类型之间可以两两进行转换 1. 基本数据类型到包装数据类型的转换 int -> Integer (两种方法) Integer it1 = new I ...
- 实战build-react（三）
安装 redux-thunk yarn add redux-thunk 或 npm install redux-thunk --save https://github.com/zalmoxisus/r ...
- matlab中句柄@的用法
@是Matlab中的句柄函数的标志符,即间接的函数调用方法. 1 句柄函数 主要有两种语法: handle = @functionname handle = @(arglist)anonymous_f ...
- MySQL的启动关闭及登录退出
1启动和关闭: (1)此电脑->管理->搜索服务->查看本地服务->找到MySQL57然后选择启动 (2)同样步骤进行关闭 作为程序员,打开和关闭的方式当然要更多一点,打开cm ...
- （61）C语言预处理命令详解
一 前言 预处理(或称预编译)是指在进行编译的第一遍扫描(词法扫描和语法分析)之前所作的工作.预处理指令指示在程序正式编译前就由编译器进行的操作,可放在程序中任何位置. 预处理是C语言的一个重要功能 ...
- EF 视图查询坑
EF 视图在查询的时候如果主键一样则默认的数据都是第一条查询的数据