1.全局组件的小例子

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <itembox></itembox>

    </div>
    <script src="./js/vue.js"></script>
    <script>

        Vue.component("itembox",{
            template:`
                <div>
                    <h1>Vue学习</h1>
                    <p>Web前端开发</p>
                </div>
            `
        });

        var vm=new Vue({
           el:'#app',
           data: {

           },
           methods: {

           }
        });
    </script>
</body>

</html>

1.2 显示效果

1.3 在线演示

点击下面链接,即可查看在线演示代码

http://www.68yun.top/demo/vue/2.4.html

最后修改:2021 年 02 月 22 日 01 : 19 PM