静态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>。

静态HTML引入vue封装组件

评论已关闭

推荐阅读