index.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>index</title>
  7. </head>
  8. <body>
  9. <!-- <h3>this is node -> Vue test</h3> -->
  10. <div id='app' style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
  11. <template id="my-app">
  12. <!--<div v-html='info'></div>
  13. <Home @op="add">home vue</Home>
  14. <h5 style="color:oranged">{{number}}</h5>
  15. <About>this is About</About>
  16. <test></test>-->
  17. <!--避免使用单标签,组件按照双标签规范用; js代码相对位置导入后可以直接使用 -->
  18. <p>before i18n label</p>
  19. <div v-t="'messages.username'"></div>
  20. {{$t('messages.login')}}
  21. <p>after i18n label</p>
  22. <button @click="changelang('zh')">中文</button>
  23. <button @click="changelang('en')">english</button>
  24. <!--<input type="button" text="中文" @click="changelang('zh')"/>
  25. <input type="button" text="english" @click="changelang('en')"/>-->
  26. <p>
  27. <router-link to="/home">首页</router-link>
  28. <router-link to="/test">test</router-link>
  29. <router-link to="/about">关于</router-link>
  30. </p>
  31. <router-view></router-view>
  32. </template>
  33. <template style="width:100%; backgroud-color:oranged;">
  34. <Home @op="add">home vue</Home>
  35. <h2>{{number}}</h2>
  36. </template>
  37. </body>
  38. </html>