17.组件页面应用和vue项目生成

基本示例

这里有一个 Vue 组件的示例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。

我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等

。仅有的例外是像 el 这样根实例特有的选项。

own:

<!DOCTYPE html>
<html>

<head>
    <title>组件的创建</title>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <!-- 组件可复用性强 -->
        <Vheader></Vheader>
        <Vheader></Vheader>
    </div>

    <script src="./js/vue.js" type="text/javascript"></script>

    <script type="text/javascript">

        //组件的创建
        Vue.component('Vheader', {
            data: function () {
                //必须要return,哪怕是空对象
                return {
                }
            },
            template: `
            <div clss='header'>
                <div clss ='w'>
                    <div class='w-1'>
                        <img src='./images/6.png'>
                    </div>

                    <div class='w-r'>
                        <button>登录</button> <button>注册</button>

                    </div>

                </div>

            </div>

            `
        })

        var app = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            computed: {
            }
        })
    </script>

</body>

</html>

具体页面使用

1.引入子组件

2.在 components 中配置子组件不然不显示

3.放到页面上使用

<!--一个组件有三部分组成-->

  <!-- 页面的结构 -->
<template>

<div class="app">
  <h3>{{ msg }}</h3>
  <div class="app"></div>
  <p>哈啊哈哈</p>

    <Vheader></Vheader>
    <Vcontent></Vcontent>
    <Vfooter></Vfooter>

</div>

</template>

<script>
// 1.引入子组件
import Vheader from './components/Vheader'
import Vcontent from './components/Vcontent'
import Vfooter from './components/Vfooter'

//页面的业务逻辑
export default {
  name:'App',
  data(){
    return{
      msg:'Hello 组件'

    }
  },
  methods:{

  },
  computed:{

  },
  //配置子组件不然不显示
  components:{
    Vheader,
    Vcontent,
    Vfooter,

  }
}
</script>>
<style >

</style>

子组件页面（头，内容，页脚）:

头：

<template>
    <header class="wrap">
        <h3>头标题</h3>
    </header>
</template>

<script>
export default {
    name:'Vheader',
    data(){
        return{

        }
    }

}
</script>

<style>
    h3{
        color: red

    }

</style>

内容：

<template>
    <content class="wrap">
        <h4>我是中心内容</h4>

    </content>
</template>

<script>
export default {
    name:'Vcontent',
    data(){
        return{

        }

    }

}
</script>

<style>
h4{
    color: blue

}

</style>

页脚：

<template>
    <footer class="wrap">
        <h5> 我是footer页脚</h5>

    </footer>
</template>

<script>
export default {
    name:'Vfooter',
    data(){
        return{

        }

    }
}
</script>

<style>
    h5{
        color: blueviolet
    }

</style>

组件的复用

你可以将组件进行任意次数的复用：

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

注意当点击按钮时，每个组件都会各自独立维护它的 count。

因为你每用一次组件，就会有一个它的新实例被创建。

data 必须是一个函数

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。

这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：

Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，

也包括其组件树中的所有子组件的模板中。

到目前为止，关于组件注册你需要了解的就这些了，