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 上开了一个收费专栏<左耳听风>,这个专栏会开 ...
随机推荐
- 一个web应用的诞生(4)
上一章实现了登录的部分功能,之所以说是部分功能,是因为用户名和密码写成固定值肯定是不可以的,一个整体的功能,至少需要注册,登录,密码修改等,这就需要提供一个把这些值存储到数据库的能力. 当前的主流数据 ...
- share point 字段类型
Type (as shown on the Create Column page) Field Type Notes MSDN Links Single line of text Type=”Text ...
- CodeForces-916A-jamie and Alarm Snooze(笨比题目)
链接: https://vjudge.net/problem/CodeForces-916A 题意: Jamie loves sleeping. One day, he decides that he ...
- Codeforces Gym 101505C : Cable Connection （计算几何）
题目链接 题意:给出第一象限的N个点,存在一直线x/a+y/b=1(a>0,y>0)使得所有点都在这条直线下面,求 min{sqrt(a^2+b^2)} 显然,这样的直线必然经过这N个点中 ...
- 对url给后台传数据的时候特殊字符需要转义
URL中的字符只能是ASCII字符,但是ASCII字符比较少,而URL则常常包含ASCII字符集以外的字符,如非英语字符,汉字,特殊符号等等,所以要对URL进行转换.这个过程就叫做URL编码,或者叫U ...
- vscode匹配括号插件
给大家推荐一个vscode匹配括号的插件: Bracket Pair Colorizer.超级好用哦
- 关于Fibonacci博弈的一些学习
关于Fibonacci博弈的一些学习 一道例题 问题 给定n(n≥2)个石头,游戏双方轮流取至少一个石子,取到最后一个石子的人算赢,但是要满足一下规则: 第一次取不能全部取完所有的石子. 设前一次取的 ...
- 使用 nodejs 和 axios 以及 cherrio 爬取天气预报
安装依赖 引入依赖 发送请求 解析请求的返回值 以下代码可以复制直接运行,获得 7 天的天气预报 const axios = require('axios') const cheerio = requ ...
- （57）Linux驱动开发之三Linux字符设备驱动
1.一般情况下,对每一种设备驱动都会定义一个软件模块,这个工程模块包含.h和.c文件,前者定义该设备驱动的数据结构并声明外部函数,后者进行设备驱动的具体实现. 2.典型的无操作系统下的逻辑开发程序是: ...
- bootstrap基础讲解
Bootstrap基础简介 网站链接: http://www.bootcss.com/ bootstrap优点: 下载: bootstrap的引入: <meta name="view ...