静态HTML引入vue封装组件
在静态HTML中引入Vue组件，你需要先引入Vue库，然后创建一个Vue实例并注册你的组件。以下是一个简单的例子：
- 确保你的HTML页面中包含了Vue.js的引用。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>- 创建你的Vue组件。
<div id="app">
<my-component></my-component>
</div>
<script>
// 定义组件
var MyComponent = {
template: '<div>A custom component!</div>'
}
// 创建Vue实例并挂载组件
new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
})
</script>在这个例子中，我们定义了一个简单的Vue组件MyComponent，然后在Vue实例中注册了这个组件，并将其用在了ID为app的元素内部。当Vue实例挂载到#app时，<my-component></my-component>标签会被替换为<div>A custom component!</div>。
评论已关闭