如何使用Vue.js中的自定义组件并在DOM进行显示

2024-11-07 00:43:16

1、第一步，双击打开HBuilderX设计工具，新建一个HTML5页面并引入vue.js文件，如下图所示：

2、第二步，在<body></body>标签内，插入一个div标签和自定义组件，如下图所示：

3、第三步，接着在div标签下方，添加一个script标签，调用Vue.component()方法，如下图所示：

4、第四步，再进行vue对象实例化，使用new Vue()，设置属性el，如下图所示：

5、第五步，保存代码并打开浏览器查看效果，可以查看到产生一个无序列表，如下图所示：

6、第六步，使用F12快捷键或打开开发工具，查看生成的代码模块，如下图所示：