vue基础methods、computed、created、mounted简析

1.methods ：定义方法，methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

<div id="app">
    <h3>{{msg}}</h3>
    <h4>{{price}}</h4>
    <!--在app作用域内部调用methods内部函数-->
    <input type="button" value="add" @click="add">
    <input type="button" value="ad" @click="ad(5,$event)">
</div>
<!--在app作用域外部调用methods函数，见文档6-->
<button "vm.ad(5, this)">外部调用vue里的方法</button>
<div id="box"></div>
<script type="text/javascript">
    //要给对象赋值
   let vm = new Vue({
       el:'#app',
       data:{
           price:199,
           msg:'methods',
       },
       methods:{
           add(){
                // console.log(this);//是对象
                this.price++
           },
           //注意传参，price+=5 ,$event获取mouseEvent(){}事件；
           ad(n,e){
               this.price += n;
               console.log(e)
           }
       }
   });

</script>

2.computed ：computed主要作用是对原始数据，进行二次处理，例如：类型转换，排序，拼接；

   new Vue({
       el:'#app',
       data:{
           price:199,
           msg:'computed主要作用是对原始数据，进行而此次处理，例如：类型转换，排序，拼接',
           list:[
               {
                   title:'中国在世贸组织起诉美国征收措施',
                   date:'2019-01-14'
               },
               {
                   title:'人民日报评论员:勇于直面问题 不断自我革命',
                   date:'2019-01-13'
               },
               {
                   title:'取得全面从严治党更大战略性成果',
                   date:'2019-01-12'
               }
           ]
       },
       computed:{
           newList(){
               return this.list = this.list.reverse();
           },
           newPrice(){
               return ('¥'+ this.price +'元')
           }
       }
   });

3.created ：生命周期钩子函数，实例创建完成后执行的代码。

4.mounted：生命周期钩子函，DOM加载完成后调该钩子函数，ajax请求在此阶段调用，该钩子在服务器端渲染期间不被调用。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

vue声明周期图解
注：个人理解，若有错误，欢迎纠错！
图片引用：https://segmentfault.com/a/1190000008570622

–END–
Author : Jayden

vue基础methods、computed、created、mounted简析

猜你喜欢