vue组件化学习

-注册组件:
~ 组件的使用分成三个步骤
1.创建组件构造器
2.注册组件

3.使用组件

最基本的组件使用和创建

 <div id='app'>
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>

        //ES6
        //`可以使用这个字符串定义`   可以直接换行

        //1.创建组件构建对象
        const  cpnC = Vue.extend({
            template:`
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容,哈哈哈哈哈哈</p>
                    <p>我是内容,哈哈哈哈哈</p>
                </div>`
        })
        //2.注册组件
        Vue.component(`cpn`,cpnC)
        const app  = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })

父子组件代码：

<div id='app'>
        <cpn2></cpn2>
        <cpn></cpn>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        //1.创建第一个组件构造器(子组件)
        const cpnC = Vue.extend({
            template:`
            <div>
                <h2>我是标题</h2>
                <p>这是第一个组件的内容</p>
            </div>
            `
        })

        //2.创建第二个组件构造器(父组件)
        const cpnC2 = Vue.extend({
            template:`
            <div>
                <h2>我是标题</h2>
                <p>这是第二个组件的内容</p>
                <cpn></cpn>
            </div>
            `
        })
        //2.注册组件
        Vue.component(`cpn`,cpnC)

        //root组件   是最基本的组件
        const app  = new Vue({
            el: '#app',
            data: {
                message:"你好呀"
            },
            components:{
                cpn1:cpnC,
                cpn2:cpnC2
            },

        })

Vue语法糖学习

 //2.注册全局文件的语法糖
       Vue.component('cpn1',{
           template:`
           <div>
            <h2>我是标题</h2>
            <p>我是内容叽叽叽叽叽</p>
           </div>
           `
       })

组件模板的分离写法
1.使用