App.vue 818 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <div id="app">
  3. <h1>{{ msg }}</h1>
  4. <h3>{{ url }}</h3>
  5. <h2>Essential Links</h2>
  6. <div class="main">
  7. <h1>测试</h1>
  8. <h2>测试水水水水</h2>
  9. </div>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. name: 'app',
  15. data () {
  16. return {
  17. url:"img",
  18. msg: 'Welcome to Your Vue.js App'
  19. }
  20. }
  21. }
  22. </script>
  23. <style lang="scss">
  24. #app {
  25. font-family: 'Avenir', Helvetica, Arial, sans-serif;
  26. -webkit-font-smoothing: antialiased;
  27. -moz-osx-font-smoothing: grayscale;
  28. text-align: center;
  29. color: #2c3e50;
  30. margin-top: 60px;
  31. .main{
  32. font-feature-settings: inherit;
  33. font-size: large;
  34. }
  35. }
  36. h1, h2 {
  37. font-weight: normal;
  38. }
  39. ul {
  40. list-style-type: none;
  41. padding: 0;
  42. }
  43. li {
  44. display: inline-block;
  45. margin: 0 10px;
  46. }
  47. a {
  48. color: #42b983;
  49. }
  50. </style>