一、组件：

　　组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用相应的组件即可。

二、组件和模块：

1、模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；

2、组块化：是从UI界面的角度进行划分的；前端的组块化，方便UI组件的重用。

三、定义全局组件的方式：

　　　　三种方式：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>组件</title>

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

  </head>

  <body>

    <div id="app">

      <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 -->

      <mycom1></mycom1>

    </div>

    <!-- 3.在被控制的 #app外面，使用 template 元素，定义组件的HTML模板结构-->

    <template id="tmp1">

      <div>

        <h1>

          这是通过

          template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮

        </h1>

        <h4>好用，不错</h4>

      </div>

    </template id="tmp2">

    <h2>

        这是私有的 login 组件

    </h2>

    <template>

    </template>

    <script>

      Vue.component("mycom1", {

        template: "#tmp1"

      });

      // 1.1 使用 Vue.extend 来创建全局的Vue组件

      //   var com1 = Vue.extend({

      //   通过template 属性，指定了组件要展示的HTML结构

      //     template: "<h3>这是使用 Vue.extend 创建的组件<h3>"

      //   });

      //   1.2 使用 Vue.component('组件的名称'，创建出来的组件模板对象)

      //   如果使用 Vue.component 定义全局组件的时候，组件的名称使用了驼峰命名，则在引用组件的时候，

      // 需要把大写的驼峰改成小写的字母，同时，两个单词之前，使用 - 连接；

      // 如果不使用驼峰，则直接拿名称来使用即可；

      //   Vue.component("mycom1", com1);

      //   2. Vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是一个标签的形式来引入它的

      // 第二个参数：Vue.extend 创建的组件，其中 template 就是组件将来要展示的HTML内容。

      //   相当于第一种方式的简写

      //   Vue.component(

      //     "mycom1",

      //     Vue.extend({

      //       //注意：不论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个元素

      //       template:

      //         "<div><h3>这是使用 Vue.extend 创建的组件<h3><span>123</span></div>"

      //     })

      //   );

      var vm = new Vue({

        el: "#app",

        data: {},

        methods: {},

        filters: {},

        directives: {},

        components: {  //定义实例的内部私有组件的

          login: {

            template: "#tmp2"

          }

        }

      });

    </script>

  </body>

</html>

四、定义私有的组件：如上图代码中的  tmp2 ;

五、组件内可以有data数据，但其是一个有return的function方法。

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>组件</title>

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

  </head>

  <body>

    <div id="app">

      <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 -->

      <mycom1></mycom1>

    </div>

    <script>

      Vue.component("mycom1", {

        template: "<h1>这是全局组件-----{{ msg }}</h1>",

        data: function() {

          return {

            msg: "这是组件的中data定义的数据"

          };

        }

      });

      var vm = new Vue({

        el: "#app",

        data: {},

        methods: {},

        filters: {},

        directives: {}

      });

    </script>

  </body>

</html>

六、多个组件：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>组件</title>

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

  </head>

  <body>

    <div id="app">

      <counter></counter>

      <hr />

      <counter></counter>

      <hr />

      <counter></counter>

      <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 -->

    </div>

    <template id="tmp1">

      <div>

        <input type="button" value="+1" @click="increment" />

        <h3>{{ count }}</h3>

      </div>

    </template>

    <script>

      var dataObj = { count: 0 };

      //这是一个计数器的组件，身上有个按钮，每当点击按钮，让  data 中的 count 值 +1

      Vue.component("counter", {

        template: "#tmp1",

        data: function() {

          return {

            count: 0

          };

        },

        methods: {

          increment() {

            this.count++;

          }

        }

      });

      var vm = new Vue({

        el: "#app",

        data: {},

        methods: {},

        filters: {},

        directives: {}

      });

    </script>

  </body>

</html>

