1.背景

2.组件的简单使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script src="../js/vue.js"></script>

</head>

<body>

<h2>组件使用的基本步骤</h2>

<pre>

    1.创建组件构造器 const componentMy = Vue.extend({ template:'html模板'})

    2.注册组件  Vue.component('c-my', componentMy)

    3.使用组件 写一组标签 c-my

这三步的执行分析:

1.Vue.extend()：

调用Vue.extend()创建的是一个组件构造器。

通常在创建组件构造器时，传入template代表我们自定义组件的模板。

该模板就是在使用到组件的地方，要显示的HTML代码。

2.Vue.component()：

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。

所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.组件必须挂载在某个Vue实例下，否则它不会生效。

</pre>

<div id="app">

    <!-- <div>

         <h4>我是主键01</h4>

         你好,我是自定义的组件

     </div>-->

    <!-- 3.使用组件-->

    <c-my></c-my>

</div>

<script>

    // 1.创建组件构造器

    const componentMy = Vue.extend({

        // 相当于一个模板

        template: '<div>' +

            '        <h4>我是主键01</h4>' +

            '        你好,我是自定义的组件' +

            '    </div>'

    })

    // 2.注册组件

    Vue.component('c-my', componentMy)

    let app = new Vue({

        el: '#app'

    })

</script>

</body>

</html>

3.全局组件与局部组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script src="../js/vue.js"></script>

</head>

<body>

<h2>局部组件与全局组件</h2>

<pre>

</pre>

<div id="app">

    <!-- 3.使用组件-->

    <c-my></c-my>

</div>

<script>

    // 1.创建组件构造器

    const componentMy = Vue.extend({

        // 相当于一个模板

        template: '<div>' +

            '        <h4>我是主键01</h4>' +

            '        你好,我是自定义的组件' +

            '    </div>'

    })

    // 2.注册组件(在这里注册的是 全局 组件,在任意一个vue实例下都可以使用)

    // Vue.component('c-my', componentMy)

    let app = new Vue({

        el: '#app',

        // 2.注册组件(在这里注册的是 局部 组件,只能在id=app下面使用才有效)

        components: {

            'c-my': componentMy

        }

    })

</script>

</body>

</html>

完美!

vue之组件的简单使用的更多相关文章

  1. vue基于组件实现简单的todolist

    把todolist拆分为header.footer.list三个模块 index文件 <!DOCTYPE html> <html lang="en"> &l ...

  2. vuex的简单例子和vue model组件

    好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...

  3. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  6. Vue.js—组件快速入门以及实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  7. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  8. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  9. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  10. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

随机推荐

  1. Task - lmdeploy

    基础作业: 使用 LMDeploy 以本地对话.网页Gradio.API服务中的一种方式部署 InternLM-Chat-7B 模型,生成 300 字的小故事(需截图

  2. 安装Ingress-Nginx

    目前,DHorse(https://gitee.com/i512team/dhorse)只支持Ingress-nginx的Ingress实现,下面介绍Ingress-nginx的安装过程. 下载安装文 ...

  3. Hbase第二课：Hbase架构与基础命令

    目录 HBase架构与基础命令 一.了解HBase 1.1 HBase概述 1.2 HBase处理数据 1.3 HBase与HDFS 二.HBase相关概念 2.1 分布式数据库 2.2 列式存储 2 ...

  4. OpenCV程序：OCR文档扫描

    一.文档扫描 代码 import cv2 import numpy as np #==============================计算输入图像的四个顶点的坐标=============== ...

  5. python 转换PDF 到 EPS

    from win32com.client.dynamic import ERRORS_BAD_CONTEXT as ebc from win32com.client import DispatchEx ...

  6. Simple WPF: WPF 实现按钮的长按，短按功能

    最新内容优先发布于个人博客:小虎技术分享站,随后逐步搬运到博客园. 实现了一个支持长短按得按钮组件,单击可以触发Click事件,长按可以触发LongPressed事件,长按松开时触发LongClick ...

  7. SQL如何优化和设计索引

    SQL优化 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引: 避免使用 NULL 字段,很难查询优化且占用额外索引空间,可以设置默认值0或'': ...

  8. python爬取网站图片保存到本地文件夹

    爬取的网站 https://wallpaperscraft.com/catalog/anime 爬取代码 # 导包 import os import requests import parsel fr ...

  9. 在宝塔上配置打包好的vue3项目

    配置文件如下 server{ listen 80; server_name gongchang.365cb.cn; index index.html index.htm default.php def ...

  10. 基于Java+SpringBoot+Vue宠物咖啡馆平台设计和实现

    \n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成 ...