自己乱写的
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">
< v-for: in fruits />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
fruits: {
name: '苹果',
}
},
beforeCreate(){
console.group('beforeCreate 创建前状态');
console.log("%c%s", "color:red", "el : "+this.$el);
console.log("%c%s", "color:red", "data : "+this.$data);
console.log("%c%s", "color:red", "url: "+this.url);
},
created(){
console.group('created 创建完毕状态');
console.log("%c%s", "color:red", "el : "+this.$el);
console.log("%c%s", "color:red", "data : "+this.$data);
console.log("%c%s", "color:red", "url: "+this.url);
}
})
</script>
</body>
</head>
</html>
更正后，结果为
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">
<ol>
<li v-for='value in arr'>
{{value}}
</li>
</ol>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ['苹果','梨子','橘子','芒果'],
json:{a:'丽丽',b:'小明',c:'小红',}
},
beforeCreate(){
console.group('beforeCreate 创建前状态');
console.log("%c%s", "color:red", "el : "+this.$el);
console.log("%c%s", "color:red", "data : "+this.$data);
console.log("%c%s", "color:red", "arr: "+this.arr);
},
created(){
console.group('created 创建完毕状态');
console.log("%c%s", "color:red", "el : "+this.$el);
console.log("%c%s", "color:red", "data : "+this.$data);
console.log("%c%s", "color:red", "arr: "+this.arr);
}
})
</script>
</body>
</head>
</html>
