1、为啥要使用组件

好用啊、像堆积木一样

2、基本使用

Vue中使用组件的三大步骤：

  • 一、定义组件(创建组件)
  • 二、注册组件
  • 三、使用组件(写组件标签)

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；区别如下：

  • 1、el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
  • 2、data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
    备注：使用template可以配置组件结构。

二、如何注册组件？

  • 1、局部注册：靠new Vue的时候传入components选项
  • 2、全局注册：靠Vue.component(‘组件名’,组件)

三、编写组件标签：<school></school>

3、代码实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题</title>

    <!-- 引入vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="App">

        <!-- 第三步、编写组件标签 -->

        <city></city>

        <hr>

        <school></school>

    </div>

    <div id="AppSecond">

        <city></city>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //第一步、创建city组件

        const city = Vue.extend({

            template: `

                <div class="cityDemo">

                     <h1>城市名称：{{cityName}}</h1>

                     <h1>城市美食：{{cityFood}}</h1>

                     <button @click="show">点击我弹窗</button>

                 </div>

            `,

            data() {

                return {

                    cityName: "周口",

                    cityFood: "胡辣汤"

                }

            },

            methods: {

                show() {

                    alert("你好啊、Vue")

                }

            },

        })

        //第一步创建 学校组件

        const school = Vue.extend({

            template: `

                <div class="cityDemo">

                     <h1>学校名称：{{schoolName}}</h1>

                     <h1>学校位置：{{schoolAddress}}</h1>

                 </div>

            `,

            data() {

                return {

                    schoolName: "长沙大学",

                    schoolAddress: "湖南长沙"

                }

            }

        })

        // 第二步、全局注册组件

        Vue.component('city', city)

        //创建Vue实例

        new Vue({

            el: '#App',

            data: {

                value: "Vue"

            }

            ,

            //第二步、注册组件（局部注册）

            components: {

                school,

            }

        })

        new Vue({

            el: '#AppSecond',

        })

    </script>

</body>

</html>

4、测试效果



5、注意点

几个注意点：

		1.关于组件名:

				  一个单词组成：

							第一种写法(首字母小写)：school

							第二种写法(首字母大写)：School

				  多个单词组成：

							第一种写法(kebab-case命名)：my-school

							第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

				   备注：

						(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

						(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

		2.关于组件标签:

					第一种写法：<school></school>

					第二种写法：<school/>

					备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

		3.一个简写方式：

				const school = Vue.extend(options) 可简写为：const school = options

Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）的更多相关文章

  1. vue单文件组件实例1：简单单文件组件

    ​ HelloWorld.vue: <template> <div class="hello"> <h1>{{msg}}</h1> ...

  2. vue单文件组件实例2：简单单文件组件

    ​ Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...

  3. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  4. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  5. 前端学习笔记系列一：2 Vue的单文件组件

    (1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...

  6. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

  7. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

  8. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  9. Vue -3：单文件组件

    在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规 ...

随机推荐

  1. Java面试题(五)--Rabbits

    1.什么是MyBatis? 1.Mybatis是一个半ORM(对象关系映射)框架,它内部封装了JDBC,开发时只需要关注SQL语句本身,不需要花费精力去处理加载驱动.创建连接.创建statement等 ...

  2. 技术分享 | MySQL数据误删除的总结

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 内容提要 用delete语句 使用drop.truncate删除表以及drop删 ...

  3. Pinhole类声明和实现

    针孔相机,带旋转,移动等功能. 类声明: #pragma once #ifndef __PINHOLE_HEADER__ #define __PINHOLE_HEADER__ #include &qu ...

  4. 用固态U盘让你的办公环境随身移动

    有些人因为家中的电脑设备没有办公环境,或者是软件太多装起来麻烦,以及环境不同步等原因上下班总是背着电脑,其实大可不必,只要将系统装进U盘,就可以让你的办公环境随身移动.在公司时启动U盘系统工作,下班后 ...

  5. Spring源码 17 IOC refresh方法12

    参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...

  6. 好好回答下 TCP 和 UDP 的区别

    写了这么多篇关于 TCP 和 UDP 的文章,还没有好好聊过这两个协议的区别,这篇文章我们就来开诚布公的谈一谈. 关于 TCP 和 UDP ,想必大家都看过一张这样的图. 有一个小姑娘在对着瓶口慢慢的 ...

  7. 【HTML】学习路径1-网页基本结构-标签基本语法

    本系列将学习最基础的web前端知识: HTML---CSS---JavaScripts---jQuery 四大部分学习完以后再进入到JavaWeb的知识.(后端) 然后再学习SpringBoot技术. ...

  8. 一 策略模式 来自CBF4LIFE 的设计模式

    刘备要到江东娶老婆了,走之前诸葛亮给赵云(伴郎)三个锦囊妙计,说是按天机拆开解决棘手问题,嘿,还别说,真是解决了大问题,搞到后是周瑜陪了夫人又折兵呀,那咱们先看看这个场景是什么样子的. 先说这个场景中 ...

  9. 离线方式安装高可用RKE2 (版本: v1.22.13+rke2r1)记录

    说明: 想要了解RKE2可以到官网(https://docs.rke2.io 或 https://docs.rancher.cn/docs/rke2/_index/)看最新资料 用官网给出的离线安装( ...

  10. KingbaseES insert all/first 功能介绍

    KingbaseES 内置了对于insert all / first 语法的支持. 一.数据准备 create table t1(product_id number, product_name var ...