vue3官方文档实例(2): 多个应用实例

最新推荐文章于 2023-05-11 13:41:56 发布

amadeus_liu2

最新推荐文章于 2023-05-11 13:41:56 发布

阅读量450

点赞数

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/130037759

版权

vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div>hi world</div>
    <div id="app"></div>
    <div id="app2"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

二、views\DemoView2.vue

<script>
export default {
    name: 'MyDemoView',
  data() {
    return {
      count: 100
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

三、main.js

import { createApp } from 'vue'
import DemoView2 from './views/DemoView2'
//import DemoView3 from './views/DemoView3'



 createApp(DemoView2).mount('#app')
 createApp(DemoView2).mount('#app2')