组件怎么从创建到使用?

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

感觉个人理解就是创建一个模板,和创建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. js笔记10

    1.闭包 封装:减少代码的冗余,提高代码的重复利用率 继承:本来需要开辟多个空间,只需要开辟一个空间,减少内存的消耗,提高性能 函数归属:函数归属谁,跟他在哪调用没有关系,而跟他在哪定义有关 闭包的定 ...

  2. flex mx:TabNavigator进行选项卡切换,需要进行交互时。发生Error #1009错误

    当需要进行 mx:TabNavigator选项卡进行切换时,需要进行交互,然后却报了"TypeError: Error #1009: 无法访问空对象引用的属性或方法."错误,产生这 ...

  3. nohup启动 jar 不输出日志

    简单暴力:nohup java -jar xxx.jar >/dev/null 2>&1 &

  4. keycloak~自定义rest接口

    rest资源 对于我们集成keycloak来说,你可能会遇到它没有实现的功能,这时需要对kc进行扩展,资源的扩展是其中一个方面,它需要实现RealmResourceProvider和RealmReso ...

  5. 『无为则无心』Python序列 — 24、Python序列的推导式

    目录 1.列表推导式 (1)快速体验 (2)带if的列表推导式 (3)多个for循环实现列表推导式 2.字典推导式 (1)创建一个字典 (2)将两个列表合并为一个字典 (3)提取字典中目标数据 3.集 ...

  6. Spring:Spring-IOC实例化bean的常用三种方式

    Spring容器提供了三种对bean的实例化方式: 1)构造器实例化 public class Demo { private String name; //getter和setter方法略 } < ...

  7. 一文看懂HTTPS、证书机构(CA)、证书、数字签名、私钥、公钥(转)

    说到https,我们就不得不说tls/ssl,那说到tls/ssl,我们就不得不说证书机构(CA).证书.数字签名.私钥.公钥.对称加密.非对称加密.这些到底有什么用呢,正所谓存在即合理,这篇文章我就 ...

  8. GO系列-ini文件处理

    gopkg.in/ini.v1 配置加载 创建一个空的配置 cfg := ini.Empty() 直接加载存在的配置文件,如果文件不存在就会报错 cfg, err := ini.Load(" ...

  9. C语言:位运算加密

    数据加密解密是一个常用的功能,如果你不希望让别人看到文件中的内容,可以通过密钥(也称"密码")将文件的内容加密.比如文本文件(.txt),加密前的内容是能够读懂的,加密后的内容是& ...

  10. lombok之@Data

    在实体类的编写过程中,常常需要应用大量的get.set方法,需要写大量的重复代码,即有的工具有自动生成功能,当时也会使实体类中产生大量冗余代码,使得代码变,springboot为我们提供了相应注解可以 ...