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:

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

<!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>

View Code