1 效果：

2 知識(shí)點(diǎn)：

=======

2.1 html的基礎(chǔ)知識(shí)。

2.2 css3的基礎(chǔ)知識(shí)。

2.3 vue的基礎(chǔ)知識(shí)。

2.4 代碼講解非常清楚，小白看了都會(huì)。

3 html骨架：

========

3.1 代碼：

Vue-CSS3-DNA

3.2 ：

HTML5 中僅僅規(guī)定這一種聲明。沒有結(jié)束標(biāo)簽，聲明不區(qū)分大小寫。

總是給您的 HTML 文檔添加 聲明，確保瀏覽器能夠預(yù)先知道文檔類型。

3.3 ：

charset=”utf-8”是告知瀏覽器此頁(yè)面屬于什么字符編碼格式，下一步瀏覽器做好“翻譯”工作。

常見的字符編碼有：gb2312、gbk、unicode、utf-8。

4 設(shè)置body的div部分：

================

4.1 這部分：

4.2 代碼：

4.3 div-id-class：

4.3.1

是一個(gè)塊級(jí)元素，可定義文檔中的節(jié)或者分區(qū)(division/section)，換行是 固有的唯一格式表現(xiàn)。

4.3.2

元素應(yīng)用 class 或 id 屬性：簡(jiǎn)單的架構(gòu)上來說基本沒區(qū)別，但是有下面注意事項(xiàng)：

(1)class 用于元素組，而 id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。

(2)在css中：id的內(nèi)容前加#；class前加.。在vue的js中，id為app，則實(shí)例化el對(duì)象也是：'#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，是項(xiàng)目，i是index，是索引值

4.4.2 v-bind

v-bind 主要用于屬性綁定。

v-bind:style 的對(duì)象語(yǔ)法十分直觀--非常像CSS，其實(shí)它是一個(gè)Javascript對(duì)象，CSS屬性名必須用駝峰命名法。

駝峰命名法否則報(bào)錯(cuò)

activeColor為駝峰命名法；active-color短線法可能報(bào)錯(cuò)。

font-size在css中可以，在v-bind:style中必須改為駝峰命名法，即fontSize。

5 head的css部分代碼：

6 body的vue的js代碼部分：

vue的mounted:html加載完成后執(zhí)行。執(zhí)行順序：子組件-父組件。

mounted鉤子函數(shù)一般用來向后端發(fā)起請(qǐng)求，拿到數(shù)據(jù)后做一些業(yè)務(wù)處理。該函數(shù)在模板渲染完成后才被調(diào)用。DOM操作一般是在mounted鉤子函數(shù)中進(jìn)行。

mounted:在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

7 完整代碼：

Vue-CSS3-DNA

超級(jí)詳細(xì)

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

喜歡的人，請(qǐng)點(diǎn)贊、關(guān)注、評(píng)論、轉(zhuǎn)發(fā)和收藏。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。