vue实例,钩子函数，计算属性

创建一个实例

let vm = new Vue({
    
})

复制代码

vm是一个自己定义的一个变量。

数据与方法

当这些数据改变时，视图会进行重渲染。

<script>
  //  数据对象
  let data = {a:1};
  // 创建一个实例,将数据加入到实例中
  let vm = new Vue({
    el:'.app',
    data:data
  });
  // 获得这个实例上的属性
  // 返回源数据中对应的字段
  vm.a == data.a;
  console.log(vm.a);  // => 1
  // 设置属性也会影响到原始数据
  vm.a = 2;
  console.log(vm.a);  //  =>2
  data.a = 3;
  console.log(vm.a)   // =>  3
</script>

复制代码

实例生命周期钩子

created:function(){

}

 //  数据对象
  let data = {a:1};
  // 创建一个实例,将数据加入到实例中
  let vm = new Vue({
    el:'.app',
    data:data,
    created:function () {  //  钩子函数
      console.log('a is: ' + this.a)  //  this 指向实例
    }
  });

复制代码

生命周期图示

计算属性

computed:{ // 计算属性 fanzhuo(){ return this.message.split('').reverse().join(''); } }

<div class="app">
  <p>{{message}}</p>
  <p>{{fanzhuo}}</p>
</div>
<script>
  let vm = new Vue({
    el:'.app',
    data:{
      message:'hello,vue',
    },
    computed:{  //  计算属性
        fanzhuo(){
          return this.message.split('').reverse().join('');
        }
    }
  })
</script>

复制代码

转载于:https://juejin.im/post/5adee392518825670960d837