前端笔记Vue项目day3(一）

组件

• 组件 (Component) 是 Vue.js 最强大的功能之一

• 组件可以扩展 HTML 元素，封装可重用的代

组件注册全局注册

• Vue.component('组件名称', { })     第1个参数是标签名称，第2个参数是一个选项对象

• 全局组件注册后，任何vue实例都可以用

组件基础用[mw_shl_code=applescript,true]<div id="example">
  <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->  
  <my-component></my-component>
</div>
<script>
    //   注册组件 
    // 1、 my-component 就是组件中自定义的标签名
        Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })

    // 创建根实例
    new Vue({
      el: '#example'
    })

</script>[/mw_shl_code]
组件注意事项

• 组件参数的data值必须是函数同时这个函数要求返回一个对象

• 组件模板必须是单个根元素

• 组件模板的内容可以是模板字符串

• [mw_shl_code=applescript,true] <div id="app">
       <!-- 
                  4、  组件可以重复使用多次 
                因为data中返回的是一个对象所以每个组件中的数据是私有的
                    即每个实例可以维护一份被返回对象的独立的拷贝   
          --> 
      <button-counter></button-counter>
      <button-counter></button-counter>
      <button-counter></button-counter>
        <!-- 8、必须使用短横线的方式使用组件 -->
       <hello-world></hello-world>
    </div>
  
  <script type="text/javascript">
          //5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
      // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
       Vue.component('HelloWorld', {
        data: function(){
          return {
            msg: 'HelloWorld'
          }
        },
        template: '<div>{{msg}}</div>'
      });
      
      
      
      Vue.component('button-counter', {
        // 1、组件参数的data值必须是函数 
        // 同时这个函数要求返回一个对象  
        data: function(){
          return {
            count: 0
          }
        },
        //  2、组件模板必须是单个根元素
        //  3、组件模板的内容可以是模板字符串  
        template: `
          <div>
            <button @click="handle">点击了{{count}}次</button>
            <button>测试123</button>
                          #  6 在字符串模板中可以使用驼峰的方式使用组件        
                     <HelloWorld></HelloWorld>
          </div>
        `,
        methods: {
          handle: function(){
            this.count += 2;
          }
        }
      })
      var vm = new Vue({
        el: '#app',
        data: {
          
        }
      });
    </script>[/mw_shl_code]