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. 写的程序总是出 BUG，只好请佛祖前来镇楼啦

    前言 自己之前写着玩的,在这做个备份,感觉不错的取走即可. 南无阿弥陀佛 佛祖镇楼,BUG 消失,永不怠机. ///////////////////////////////////////////// ...

  2. SDL3 入门（2）：第一个窗口

    在上一篇文章中我们已经利用 SDL 的日志接口实现了简单的字符串输出,实际上是解决了开发环境搭建问题,接下来我们将在已有代码的基础上继续开发,实现第一个窗口的创建和背景色绘制. 初始化 首先设置日志输 ...

  3. restTemplate.getForEntity restTemplate.getForObject GET请求

    //带参数 @Test public void testGet1(){ String url = "http://IP:PORT/query?token={token}&memNo= ...

  4. 调用支付JSAPI缺少参数：total_fee解决方法

    1.https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7 调用支付JSAPI缺少参数:total_fee 1.请检查预支付会话标识p ...

  5. hbase的优缺点

    一. 一个关于hbase介绍全面的博客地址 https://www.csdn.net/gather_22/MtTaEgysNjYwOS1ibG9n.html 优点: 1,方便高效的压缩数据. 2,支持 ...

  6. 大模型重塑软件开发，华为云AI原生应用架构设计与实践分享

    在ArchSummit全球架构师峰会2024上,华为云aPaaS平台首席架构师马会彬受邀出席,和技术爱好者分享AI原生应用引擎的架构与实践. AI大模型与AI重塑软件的大趋势下,软件会发生哪些本质的变 ...

  7. 免费领 | 2000件“直击灵魂”的Polo衫，创龙科技10周年献礼！

          一件"有灵魂"的Polo衫 时光荏苒,创龙科技即将迎来10周年庆!为感谢各位客户多年的支持与信任,创龙科技特推出10周年献礼活动--2000件"直击灵魂&qu ...

  8. 用const修饰指针

    1)常量指针 语法:const 数据类型 *变量名; 不能通过解引用的方法修改内存地址中的值(用原始的变量名是可以修改的). 注意: l 指向的变量(对象)可以改变(之前是指向变量a的,后来可以改为指 ...

  9. ubuntu 同时安装python2 和 python3 版本的 gunicorn

    前言 最近在学习使用 gunicorn 部署 flask 项目.发现使用 pip3 安装完 gunicorn后,如如果再使用 pip2 安装 gunicorn,后安装的 gunicorn 就会覆盖掉原 ...

  10. [oeasy]python0074_设置高亮色_color_highlight_ansi_控制终端颜色

    更多颜色 回忆上次内容 上次我们搞的还是颜色 FG foreground 前景色 30-37 BG background 背景色 40-47 这些 都可以和字体样式 结合起来 难道 就这几种颜色 吗? ...