组件怎么从创建到使用?

第一步创建组件构造器对象

感觉个人理解就是创建一个模板,和创建MongoDB数据模板相似

const cpnC = Vue.extend({
template: `
<div >
<h1>我是标题</h1>
<p>我是内容</p>
</div>`
})

  

第二步注册组件

模板做好了就要注册一下才能用,注册成Vue的组件

Vue.component('my-cpn', cpnC)
const app = new Vue({
el: '#app',
data: {
message: "你好,世界", }, })

  

第三步使用组件

<div id="app">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>

小白学习vue第五天(理解使用组件开发,组件第一弹)的更多相关文章

  1. 小白学习vue第五天-第二弹(全局局部、父子、注册语法糖,script/template抽离模板)

    全局组件: 就是注册的位置在实例对象的外面 并且可以多个实例对象使用 而局部: 就是在实例对象的内部注册 父组件和子组件的关系 子组件就是在另一个组件里面注册的组件 组件注册语法糖: 就不用Vue.e ...

  2. 小白学习Vue第五天(v-model实用的地方)

    用法一radio单选项 <!-- 添加name男女选项互斥 --> <label for="male"> <input type="radi ...

  3. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  4. 小白学习django第五站-简易案例

    首先在setting.py文件中编写数据库配置内容 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': ' ...

  5. 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  6. 学习vue第五节,vue中使用class和style的css样式

    vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...

  7. 小白学习vue第三天,从入门到精通(computed计算属性)

    computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...

  8. 小白学习Spark系列五:scala解析多级json格式字符串

    一.背景 处理json格式的字符串,key值一定为String类型,但value不确定是什么类型,也可能嵌套json字符串,以下是使用 JSON.parseFull 来解析多层json. 二.实例代码 ...

  9. c#面向对象基础技能——学习笔记(五)委托技术在开发中的应用

    委托 delegate 1.是一种全新的面向对象语言的特性: 2.开发事件驱动程序变得非常简单: 3.简化多线程难度. 理解委托:可以理解成一个方法的指针.(接收的变量是方法) 步骤: 1.声明委托, ...

随机推荐

  1. 跟我一起学Go系列:Go gRPC 安全认证方式-Token和自定义认证

    Go gRPC 系列: 跟我一起学Go系列:gRPC安全认证机制-SSL/TLS认证 跟我一起学 Go 系列:gRPC 拦截器使用 跟我一起学 Go 系列:gRPC 入门必备 接上一篇继续讲 gRPC ...

  2. POJ 1696 Space Ant 点积计算夹角

    题意: 一只特别的蚂蚁,只能直走或者左转.在一个平面上,有很多株植物,这只蚂蚁每天需要进食一株,这只蚂蚁从起点为(0,miny)的点开始出发.求最多能活多少天 分析: 肯定是可以吃到所有植物的,以当前 ...

  3. AcWing 1293. 夏洛克和他的女朋友

    夏洛克有了一个新女友(这太不像他了!). 情人节到了,他想送给女友一些珠宝当做礼物. 他买了n件珠宝,第i件的价值是i+1. 华生挑战夏洛克,让他给这些珠宝染色,使得一件珠宝的价格是另一件珠宝的价格的 ...

  4. 资源:VMware秘钥许可证

    一. 激活密钥 YG5H2-ANZ0H-M8ERY-TXZZZ-YKRV8 UG5J2-0ME12-M89WY-NPWXX-WQH88 UA5DR-2ZD4H-089FY-6YQ5T-YPRX6 GA ...

  5. docker安装mysql镜像和容器

    下拉镜像 docker pull mysql/mysql-server:5.5 后面的mysql标签是版本号,是可选择的,有: 5.5 5.6 5.7 8.0 创建mysql5.5的容器 docker ...

  6. PV操作的概念

    PV操作:一种实现进程互斥与同步的有效方法,包含P操作与V操作. P操作:使 S=S-1 ,若 S>=0 ,则该进程继续执行,否则排入等待队列. V操作:使 S=S+1 ,若 S>0 ,唤 ...

  7. Linux date 获取时间

    获取当前日期: ubuser@ubuser-OptiPlex-7010:~$ date +%Y_%m_%d2020_12_16 获取当前时间: ubuser@ubuser-OptiPlex-7010: ...

  8. 线程中sleep()方法和wait()方法的前生今世

    先看再点赞,给自己一点思考的时间,如果对自己有帮助,微信搜索[程序职场]关注这个执着的职场程序员.我有什么:职场规划指导,技能提升方法,讲不完的职场故事,个人成长经验. 不知道大家有没有这种感觉,在公 ...

  9. 探索互斥锁 Mutex 实现原理

    Mutex 互斥锁 概要描述 mutex 是 go 提供的同步原语.用于多个协程之间的同步协作.在大多数底层框架代码中都会用到这个锁. mutex 总过有三个状态 mutexLocked: 表示占有锁 ...

  10. 史上最强Tableau Server 安装教程

    前言 本文介绍的是单节点部署Tableau Server. 安装前 1.Tableau Server 的单节点安装的最低硬件推荐配置: 处理器: 64 位 必须支持 SSE4.2 和 POPCNT 指 ...