vue组件化

作者: A_9c74 | 来源:发表于2018-11-16 10:51 被阅读0次

Vue组件和父子组件
Vue.js的组件化思想 —上
（15）打鸡儿教你Vue.js
大话大前端时代(一) —— Vue 与 iOS 的组件化
vue
Vue组件化
vue-5
Vue实践与总结——组件与数据
vue组件化思想
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>