body部分：

<div id="app">
   {{message}}
   <p ref='hello'>你好</p>
</div>

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 虽然{{}}可以解析数据，但是{{}}中不能写复杂的逻辑属性，所有复杂的业务逻辑都要使用计算属性，使用计算属性便于后期维护

<div id='itany'>
<!--   <p>{{msg.split(' ').reverse().join('===')}}</p>   -->
 <h1>{{msg}}</h1>
 <a href="#">{{revMsg}}</a>
</div>

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

案例：
效果：点击加货总价会变化

[图片上传失败...(image-160d5c-1537181644315)]

body部分：

<div id="app">
   <button v-on:click='jh'>加货</button>
   <h1>总价为:{{tota}}</h1>
</div>

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后的pack1的结果变为54=20，未+1时53=15，所以结果每次都加5