单文件vue.js组件化

<body style="background-color: #E7F1FF;height:100vh;">

    <div id="loginhtmlshow"></div>
    <div id="loginhtml" class="height100 lglr flexbox">
        <userdifine />
    </div>
    <script type="text/javascript">
        //创建组件构造器
        const compomentConstruct = Vue.extend({
            template: `
        <div>
            <h1>Test</h1>
        </div>
        `
        });
        //注册组件
        Vue.component('userdifine', compomentConstruct);
        var vue = new Vue({
            el: '#loginhtml',
            data: {
                great: {
                    name: 'wanglu',
                    age: 12
                }
            },
            methods: {
                alet() {
                    this.great = {
                        name: 'liuyu',
                        age: 13
                    };
                },
                alertb(name) {
                    alert(name);
                }
            }
        })
    </script>
</body>

猜你喜欢

转载自blog.csdn.net/shidouyu/article/details/123559028