组件怎么从创建到使用?

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

感觉个人理解就是创建一个模板,和创建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. Java 7的javax.net.ssl.SSLHandshakeException

    Java 7的javax.net.ssl.SSLHandshakeException 现象:Java7通过httpsURLConnection建立HTTPS连接,异常如下: javax.net.ssl ...

  2. MVC,MVVM模式的理解

    基本上,我们的产品就是通过接口从数据库中读取数据,然后将数据经过处理展示到用户看到的视图上.当然我们还可以从视图上读取用户的输入,然后通过接口写入到数据库.但是,如何将数据展示到视图上,又如何将用户的 ...

  3. match、vlookup、hlookup函数(结合index运用可以实现自动化填充)

    1.match返回查找值位置: match(lookup_value, lookup_array, match_type) Match(目标值,查找区域,0/1/-1) 使用注意:返回值是基于选择区域 ...

  4. 并发王者课-铂金8:峡谷幽会-看CyclicBarrier如何跨越重峦叠嶂

    欢迎来到<并发王者课>,本文是该系列文章中的第21篇,铂金中的第8篇. 在上一篇文章中,我们介绍了CountDownLatch的用法.在协调多线程的开始和结束时,CountDownLatc ...

  5. 『无为则无心』Python序列 — 20、Python元组的介绍与使用

    目录 1.元组的应用场景 2.定义元组 3.元组的常见操作 @1.按下标查找数据 @2.index()方法 @3.count()方法 @4.len()方法 4.元祖中的列表元素 5.扩展:序列封包和序 ...

  6. 10、linux启动过程

    (1)linux启动说明: 第一步:开机自检,检查硬件,加载BIOS(帮我们找到启动盘是谁): 第二步:读取MBR(读取启动硬盘0柱面0磁道1扇区(512字节)的前446字节,找到装有操作系统的分区) ...

  7. MongoDB数据库 5分钟快速上手

    安装 本次安装使用docker镜像,安装无障碍,一行命令即可解决 # 安装镜像并启动 可以自行修改命令中的参数 ## 账户 tanoak 密码 123123 ## -p 27018:27017 映射端 ...

  8. SpringBoot:springboot整合eureka报错 Unable to start embedded Tomcat

    报错信息: org.springframework.context.ApplicationContextException: Unable to start web server; nested ex ...

  9. WPF使用Microsoft.VisualBasic创建单例模式引起的权限降低问题

    在进行WPF开发时,总是在找更加优雅去写单例模式的代码. 很多人都喜欢用Mutex,一个App.cs下很多的Mutex,我也喜欢用. 看完<WPF编程宝典>的第七章Applicaton类后 ...

  10. Django基础013--redis开发

    1.redis配置 在settings.py中加入以下代码块,可支持多个redis的配置 1 CACHES = { 2 "default": { 3 "BACKEND&q ...