组件化开发基础、分为三个步骤：

  1. 创建组件构造器对象
  2. 注册组件
  3. 使用组件
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

</head>

<div id="app">

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

    <my-cpn />

</div>

<body>

    <script>

        // 1、创建组件构造器对象

        const cnpC = Vue.extend({

            template: `

                <div>

                    <h2>我是标题</h2>

                    <p>组件化开发的思想</p>

                </div>

            `

        })

        // 2、注册组件

        Vue.component('my-cpn', cnpC)

        let vm = new Vue({

            el: '#app',

            data: () => ({}),

            methods: {}

        })

    </script>

</body>

</html>

步骤解析：

1、创建组件构造器对象

Vue.extend（）创建了一个组件构造器

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

该模板是使用组件的地方，显示的HTML代码

2、注册组件

Vue.component()

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

所需的有两个参数：

1、标签名    2、组件构造器名

3、使用组件

<my-cpn></my-cpn> 或  <my-cpn />

注：组件必须挂载到VUE实例下面才有效果，即#app 里面

vue-组件化开发基础的更多相关文章

  1. 二、vue组件化开发（轻松入门vue）

    轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...

  2. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  3. Vue组件化开发

    Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...

  4. day69:Vue:组件化开发&Vue-Router&Vue-client

    目录 组件化开发 1.什么是组件? 2.局部组件 3.全局组件 4.父组件向子组件传值 5.子组件往父组件传值 6.平行组件传值 Vue-Router的使用 Vue自动化工具:Vue-Client 组 ...

  5. Vue 组件化开发

    组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...

  6. Vue 组件化开发之插槽

    插槽的作用 相信看过前一篇组件化开发后,你对组件化开发有了新的认识. 插槽是干什么的呢?它其实是配合组件一起使用的,让一个组件能够更加的灵活多变,如下图所示,你可以将组件当作一块电脑主板,将插槽当作主 ...

  7. 06Vue.js快速入门-Vue组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  8. Vue 组件化开发的思想体现

    现实中的组件化思想化思想体现 标准(同一的标准) 分治(多人同时开发) 重用(重复利用) 组合(可以组合使用) 编程中的组件化思想 组件化规范:Web Components 我们希望尽可能多的重用代码 ...

  9. webpack（8）vue组件化开发的演变过程

    前言 真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发,所以项目中只会有一个inde ...

  10. vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

随机推荐

  1. fiddler---Fiddler弱网测试

    无论是做web端还是app端的测试,我们都需要对弱网进行测试,对于弱网方法有很多种,如:Fiddler模拟弱网,控制电脑的网速等,今天介绍下Fiddler如何进行测试弱网 什么是弱网 弱网看字面意思就 ...

  2. [转]5 种使用 Python 代码轻松实现数据可视化的方法

    数据可视化是数据科学家工作中的重要组成部分.在项目的早期阶段,你通常会进行探索性数据分析(Exploratory Data Analysis,EDA)以获取对数据的一些理解.创建可视化方法确实有助于使 ...

  3. Tensorflow之变量赋值输出1+2+3+4+5+6+7+8+...

    一.导入tensorflow import tensorflow as tf 二.定义计算图 (1)常量初始化 constant_name = tf.constant(value) (2)变量初始化 ...

  4. 剑指Offer-17.树的子结构(C++/Java)

    题目: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 分析: 注意这道题是判断B是不是A的子结构,而不是子树,这一点要注意下,且空树不是任意一个树的子结构 ...

  5. UVA11464 Even Parity 搜索+递推

    问题描述 UVA11464 题解 第一直觉爆搜. 发现 \(N \le 15\) ,然后后面每行都可以通过第一行递推出来. 爆搜第一行,递推后面+check \(\mathrm{Code}\) #in ...

  6. CF-1238 C.Standard Free2play

    题目大意: 有一个墙,高度为h,在每一个高度处都有一个踏板,有的踏板是隐藏着的,有的是伸出来的,小人站在h高度处(题目保证h高度处的踏板一定是伸出来的),这个小人每站到一个踏板上,就可以点一个开关,将 ...

  7. nodejs 连接MySQL后，输出数据带有RowDataPacket、中括号大括号怎么去掉？

    var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : ' ...

  8. ASP.NET开发实战——（十三）ASP.NET MVC 与数据库之EF实体类与数据库结构

    大家都知道在关系型数据库中每张表的每个字段都会有自己的属性,如:数据类型.长度.是否为空.主外键.索引以及表与表之间的关系.但对于C#编写的类来说,它的属性只有一个数据类型和类与类之间的关系,但是在M ...

  9. Paper | Compression artifacts reduction by a deep convolutional network

    目录 1. 故事 2. 方法 3. 实验 这是继SRCNN(超分辨)之后,作者将CNN的战火又烧到了去压缩失真上.我们看看这篇文章有什么至今仍有启发的故事. 贡献: ARCNN. 讨论了low-lev ...

  10. Paper | Beyond a Gaussian Denoiser: Residual Learning of Deep CNN for Image Denoising

    目录 故事背景 网络结构 BN和残差学习 拓展到其他任务 发表在2017 TIP. 摘要 Discriminative model learning for image denoising has b ...