Vue.js和javascript不起作用

我对javascript和vue.js有一个问题，它应该很简单，但事实并非如此，我不明白为什么我不能用javascript设置元素的高度。在尝试更改高度-未捕获的TypeError后，出现了一个错误：无法读取null的属性“style”

<template>
<div class="Icontent" id="Icontent" v-bind:mode="this.mode">Content {{this.mode}} </div>
</template>

<script>
    export default {
      name: "Icontent",
      props:['mode'],
      created:function(){
          created(this);
      },
      data:function(){
        return{
           mode:this.mode
        }
      }
    }

    function created(component){
        //document.getElementsByClassName('Icontent').style.height = 100;
        //document.getElementById('Icontent').setAttribute("style","height:" + 100);

    }
</script>

<style scoped>
.Icontent{
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 2px #09f;
}

.Icontent[mode="mobile"]{
  top: 0;
}
</style>

不要将创建的函数命名为与vuejs生命周期函数相同的函数。 无需在导出之外声明，请将其放置在方法中，如下所示：

方法：{ init：函数{ //代码在这里 } }

document.getElementsByClassName不返回节点的实例，因此不能以这种方式设置样式。您必须首先循环所有元素。 您可以将样式定义为数据函数中的对象，并使用：style=someStyleObject将其绑定到元素 如果数据也是属性，则不能在其中定义模式。 检查你的控制台，你会有错误。

---

使用mounted而不是created，并且通常不在JavaScript中选择元素。您应该更改状态数据，然后直接在模板中使用状态。在样式设置的情况下，您可以添加一个具有以下属性的类：class=。然后，用不同的类为元素设置样式。您可以在文档中找到Vue的详细生命周期图。模板创建后尚未呈现，但仅在装载后呈现：感谢replay 1。我不确定什么是生命周期2。明白了3。这是我的问题，为什么它不起作用？我不想做循环，我想改变高度。4.明白了5.明白了6.我的控制台一直是红色的：@VadimKorolov有一个。3.因为选择器是错误的，并且您还有其他错误，这些错误首先会阻止代码执行。你可以使用document.getElementById，一旦你解决了其他问题，它就会工作。我想我明白了什么是生命周期，我必须使用挂载函数来获取DOM元素，谢谢！