Vue学习之全局和私有组件小结（七）的更多相关文章

  1. vue学习-day03（动画，组件）

    目录: 1.品牌列表-从数据库获取列表    2.品牌列表-完成添加功能    3.品牌列表-完成删除功能    4.品牌列表-全局配置数据接口的根域名    5.品牌列表-全局配置emulateJS ...

  2. Vue学习之--------全局事件总线（2022/8/22）

    文章目录 1.全局事件总线基础知识(GlobalEventBus) 2.图解过程 3.代码实例 3.1 main.js 3.1 App.vue 3.2 School.vue 3.3 Student.v ...

  3. Vue学习(2)---v-指令和组件

    Vue中的指令 Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute) 一个v-bind的例子 <div id="app" v-bind ...

  4. 38.VUE学习之-全局组件和局部组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. vue学习--自定义全局vue组件

    文档目录: |--components |-loading(组件文件夹) |-loading.vue (loading组件核心) |-index.js //配置导出组件,并且install 主要配置到 ...

  6. vue学习笔记（1）—— 组件化实现todoList

    一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...

  7. Vue系列之 => 全局，私有过滤器

    私有过滤器也称局部过滤器 <script> // 全局过滤器 Vue.filter("datatime",function(timestr){ var tm = new ...

  8. vue中创建全局单文件组件/命令

    1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...

  9. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

随机推荐

  1. wordpress怎么用AMP加速器呢

    AMP项目(Accelerated Mobile Pages)是一个开放源代码计划,旨在为所有人打造更好的网络体验.借助该项目,用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精 ...

  2. python递归和内置方法

    递归:函数调用自身 核心:递进的时候能够达到一个结果,问题规模越来越小(不一定要真正的达到):设置一个条件,能够让最后一次函数调用结束 练习: ​ 第一个人的姓名是16岁,后面每个人的年龄都比前一个大 ...

  3. eclipse 导入项目后，在工程图标上出现红叉，但是工程中的文件并没有提示错误的解决方法

    进入项目包下的.settings目录,找到org.eclipse.wst.common.project.facet.core.xml文件,用记事本打开后才发现这句话有问题:<runtime na ...

  4. mysql Navicat通过代理链接数据库

    1.做完host 账号 密码(数据库服务器)配置之后,选择ssh 2.配置代理服务器ip的登录的账号密码.(代理服务器必须可以连你的Navicat客户端和数据库服务器,不然怎么做代理.) 3.可以直接 ...

  5. RedHat linux服务器安装elasticsearch且设置公网访问

    0. 首先需要安装jdk,因为elasticsearch是Java写的,默认需要Java环境,且安装elasticsearch 7.x需要使用jdk 1.8或更高版本 1. 执行以下命令,创建elas ...

  6. Spring Security教程之整合SpringMVC(六)

    一.前言 Spring Security系列教程中,前五篇为同一人所写,而本文是博主依据第三方文章整合而出,与前五篇文章的作者不是同一系列. 但本文以前五篇文章为基础,在前面文章所建立的Spring ...

  7. Java编程思想之十八 枚举类型

    关键字enum可以将一组具名的值的有限集合创建为一种新的类型, 而这些具名的值可以作为常规的程序组件使用.这是一种非常有用的功能. 18.1 基本enum特性 创建enum时,编译器会为你生成一个相关 ...

  8. 【Activiti学习之四】Activiti API（三）

    环境 JDK 1.8 MySQL 5.6 Tomcat 7 Eclipse-Luna activiti 6.0 一.启动流程 多种方式启动 package com.wjy.pro; import or ...

  9. CUDA学习笔记1

    最近要做三维重建就学习一下cuda的一些使用. CUDA并行变成的基本四路是把一个很大的任务划分成N个简单重复的操作,创建N个线程分别执行. CPU和GPU,有各自的存储空间: Host, CPU a ...

  10. CI框架从哪里看起？CI框架怎么开始学习，CI的初始设置

    很多朋友不知道CI框架从哪里开始学起,想学一个新的框架其实并不难.只要你认真研究,自习摸索都很简单! 概述和基本配置参数 配置CI: application/config/config.php:14配 ...