image.png

    1. <template>
    2.          <div>
    4.              <h1>{{msg}}</h1>
    5.              <h2>名字{{name}}</h2>
    6.              <h2>性别{{sex}}</h2>
    7.              <h2>年冷{{myage}}</h2>
    9.              <button @click="change">修改</button>
    11.              </div> 
    16. </template>
    18. <script>
    19. export default {
    20.     name:'Student',
    21.       data(){
    22.           console.log(this)
    23.           return{
    24.              msg:'我是一个学生',
    25.              myage:this.age
    26.           }
    27.       },
    28.       methods:{
    29.           change(){
    30.              this.myage++
    31.           }
    32.       },
    33.       props:{
    34.            name:{
    35.                type:String,
    36.                required:true
    38.            },
    39.            age:{
    40.                type:Number
    41.             //    require:true,
    42.             // default:99
    43.            },
    44.            sex:{
    45.                 type:String,
    46.                 required:true
    47.            }
    49.       }
    51. }
    52. </script>
    54. <style>
    56. </style>
    1. <template>
    2.   <div id="app">
    3.     <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    4.     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    5.     <h2 v-text="mas" ref="title"></h2>
    6.     <button ref="btn" @click="clickof">点我输出dom</button>
    7.     <school></school>
    8.     <student name="李四" :age="12" sex="nv"></student>
    9.   </div>
    10. </template>
    12. <script>
    13. // import HelloWorld from './components/HelloWorld.vue'
    14. import School from './components/School.vue'
    15. import Student from './components/Student.vue'
    17. export default {
    18.   name: 'App',
    19.   data(){
    20.     return {
    21.       mas:"aaaa"
    22.     }
    23.   },
    24.   components: {
    25.     // HelloWorld
    26.     School,
    27.     Student
    28.   },
    29.   methods:{
    30.     clickof(){
    31.       console.log(this.$refs)
    32.     }
    33.   }
    34. }
    35. </script>
    37. <style>
    38. #app {
    39.   font-family: Avenir, Helvetica, Arial, sans-serif;
    40.   -webkit-font-smoothing: antialiased;
    41.   -moz-osx-font-smoothing: grayscale;
    42.   text-align: center;
    43.   color: #2c3e50;
    44.   margin-top: 60px;
    45. }
    46. </style>