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. Vs 快捷键---探索不一样的编程

    前言:现在很多工具都支持各式各样的快捷键,vs作为后起之秀,多功能的快捷键自然是必不可少的, 而且针对单行操作的快捷键是无需选中整行的,只需要光标停留在所操作的代码上面即可. 1.注释:CTRL+K+ ...

  2. 5.30 NOI 模拟

    $5.30\ NOI $模拟 高三大哥最后一次模拟考了,祝他们好运 \(T1\)装箱游戏 显然可以将四种字母之间的空缺当做状态枚举 那么这道题就很显然了 #include<bits/stdc++ ...

  3. 官宣！DolphinScheduler 毕业成为 Apache 软件基金会顶级项目

    全球最大的开源软件基金会 Apache 软件基金会(以下简称 Apache)于北京时间 2021年4月9日在官方渠道宣布Apache DolphinScheduler 毕业成为Apache顶级项目.这 ...

  4. LuoguP5390 [Cnoi2019]数学作业(数论)

    转进制,然后发现贡献只有\(1_{(2)}\),取奇数个的子集方案是\(2^{n-1}\) #include <iostream> #include <cstdio> #inc ...

  5. java过滤器的写法

    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 原文地址:http://t.csdn.cn/ZD88A ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 过滤器实际上就是 ...

  6. openjdk的bug

    容器内就获取个cpu利用率,怎么就占用单核100%了呢 背景:这个是在centos7 + lxcfs 和jdk11 的环境上复现的 下面列一下我们是怎么排查并解这个问题的. 一.故障现象 oppo内核 ...

  7. [CF1527D] MEX Tree （lca）

    题面 给你一棵 n n n 个结点的树,对于所有的 k ∈ [ 0 , n ] k\in[0,n] k∈[0,n] ,求出 M E X = k {\rm MEX}=k MEX=k 的路径数量. 一条路 ...

  8. 新年趣事之红包--"四边形"不等式优化DP

    目录 题目描述 输入 输出 思路 新年趣事之红包 时间限制: 1 Sec  内存限制: 64 MB 题目描述 xiaomengxian一进门,发现外公.外婆.叔叔.阿姨--都坐在客厅里等着他呢.经过仔 ...

  9. c++的一些笔记

    --const 的一些用法 1,修饰指针 const int *p=....   可以改变指针所指的位置,但不能改变指向位置的值. 2,修饰变量 int const * p=....  可以改变指向位 ...

  10. [报错]-RuntimeError: Input type (torch.cuda.HalfTensor) and weight type (torch.cuda.FloatTensor) should be the same

    RuntimeError: Input type (torch.cuda.HalfTensor) and weight type (torch.cuda.FloatTensor) should be ...