开始新的技能vuejs

写了个小demo

<template>
  <div  class="hello">
    <h1 @click="doSomething">{{ msg }}</h1>

     <h1 @click="doSomething">{{reversedMessage}}</h1>

      <h1>{{site}}</h1>





  <ul>
    <li v-for="n in 10">
     {{n}}
    </li>
  </ul>



  </div>
<!-- <div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div> -->
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'welcome',
      object:{
         name: 'Runoob' ,
         url: 'Google' ,
         slogan: 'Taobao' 
      }
    }
  },
  methods:{
    doSomething: function(){
      this.msg = 'welcome BeiJing'
    }
  },
  computed:{
    reversedMessage:function(){
        return this.msg.split('').reverse().join('');
    },
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }



};



// // 调用 setter， vm.name 和 vm.url 也会被对应更新
// vm.site = '菜鸟教程 https://www.runoob.com';
// document.write('name: ' + vm.name);
// document.write('<br>');
// document.write('url: ' + vm.url);



</script>