Edge浏览器 - Vue.js devtools
#########index.html## <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <!-- ES模块脚本：支持import/export，模块作用域 --> <script type="module" src="/src/main.ts"></script> </body> </html>#########main.ts######## import {createApp} from 'vue' import App from './App.vue' createApp(App).mount("#app")###########App.vue######### <template> <div class="app"> <h1>123213</h1> <!--这是Person的组件--> <person/> </div> </template> <script lang="ts"> import Person from "./components/Person.vue" //导出组件名称，叫做"App" export default { name :"App", //这是Person组件的注册 components:{Person} } </script> <style> .app { background-color: blue; } </style>#############Person.vue <template> <div class="person"> <h1>姓名:{{ this.name }}</h1> <h1>年龄:{{ age }}</h1> <!--点击事件用@click --> <button @click="showTel">查看联系方式</button> </div> </template> <script lang="ts"> //导出组件名称，叫做"App" export default { //名称 name: "Person", //组件数据仓库 data() { return { name: "张三", age: 18, tel: "138888888" } }, //方法 methods: { showTel() { alert(this.tel) } } } </script> <style> .person { background-color : aqua; } </style>
