vue 生命周期(一)

版权声明:独学而无友,则孤陋寡闻。q群582951247 https://blog.csdn.net/mp624183768/article/details/87911795

下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。

Vue å®ä¾çå½å¨æ

测试代码

h5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="test">
  {{content}}
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

</body>
</html>

js

var vue=new Vue({
  el:'.test',
  data:{
    a:'A内容',
    content:null
  },
  beforeCreate:function(){
    console.log(this.a);
    console.log('属性未载入前');
  },
  created:function(){
  console.log(this.a);
    console.log("资料data已可取得,但el属性还未被建立");
},
  beforeMount:function(){
    console.log("还没抓到el资料");
  },
  mounted:function(){
    console.log("已经挂载上dom 并取得dom资料");
  },
  
  methods:{
    greet:function(){
      console.log("123");
    }
  }
});

猜你喜欢

转载自blog.csdn.net/mp624183768/article/details/87911795
今日推荐