vue创建组件的两种方式

组件的两种写法1.

 //组件  
    //优点:  吧原有的界面内容进行解耦    可以复用  高内聚，低耦合
    //注册组件 vue.extend({})
    //component组件
    //template
    let com = Vue.extend( {
        template: `<div>
            <h2>这里是使用Vue.extend创建的组件，傻逼你能看到我吗</h2>
            <p>{{text}}</p>
            <button @click="add">你已经点我了{{age}}次了,手不疼吗,人家最高点击了1000万次了</button>
            </div>`,
        //一个是全局data:{} 一个是局部 返回值函数
        //全局的话是暴露在全局任何一个组件都可以使用
        data() {
            return {
                text: "你吃翔吗",
                age: 18
            }
        },
        methods: {
            add() {
                this.age += 1 ;
            }
        },
       
        //可以使用ES6中的模板字符串``
      
    })
      //全局组件 只能写在外面 写在里面会报错
          //全局使用 Vue.component(组件名字,注册组件)
    Vue.component("todo",com) 
    //render>template>outerHTML 优先级
  let vm =   new Vue({
        el: "#app",
        data: {
            msg: "你好年轻人 奥利给"
        },
    //     template:'<div>内部的template</div>',
    //     render:function(createElement){
    // return createElement("h1","这是用来创建dom")
    //     },
        methods: {},
        Comment: {},
        filters: {},
        beforeCreate(){},
    })

组件的两种写法2.
这一种采用了语法糖形式 比原有的基础上少了一步

let com = Vue.extend() 语法糖写法 这个可以不写
Vue.component("todo",{
data() {
return {
text: "我不好",
age: 18
}
},
methods: {
add() {
this.age += 99999 ;
}
},

template: `<div>
    <h1>{{age}}</h1>
    <p>{{text}}</p>
    <button @click="add">点我加1</button>
</div>`
})