Vue+CSS3制作双螺旋DNA动画：代码详解和基础知识复习
1 效果：
2 知识点：
=======
2.1 html的基础知识。
2.2 css3的基础知识。
2.3 vue的基础知识。
2.4 代码讲解非常清楚，小白看了都会。
3 html骨架：
========
3.1 代码：
Vue-CSS3-DNA
3.2 ：
HTML5 中仅仅规定这一种声明。没有结束标签，声明不区分大小写。
总是给您的 HTML 文档添加 声明，确保浏览器能够预先知道文档类型。
3.3 ：
charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。
常见的字符编码有：gb2312、gbk、unicode、utf-8。
4 设置body的div部分：
================
4.1 这部分：
4.2 代码：
4.3 div-id-class：
4.3.1
4.3.2
（1）class 用于元素组，而 id 用于标识单独的唯一的元素。
（2）在css中：id的内容前加#；class前加.。在vue的js中，id为app，则实例化el对象也是：'#app'。
4.4 vue的指令：v-for和v-bind（注意：vue的2.x版本）
4.4.1 v-for
格式：
v-for="(item,index) in items"{{i}},{{item}}
#本代码中，
v-for="(dna,i) in sequence"
#dna是item，是项目，i是index，是索引值4.4.2 v-bind
v-bind 主要用于属性绑定。
v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法。
驼峰命名法否则报错activeColor为驼峰命名法；active-color短线法可能报错。
font-size在css中可以，在v-bind:style中必须改为驼峰命名法，即fontSize。
5 head的css部分代码：
6 body的vue的js代码部分：
vue的mounted:html加载完成后执行。执行顺序：子组件-父组件。
mounted钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模板渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
7 完整代码：
Vue-CSS3-DNA
超级详细
===自己整理并分享出来===
喜欢的人，请点赞、关注、评论、转发和收藏。
