标签：vue 新建 App 程序 color Test import SayHi

1：在main.js里面添加自定义的Test.vue页面,Test.vue建在components下面

import { createApp } from 'vue' //import App from './App.vue' import App from './components/Test' createApp(App).mount('#app1')    2：Test.vue的内容 <template>   <div id="sty1">     我来自Test.vue     <say-hi/>   </div> </template> <script> import SayHi from './SayHi.vue';   export default{     name: "TestNamesys",     components: {           SayHi     }   } </script> <style>   #sty1{     width: 200px;     height: 200px;     background-color: pink;   } </style>   3：SayHi.vue页面内容 <template>     <div class="sty2">         我来自SayHi.vue         <p>{{ message }}</p>         <button @click="show_my_value()">点击弹框</button>     </div> </template> <script> export default {     data() {         return {             message: 'Hello~俺是SayHi',             my_value : '弹出框内容'         }     },     methods: {         show_my_value: function(){             alert('yes  ' + this.my_value);         }     } } </script> <style>     .sty2{         width: 150px;         height: 100px;         background-color: rgb(177, 120, 231);         color: white;     } </style>

标签：vue,新建,App,程序,color,Test,import,SayHi
来源： https://www.cnblogs.com/yingxianqi/p/15950916.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。