组件怎么从创建到使用?

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

感觉个人理解就是创建一个模板,和创建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. 6、inotify实时备份

    备份用户nfs共享文件系统,存储单点解决方案inotify+rsync(增量,无差异备份),inotify是单线程, inotify是一种强大的,细粒度的,异步的文件系统事件监控机制,通过加入了ino ...

  2. Docker搭建zabbix+grafana监控系统

    一.准备工作 1.mysql数据库:192.168.1.5 2.nginx服务:192.168.1.10 3.docker服务器:192.168.1.20 4.zabbix客户端若干 二.docker ...

  3. 使用.net6 WebApplication打造最小API

    .net6在preview4时给我们带来了一个新的API:WebApplication,通过这个API我们可以打造更小的轻量级API服务.今天我们来尝试一下如何使用WebApplication设计一个 ...

  4. AcWing 244. 谜一样的牛

    有n头奶牛,已知它们的身高为 1~n 且各不相同,但不知道每头奶牛的具体身高. 现在这n头奶牛站成一列,已知第i头牛前面有a头牛比它低,求每头奶牛的身高. #include<bits/stdc+ ...

  5. Java实验项目二——小学生考试系统(简单四则运算)

    Program:设计实现一个小学生数学考试系统,完成随机出题(简单的四则运算),学生答题,自动判分的功能. Description:代码如下: 1 /* 2 * Description:面向考试系统建 ...

  6. Kubernetes 1.13.3 部署 Prometheus+Grafana-7.5.2(最新版本踩坑)

    本教程直接在 Kubernetes 1.13.3 版本上安装 Prometheus 和 Grafana-7.5.2,至于它们的原理和概念就不再赘述,这里就直接开始操作. Git 下载相关 YAML 文 ...

  7. 从零搭建一个IdentityServer——资源与访问控制

    IdentityServer作为授权服务器它的最终目的是用于对资源进行管控,这里所说的资源有两种,其一是API资源,实际上也就是OIDC协议中客户端(RP)所需要访问的一系列受保护的资源(API),授 ...

  8. python numpy高效体现

    import numpy as np import time def python_sum(n): a=[i**2 for i in range(n)] b=[i**3 for i in range( ...

  9. 团队开发day05

    在进行网络间的通信中,需要开启线程来实现网络连接, 但是在activity中无法拿到获取到的数据,数据只能在网络线程中查看 解决:通过Handler在线程之间进行通信,传递获取到的信息 Handler ...

  10. uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式

    前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...