关于vue.js:vue-杂记①

即通常初始化某些属性值，而后再渲染成视图

在模板渲染成 html 后调用，通常是初始化页面实现后，再对 html 的 dom 节点进行一些操作。

<body>
    <div id="example1">
        <demo1></demo1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        Vue.component("demo1",{data:function(){
                return {
                    name:"", 
                    age:"", 
                    city:""
                }
            },

            template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",

            created:function(){ 
                this.name="Eric"
                this.age = "20"
                this.city ="广州"
                var x = document.getElementById("name") // ①第一个命令台谬误
                console.log(x.innerHTML); 
              },

              mounted:function(){var x = document.getElementById("name") // ②第二个命令台正确
                  console.log(x.innerHTML);
             } 
         }); 
        var vm = new Vue({el:"#example1",})
    </script>
</body>

① 在 created 的时候，视图中的 html 还没有被渲染进去，所以此时如果间接去操作 html 的 dom 节点，肯定找不到相干的元素。

② 而在 mounted 中，因为此时 html 曾经渲染进去了，所以能够间接操作 dom 节点，故输入了后果。