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. leetcode | 107. 二叉树的层序遍历 II | javascript实现 | c++实现

    题目 给你二叉树的根节点 root ,返回其节点值 自底向上的层序遍历 . (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 思路 题目的要求相当于是求层序遍历数组的转置,我们只需利用js的 ...

  2. Operational Property Graphs到底是个啥？

    Operational Property Graphs,中文通常译为"操作属性图". 作为23ai中被官方highlight出的新特性之一,我们先看下官方的原文描述: Operat ...

  3. Nacos + Gateway网关搭建微服务

    文章所有代码GtiHub:https://github.com/Tom-shushu/work-study 里面的gateway-server和server1项目 1.Docker 部署 Nacos ...

  4. [AGC030C] Coloring Torus

    非常巧妙的一道构造题,发现对于所构造的 \(n\) 有上限,那么对于 \(K<=500\) 的情况,很好构造,每行全是一个数就行了,对于 \(K>500\) 的情况,显然每行都是 \(1, ...

  5. 基于 UDP 的 组播、广播详解

    背景 有些时候我们在网络通信中也需要用到 组播(多播).广播.现在我们来介绍如何实现. 建议:在此之前,关闭防火墙. ubuntu: service ufw stop windows: 控制面板关闭 ...

  6. Linux C 读写超过2G的大文件 注意事项

    背景 在项目中做大文件的增量读写,遇到了问题: fopen : Value too large for defined data type. 习惯性地根据这个提示查阅的有关资料显示: 1)工具链太老了 ...

  7. Tutorial: How to install GNU MCU Eclipse?

    Overview For more flexibility and upgradeability, GNU MCU Eclipse is not packed as a all-inclusive s ...

  8. 2.SpringBoot快速上手

    2.SpringBoot快速上手 SpringBoot介绍 javaEE的开发经常会涉及到3个框架Spring ,SpringMVC,MyBatis.但是这三个框架配置极其繁琐,有大量的xml文件,s ...

  9. c 语言学习第二天

    常量 字符串常量 字符 例如:'f','i','z','a'编译器为每个字符分配空间. 'f' 'i' 'z' 'a' 字符串 例如:"hello"编译器为字符串里的每个字符分配空 ...

  10. 算法金 | 来了，pandas 2.0

    大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 今日 210+/10000,内含 Pandas 是一个强大的数据分析库,广泛应用于科学 ...