10vue组件入门_如何写一个最简单的vue组件_vue组件的作用是啥

柔情只为你懂 2022-05-30 01:25 261阅读 0赞

### 一、vue组件的概念： ###

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义标签，所有的 Vue 组件同时也都是 Vue 的实例（对象）。

commonJS，AMD，CMD是把JS逻辑进行模块化

vue组件是把页面（html代码，CSS代码）进行模块化

如下图所示，一个页面分四个部分，每个部分是个vue组件，而页面成了vue组件的容器。

![20180301143748661][]

### 二、  使用组件 ###

vue.js中创建组件有三个步骤：创建组件构造器，注册组件以及使用组件

> 1、 定义组件(创建组件构造器)（三种）
> 
> 2、 注册（声明）组件（两种）
> 
> 3、 使用组件
> 
>   
> 
> 
> 示例：
> 
> 代码示意图：  
> 
> 
> ![20180301144303948][]  
> 
> 
> 源代码：
> 
>     <div id="app1">		
>     	
>     	<my-p></my-p>
>     </div>
>     <div id="app2">			
>     	
>     	<my-p></my-p>
>     </div>
>     
>     <script type="text/javascript">
>     //1、定义组件构造器：
>     let myCom = Vue.extend({
>     	template:"<p>我是p</p>"
>     });
>     //2、注册全局组件（相当于自定义标签）
>     Vue.component("my-p",myCom);
>     //3、创建两个vue实例，都可以使用全局组件 my-p，具体使用的代码在HTML中。
>     let v1 = new Vue({
>     	el:"#app1"
>     });
>     let v2 = new Vue({
>     	el:"#app2"
>     });
>     </script>
> 
>   
>

[20180301143748661]: /images/20220530/2262bcfc8808478f9a34f88e1a4a25ef.png
[20180301144303948]: /images/20220530/ebd188761c90433d8db5e84ce2cf475b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

相关 10-Vue组件

Vue组件 ?前言??博客：【无聊大侠hello word】?✍有一点思考，有一点想法，有一点理性！✍✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍。

川长思鸟来/ 2024年05月03日 14:34/ 0 赞/ 64 阅读

相关 10vue组件入门_如何写一个最简单的vue组件_vue组件的作用是啥

一、vue组件的概念：组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件

柔情只为你懂/ 2022年05月30日 01:25/ 0 赞/ 262 阅读

相关 Vue 组件

首先，我们还是先创建一个vue实例，很熟练了，没难度。 <div id="app"></div> <script> let vm =

落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 390 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 368 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 406 阅读

相关 VUE组件

介绍几种VUE组件定义方法定义VUE 字符串组件 Vue.component('order-item', { //定义VUE组件的属

ゞ浴缸里的玫瑰/ 2022年03月26日 13:10/ 0 赞/ 390 阅读

相关 vue组件——vue简单说

目录组件基础示例：组件间传递数据 props基础示例： $emit基础示例： bus的使用使用$r

缺乏、安全感/ 2022年03月14日 15:16/ 0 赞/ 255 阅读

相关 VUE组件

VUE Component 一、概述 1. 作用扩展HTML元素，封装可重用的代码。在需要使用的地方引用组件。二、VUE前情回顾使用： 1.

雨点打透心脏的1/2处/ 2022年01月29日 06:19/ 0 赞/ 382 阅读

相关 Vue组件

为什么使用组件 JavaScript能力的复用。Vue.js的组件提高重复性，让代码可以复用。组件的用法组件在使用前先需要注册。注册分为两种方式：全局注册和局

叁歲伎倆/ 2021年09月27日 13:56/ 0 赞/ 484 阅读

相关 Vue组件

Vue组件 1. 什么是组件 1. 组件的概念：组件即自定义控件，是Vue.js最强大的功能之一 2. 组件的用途：组件能够封装可重用代码，扩展html标签功能

ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 678 阅读