问题记录：vue的dom操作

结论：

有点二，一定要记住mvvm框架，是基于数据驱动，基于数据驱动，基于数据驱动！！！操作dom是很蠢的行为，不到不得已最好别操作dom.document.getElementBy..这种都最好使用this.$refs.去取。结论重申明：不要操作dom

事情经过：

我最近做用vue做了一个简历，大概7个页，可以翻的那种，然后我想在首页展现我之前写的一个demo,星星海。如下图

这是我用原生写的 ，具体就是用：创建一个span，random它在窗口中的位置，再添加给body,如此重复150次。

for(var i = 0;i<150;i++){
            //2.1创建星星
            var span = document.createElement('span');

            document.body.appendChild(span);
            //2.2随机的坐标
            var x = Math.random() * (screenW);
            var y = Math.random() * (screenH-80);
            span.style.left = x +'px';
            span.style.top = y +'px';
            //2.3随机缩放
            var scale = Math.random() *1.4;
            span.style.transform = 'scale('+scale+')';
            //2.4控制频率
            var rate = Math.random() *1.5;
            span.style.animationDelay = rate +'s';
        }

用原生的方法写在VUE里发现了，这样操作的增加的span,和用vue渲染的span不是一回事，所以我觉得，应该是要传入组件，不停的传入组件，然后改 left,top之类的

然后花了一天在vue上面实现 ，又是引入组件，又是动态创建组件，要不实现不了，要不就特别傻，引入一个组件，自己写150次，位置还要一个个改，翻了很多博格，下面稍选几个列一下：

动态异步组件，Vue动态异步组件实现思路及其问题，vue异步组件(高级异步组件)使用场景及实践。

最后醒悟，搜了一下vue操作dom，简直觉得自己是弱智，vue是mvvm框架，我一直都知道但是基本没意识到这个的含义，基于数据，数据驱动。我一直想用vue创建dom 元素，基本上是与mvvm这类框架的思想违背的。所以这个页面被我弃了。

一天浪费。。。。。。