image

局部CODE：

<body>
        <div id="root">
            <!-- body页面直接引用局部注册的中的模板即可使用 -->
            <grzl></grzl>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip=false
        // 创建组件 组件不要写el绑定。因为他不是服务于一个地方的。
        const grzl=Vue.extend({
            template:`
            <div>
            <h1>我的名字:{{namer}}</h1>
            <h1>我的地址:{{address}}</h1>
            </div>
            `,
            data(){
                return{ //这里return作为模板的插值变量用。
                    namer:'付强',
                    address:'德州'
                }
            }
        })
        //创建vm
        var vm=new Vue({
            el:'#root',
            // 局部注册组件
            components:{
                grzl //这里注册的是vue.extend中内模板的内容，通过
                //完整写法是 调用组件的名字:组件的名字  grzl:grzl
            }
        })
    </script>

image

全局CODE

    <body>
        <div id="root">
            <Fiphone></Fiphone>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip=false
        const iphone_num=Vue.extend({
            template:`
                <div>
                    <p>我的手机号码:{{num}}</p>
                </div>
            `,
            data: () => {
                return{
                    num:'17860296887'
                }
            }
        })
        // 全局注册 第一个是全局注册后用的时候要起的名字 第二个是组件名字 注意:第二个是这里用的是变量不要傻傻的加引号 如果记不住你就直接吧Vue.extend({})放在第二选项中,只要你看的不眼花的话.哈哈哈
        Vue.component('Fiphone',iphone_num)
        
        
        //创建实例
        new Vue({
            el: '#root',
        })
    </script>

image

image

组件嵌套CODE

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
        <!-- 实践做一个嵌套
        
        School{
            Class{
                Students{
                    Stname
                    Age
                }
            }
        } 
        
        -->
        <div id="root">
            
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip=false
        // 定义组件 嵌套模板顺序由里到外 最大的写再最后
        const Age=Vue.extend({
            name:'Age',
            template:`
                <div>
                    <p>我的年龄是:{{age}}</p>
                </div>    
            `,
            data() {
                return{
                    age:'15'
                }
            }
            
        })
        const Stname=Vue.extend({
            name:'Stname',
            template:`
                <div>
                    <p>我的名字是:{{name}}</p>
                </div>    
            `,
            data() {
                return{
                    name:'付强'
                }
            }
        })
        const Students=Vue.extend({
            name:'Students',
            template:`
                <div>
                    <h3>这里是{{bj}}班学生信息</h3>
                    <Stname></Stname>
                    <Age></Age>
                </div>
            `,
            data() {
                return{
                    bj:6
                }
            },
            components:{Stname,Age}
            
            
        })
        const Classes=Vue.extend({
            name:'Classes',
            template:`
            <div>
                <h3>这里是{{bj}}班信息</h3>
                <Students></Students>
            </div>
            `,
            data() {
                return{
                    bj:6
                }
            },
            components:{Students}
            
        })
        
        const School=Vue.extend({
            name:'School',//这里的name是component第一个参数 在组件定义name后就默认优先使用这个name，没有再去看component的第一个参数。
            template:`
                <div>
                    <h1>我的学校</h1>
                    <Classes></Classes>
                </div>    
            `,
            components:{Classes}
        })
        
        new Vue({
            el:'#root',
            template:`<School></School>`,
            components:{School}
        })
    </script>
</html>

image

千万不要拿html现有的标签来当模板名称我就用class来犯了一个错误。

单文件组件

School.Vue

<template>
    <!-- 组件的结构 -->
    <div id="Demo">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
        <button @click="showName()" type="button">点我提示学校名称</button>
    </div>
</template>

<script>
    // 组件交互相关的数据代码(数据、方法等等)
    export default {
        name:'School',
        data(){
            return{
                name:'华宇',
                address:'德州'
            }
        },
        methods:{
            showName(){
                alert(this.name)
            }
        }
    }
</script>

<style>
    /* 组件的样式 */
    #Demo{
        background: orange;
    }
</style>

Student.Vue

<template>
    <div>
        <h2>学生姓名:{{}}</h2>
        <h2>学生年龄:{{}}</h2>
    </div>
</template>

<script>
    export default{
        name:'Student',
        data(){
            return {
                name:'付强',
                age:20
            }
        }
    }
</script>

<style>
</style>

APP.Vue

<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    import School from 'School.vue'
    import Students from 'Student.vue'
    export default{
        name:'App',
        components:{
            School,
            Students
        }
    }
</script>

<style>
</style>

main.js

import App from './App.vue'
new Vue({
    template:`<APP></APP>`,
    el:'#root',
    comments:{
        App
    }
})

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>单文件基础练习</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="../vue.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>