定义Vue组件

最新推荐文章于 2023-10-07 11:49:18 发布

凌辰 ℡

最新推荐文章于 2023-10-07 11:49:18 发布

阅读量95

点赞数

分类专栏： vus.js 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_43117777/article/details/120633302

版权

vus.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

定义Vue组件

什么是模块化：模块化是从代码的角度出发，分析项目，把项目中一些功能类似的代码，单独的抽离为一个个的模块；那么为了保证大家以相同的方式去封装模块，于是我们就创造了模块化的规范（CommonJS规范）；
– 模块化的好处：方便项目的开发；和后期的维护与扩展；今后如果需要某些固定功能的模块，则直接拿来引用就行，提高了项目开发效率！
什么是组件化：从UI的角度出发考虑问题，把页面上有重用性的UI结构和样式，单独的抽离出来，封装为单独的组件；
– 组件化的好处：随着项目规模的发展，我们手里的组件，会越来越多，这样，我们今后一个页面中的UI，几乎都可以从手中拿现成的组件拼接出来；方便项目的开发和维护；

全局组件定义的三种方式

第一种方式：

先调用Vue.extend()得到组件的构造函数：

// 创建全局组件的第一种方式：   component
const com1 = Vue.extend({
  template: '<h1>这是创建的第一个全局组件</h1>' // template 属性，表示这个组件的 UI 代码结构
})

2.通过 Vue.component('组件的名称', 组件的构造函数) 来注册全局组件：

// 使用 Vue.component 向全局注册一个组件
// Vue.component('组件的名称', 组件的构造函数)
Vue.component('mycom1', com1)

3.把注册好的全局组件名称，以标签形式引入到页面中即可：

<!-- 如何引入一个全局的Vue组件呢？ 直接把 组件的名称，以标签的形式，放到页面上就好了！ -->
 <mycom1></mycom1>

网页代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 如何引入一个全局的 Vue 组件呢？ 直接把 组件的名称，以标签的形式，当道页面上就好了！ -->
        <mycom1></mycom1>    
    </div>
    <script>

        // component 组件
        // 创建全局组件的第一种方式：
        const com1 =   Vue.extend({
            template:'<h1>这是创建的第一个全局组件</h1>', //template 属性，表示这个组件的 UI 结构
        })

        // 使用Vue.component向全局注册一个组件
        // Vue.component('组件的名称',组件的构造函数);
        Vue.component('mycom1',com1);

      const vm =  new Vue({
            el:"#app",
            data:{
               
            },
            methods:{},
            filters:{},
            directives:{},
            created(){  //表示 data 数据 和 methods 方法都已经可用了
            },
            mounted(){  
            	// 表示 内存中渲染好的 DOM 树，已经挂载到了真实的页面中;
                // 在网页中，有一些第三方的插件，需要初始化:
                // 使用 Jquery 封装出来的框架分为连部分： UI 结果   JS 代码
                // 因此： 一些第三方的插件，如果要结合Vue来使用，而且，这个插件需要手动初始化 JS 逻辑，此时，必须放到 mounted，否则，可能无法出现预期效果；
            }
        })
    </script>
</body>
</html>

第二种方式：

直接使用 Vue.component('组件名称', { 组件模板对象 })

const com2Obj = {
   template: '<div><h2>这是直接使用 Vue.component 创建出来的组件</h2><h3>红红火火</h3></div>'
 }

 // 定义全局的组件
 // Vue.component 的第二个参数，既接收 一个 组件的构造函数， 同时，也接受 一个对象
 Vue.component('mycom2', com2Obj)

网页代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <mycom2></mycom2>
    </div>
    <script>

        // 定义全局的组件
        // Vue.component的第二个参数，即接收一个 组件的构造函数，同时，也接收 一个对象
        Vue.component('mycom2',{
             // 1. template 属性中，不能单独放一段文本，必须用标签包裹起来；
            // 2. 如果在 template 属性中，想要放多个元素了，那么，在这些元素外，必须有唯一的一个根元素进行包裹；
            template:'<h2>这是直接使用 Vue.component 创建出来的组件</h2>'
        });

      var vm =  new Vue({
            el:"#app",
            data:{
               
            }
        })
    </script>
</body>
</html>

第三种方式：

先使用 template 标签定义一个模板的代码结构：

<!-- 定义一个 template 标签元素  -->
<!-- 使用 Vue 提供的 template 标签，可以定义组件的UI模板解构 -->
<template id="tmpl">
 <div>
   <h3>哈哈，这是在外界定义的组件UI解构</h3>
   <h3>我是来捣乱的</h3>
 </div>
</template>

使用 Vue.component 注册组件：

// 这是定义的全局组件
 Vue.component('mycom3', {
   template: '#tmpl'
 })

网页代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 定义一个 template 标签元素 -->
        <!-- 使用 Vue 提供的 template 标签，可以定义组件的UI模板结构 -->
        <mycom3></mycom3>
    </div>
    <template id="tmpl">
        <div>
            <h3>哈哈，这是在外界定义的组件UI结构</h3>
            <p>我是来捣乱的</p>
        </div>
    </template>
    <script>
     // 这是定义的全局组件
      Vue.component('mycom3',{
          template:'#tmpl'
      })  

      var vm =  new Vue({
            el:"#app",
            data:{
               
            }
        })
    </script>
</body>
</html>