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. [DP] DP优化总结

    写在前面 $ DP $,是每个信息学竞赛选手所必会的算法,而 $ DP $ 中状态的转移又显得尤为关键.本文主要从状态的设计和转移入手,利用各种方法对朴素 $ DP $ 的时间复杂度和空间复杂度进行优 ...

  2. xshell和xftp下载免费版本方法

    下载地址 https://www.xshell.com/zh/free-for-home-school/ 填写邮箱和用户名,会发送下载邮件到邮箱,然后根据邮箱中的下载地址来下载安装.

  3. spring事务传递特性-REQUIRES_NEW和NESTED

    spring对于事务的实现的确是它的一大优点,节省了程序员不少时间. 关于事务,有许多可以聊的内容,例如实现方式.实现原理.传递特性等. 本文讨论传递特性中的REQUIRES_NEW,NESTED. ...

  4. admission-controllers

    WebHook是什么  官方文档: https://kubernetes.io/zh-cn/docs/reference/access-authn-authz/admission-controller ...

  5. Vim编辑的小技巧

    Vim编辑的小技巧 如何快速纠错 Ctrl + h 删除上一个字符, Ctrl + w 删除上一个单词, Ctrl + u 删除当前行. 从编辑模式快速切换到Nornal模式 1.Esc 2.Ctrl ...

  6. W801单片机入门开发环境设置

    W801单片机入门开发环境设置 开发软件下载 烧录工具和SDK 在 WinnerMicro的网站 https://www.winnermicro.com/html/1/156/158/558.html ...

  7. Windows下USB声卡音量调整

    买了一个绿联的USB声卡, 但是默认的音量太大了,最低音量都响的不行. 查了一下, 发现了一个叫EqualizerAPO的软件可以调整输出设备的音量. https://equalizerapo.com ...

  8. 【基础计算】ESDF栅格距离图计算并行加速版

    前言与参考 这一部分仅为路径规划源码及论文GPIR的一个小部分,但是有代码实现,第一次看的时候有些懵,所以特此记录:主要是设置好了栅格地图后,添加了障碍物后,对其的欧式距离计算和梯度计算等.原代码中为 ...

  9. SQLCel匹配原数据信息，更新原数据所有信息并插入新数据的过程

    使用SQLCel高效率(速度快,数据完整)的解决了我领导提的问题 "如何更新数据库中原有的数据并插入新的订单数据" 过程如下: 思路:使用字段匹配和修改字段即可解决问题,用时3分钟 ...

  10. Unity中指定相机截屏，并将图片转为Base64

    问题背景: 需求就是只截场景,不包含UI,并将截图保存为Base64格式给到Web展示. 方案: 指定相机截图: 1 /// <summary> 2 /// 指定相机截屏 3 /// &l ...