组件怎么从创建到使用?

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

感觉个人理解就是创建一个模板,和创建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. 第三天编程学习Hello,World!

    真正意义上迈入编程的大门--Hello,World! 新建一个文件夹(最好在桌面),方便存放代码 新建一个文件(如:Hello.txt) 改文件后缀名为.java 扩展文件得到Hello.java 编 ...

  2. Centos ulimit设置

    1.三处配置 1. 系统编译时默认设置文件(centos7新增) 服务配置 /etc/systemd/system.conf 用户配置 /etc/systemd/user.conf 2. PAM模块配 ...

  3. @Autowired报错原因分析和4种解决方案!

    上图的报错信息相信大部分程序员都遇到过,奇怪的是虽然代码报错,但丝毫不影响程序的正常执行,也就是虽然编译器 IDEA 报错,但程序却能正常的执行,那这其中的原因又是为何? ​ 报错原因分析 报错的原因 ...

  4. 11、nginx+tomcat+redis_session共享

    11.1.前言: 1.多个tomcat要一起协同工作可以考虑的方案如下: (1)使用tomcat自带的cluster方式,多个tomcat间自动实时复制session信息,配置起来很简单.但这个方案的 ...

  5. 43、uniq命令

    相邻去重 uniq -c 表示相邻去重并统计: 1.uniq介绍: uniq是对指定的ascii文件或标准输入进行唯一性检查,以判断文本文件中重复出现的行,常用于系统排查及日志分析: 2.命令格式: ...

  6. POJ 3984 迷宫(BFS)

    入门BFS,第一次做,部分借鉴了大牛的 #include <iostream> #include <cstdio> #include <queue> using n ...

  7. 资源:Maven相关jar快速下载地址

    Maven下载海外jar包太慢,可以进入下面地址搜索下载 下载地址:https://www.findjar.com/

  8. PHP单例模式 (转)

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...

  9. Leetcode No.122 Best Time to Buy and Sell Stock II Easy(c++实现)

    1. 题目 1.1 英文题目 You are given an array prices where prices[i] is the price of a given stock on the it ...

  10. python 字符串 增、删、改、查基本操作

    private static String TAG = "MainActivity"; private String str = " a,bB,1cCcc,2dDd d2 ...