日记：不使用vue脚手架创建组件_vue3不使用脚手架，如何创建组件-优快云博客

本文链接：https://blog.youkuaiyun.com/Impermanent/article/details/121142925

本文通过一个简单的示例介绍了Vue.js的基本用法，包括组件声明、数据绑定及模板使用等核心概念，并提供了完整的HTML代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

丢个代码块自己体会一下：

注意事项，组件声明要在绑定dom节点之前。
v-cloak是为了防止还没有读取到数据之前显示{{xxx}}，网上有文章。
万事开头难，引你们入门接下来继续去看官网文档吧！相信你会有更深的体会。
vue.js下载
 官网文档

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css放在head结束标签前 -->
    <link rel="stylesheet" href="style/index.css">
</head>
<body>
    <div class="is-chamberOfCommerceContent">
        <div class="headerWrapper" id="test1" v-cloak>
            {{testData}}
            <testdata></testdata>
        </div>
        <div class="main-cnt"></div>
    </div>
    <template id="test111">
        <div>
            我是测试数据111
        </div>
    </template>
    <script src="./javascript/vue.js"></script>
    <script>
        Vue.component('testdata', {
            template: '#test111'
        })
        var app = new Vue({
            el: '#test1',
            data: {
                testData: '我是测试数据'
            }
        })
    </script>
</body>
</html>