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. vant自动上传图片/文件

    vant自动上传文件/图片 vant上传图片与elementUI有所不同,没有自动上传功能,所以与后端进行接口对接的时候可以在after-read中将文件进行上传 html页面 <!-- 上传图 ...

  2. SpringBoot 如何集成 MyBatisPlus - SpringBoot 2.7.2实战基础

    SpringBoot 2.7.2 学习系列,本节通过实战内容讲解如何集成 MyBatisPlus 本文在前文的基础上集成 MyBatisPlus,并创建数据库表,实现一个实体简单的 CRUD 接口. ...

  3. GreatSQL FAQ

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 0. GreatSQL简介 1. GreatSQL的特色有哪些 2. GreatSQL在哪里可以下载 二进制包.RP ...

  4. C 语言 时间函数使用技巧（汇总）

    time.h 头文件 是 C 语言中 有关 时间的函数所储存的头文件 #include <time.h> 在介绍时间函数用法之前,我们首先要了解在 time.h 头文件中已经声明了的一个结 ...

  5. 《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(13)-Fiddler请求和响应断点调试

    1.简介 Fiddler有个强大的功能,可以修改发送到服务器的数据包,但是修改前需要拦截,即设置断点.设置断点后,开始拦截接下来所有网页,直到取消断点.这个功能可以在数据包发送之前,修改请求参数:在收 ...

  6. java单线程100%利用率

    容器内就获取个cpu利用率,怎么就占用单核100%了呢 背景:这个是在centos7 + lxcfs 和jdk11 的环境上复现的 目前这个bug已经合入到了开源社区, 链接为 https://git ...

  7. 【java】学习路径17-StringBuffer、StringBuilder的使用与区别

    本文讲解StringBuffer和StringBuilder的使用与区别. 1-- String String类型我们已经很熟悉了,String一旦被赋值,其在堆中的数据便无法修改. 平时我们的&qu ...

  8. 在cmd中使用doskey来实现alias别名功能

            作为一枚网络工程师,经常就是面对一堆黑框框,也是就是终端.不同操作系统.不同厂家的目录,功能相同但是键入的命令又大不相同,这些差异化容易让脑子混乱.比如华为.思科.H3C.锐捷的设备, ...

  9. 【设计模式】Java设计模式 - 责任链模式

    [设计模式]Java设计模式 - 责任链模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 目录 [设计模式]Java设计模式 - 责 ...

  10. KingbaseES 如何把一个schema下的所有对象访问权限授权给其他用户

    用户需求:新建一个用户 B,需要能够查询A用户的所有表,并且对以后新建的表也要有select权限. 问题分析:对于现有的表可以通过动态sql批量进行授权,但是未来新建的表要如何进行授权呢? 查询了帮助 ...