Vue学习之全局和私有组件小结(七)

2019-08-14 09:59:07来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、组件:

  组件的出现,就是为了拆分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>

 


原文链接:https://www.cnblogs.com/21-forever/p/11107675.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript定时器的开启关闭

下一篇:JavaScript banner轮播 左右切换 圆点点击切换