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

是一個塊級元素，可定義文檔中的節或者分區(division/section)，換行是 固有的唯一格式表現。

4.3.2

元素應用 class 或 id 屬性：簡單的架構上來說基本沒區別，但是有下面注意事項：

(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

超級詳細

===自己整理并分享出來===

喜歡的人，請點贊、關注、評論、轉發和收藏。

總結

以上是生活随笔為你收集整理的aspx网页背景图片设置代码_Vue+CSS3制作双螺旋DNA动画：代码详解和基础知识复习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。