组件

• 组件 (Component) 是 Vue.js 最强大的功能之一
• 组件可以扩展 HTML 元素，封装可重用的代

组件注册

全局注册

• Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象
• 全局组件注册后，任何vue实例都可以用

Vue.component("组件的名称(button-click)"，{
data：function(){
return{
       count：0；
            }
      }，
template：'  点击了{{count}}'
})

组件注意事项

• 组件参数的data值必须是函数同时这个函数要求返回一个对象
  分析函数与普通对象的对比

• 组件模板必须是单个根元素（必须有父元素）
  分析演示实际效果

• 组件模板的内容可以是模板字符串
  模板字符串可以使用（支持ES6语法）

-组件命名方式

• 短横线方式
  Vue.compoent(‘my-compoent’,{ })
• 驼峰方式
  Vue.component(“MyComponent”,{ })

 

      
    



    //5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
    // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'
        }
      },
      template: '
{{msg}}