vue组件化

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

  • 模块化:是从代码逻辑的角度进行划分的;
  • 组件化:是从UI界面的角度进行划分的;

创建组件的三种方式:
方式一:
Vue.component定义全局组件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
   <!--<mycom1></mycom1>-->
    <my-com1></my-com1>
</div>
</body>
<script>
    /*var com1=Vue.extend({
        template:"<h3>这是使用Vue.extend创建的组件</h3>"//通过template属性,指定了组件要展示的HTML结构
    })*/
    //Vue.component('mycom1',com1)
    /*如果使用驼峰命名 则引用组件的时候,需要把大写的驼峰改为小写的字母,同时 两个单词之间 用-连接*/
    /*第一个参数 组件的名称,将来在引用组件的时候就是通过这个名称来当做标签进行引用*/
    /*第二个参数 Vue.extend创建的组件,其中template 就是组件将来要展示的HTML结构*/
    Vue.component('myCom1',Vue.extend({
        template:"<h3>这是使用Vue.extend创建的组件</h3>"//通过template属性,指定了组件要展示的HTML结构
    }))
    var vm=new Vue({
        el:'#app',
        data:{

        }
    })
</script>
</html>

方式二:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<mycom2></mycom2>
</div>
</body>
<script>
  Vue.component('mycom2',{
      //不论是哪种方式创建出来的组件,组件的template属性指向的模版内容,必须有且只能有唯一的一个根元素
      template: '<div><h3>这是直接使用Vue.component创建出来的组件</h3><span>123</span></div>'
  })
  var vm=new Vue({
      el:"#app"
  })
</script>
</html>

方式三:
外部定义组件模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--在被控制的#app 外面 使用 template元素 定义 组件的html结构-->
    <mycom3></mycom3>
</div>
<div id="app2">
    <login></login>
</div>
<template id="tmpl">
    <div>
        <h1>这是通过template元素在外部定义的组件结构</h1>
    </div>
</template>
<template id="tmpl2">
    <div>
        <h1>这是私有组件</h1>
    </div>
</template>
</body>
<script>
    Vue.component('mycom3',{
        template:'#tmpl'
    })
    var vm=new Vue({
        el:"#app"
    })
    /*通过 components定义一个私有组件*/
    var vm2=new Vue({
        el:"#app2",
        components:{
            login:{
                template:'#tmpl2'
            }

        }
    })
</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文章是我最近在公司的一场内部分享的内容。我有个习惯就是每次分享都会先将要分享的内容写成文章。所以这个文集也是用来...
    Awey阅读 9,477评论 4 67
  • 组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。...
    IT老马阅读 810评论 0 1
  • 使用 vue-cli 创建模板项目 1、说明 1)vue-cli 是 vue 官方提供的脚手架工具2)github...
    qianxun0921阅读 709评论 0 0
  • 教师节当天给导师发祝福短信,结果导师问了一连串的问题:结婚了吗?现在在哪儿工作呢?有编制吗?工作开心不开心?看到这...
    温暖的十月阅读 352评论 0 0
  • 突然发现 纵观我们这辈子就算是碌碌无为 就算是平平凡凡 就算是佛系人生 不是因为我们拥有的太多 而是我们在珍惜着我...
    晴天兔子阅读 131评论 0 0