vue方法绑定

方法绑定

<div id="app">
  <input type="button" v-on:click="fun1" />

  <p>{{reverseMessage}}</p>

  <h1>{{message | format("元")}}</h1> //过滤器调用,可加括号传入参数

</div>
<javascript>
  new Vue({
    el:"#app",
    data:{
      message:"hello",
      a:1,
      b:2
    },
    methods:{   //定义方法对象  
      fun1:function(){
        this.a++
      }

    },

   filters:{ //过滤器

format:function(value,type){

   return value+"world"+type;   //type为传入的‘元’

   }

   },

    mouted:{ //文档加载完成立即调用相当于window.onload

     alert("a");

    }

    watch:{     //监听变化
      'a':function(){
        alert(this.a);
      }
    },
    computed:{    //computed效果与methods一样，但基于依赖缓存(                                                   message变化时才重新加载),而methods页面重新渲染时就会重新调用，computed效率更高
      reverseMessage:function(){
        return this.message.spilt("").reverse().join("");
      }
    }
  })
</javascript>