bodyセクション:

   {{message}}
   
  

jsセクション:

var vm=new Vue({
    el:'#app',
    data:{
        message:'hello world'
    },
    uname:'jack',
    age:18
})

//el) vm.Data)/options Vueインスタンスのカスタム属性consoleを取得する.log(vm.options.age)/refsはref属性を持つすべての要素consoleを取得する.log(vm.refs.hello)
計算属性:ケース:hello VueがVue==helloになるデータを解析できるが、{{}}には複雑な論理属性を書くことができず、すべての複雑なビジネスロジックは計算属性を使用し、計算属性を使用して後期メンテナンスを容易にする

 
{{msg}}
 {{revMsg}}


new Vue({
  el:'#itany',
 data:{
   msg:'hello vue'
 },
 computed:{
   revMsg:function(){
      return this.msg.split(' ').reverse().join('===')
   }
  }
  })    

ケース:効果:プラスクリックすると総額が変わる
[画像のアップロードに失敗しました...(image-160 d 5 c-1537181644315)]
bodyセクション:

     
   
   :{{tota}}

jsセクション:

new Vue({
    el:'#app',
    data:{
        pack1:{count:5,price:3},
        pack2:{count:8,price:4}
    },
    computed:{
        tota:function(){
            return this.pack1.count*this.pack1.price+this.pack2.count*this.pack2.price
        }
    },
    methods:{
        jh:function(){
            this.pack1.price++
        }
    }
})

ある人はなぜpriceが1をプラスして最後に結果が5をプラスすると言って、price+1後のpack 1の結果が54=20になるため、+1しない時53=15、だから結果は毎回すべて5をプラスします