1 說明：
1.1 有點長，通過實例分析vue的基礎知識。
1.2 適合小白，通俗易懂，大神可以飄過。
1.3 適合收藏，慢慢細品，一秒入門。
1.4 適合：谷歌瀏覽器，微軟vscode編輯器，linux操作系統。
2 數字版
2.1 效果圖
2.2 完整含註釋的代碼：1.html
<code>
<title>vue版文字羅盤時鐘/<title>
\t
\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v) in 60"
\t\t\tv-bind:class="{xx:60-v==s}"
\t\t\tv-bind:style="{transform:'translate('+xc(sr,v+s,60)+'px,'+yc(sr,v+s,60)+'px) rotate('+dg(v+s,60)+'deg)'}">{{zh(60-v,1)}}秒
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 60"
\t\t\tv-bind:class="{xx:60-v==i}"
\t\t\tv-bind:style="{transform:'translate('+xc(ir,v+i,60)+'px,'+yc(ir,v+i,60)+'px) rotate('+dg(v+i,60)+'deg)'}">{{zh(60-v,1)}}分
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 24"
\t\t\tv-bind:class="{xx:24-v==h}"
\t\t\tv-bind:style="{transform:'translate('+xc(hr,v+h,24)+'px,'+yc(hr,v+h,24)+'px) rotate('+dg(v+h,24)+'deg)'}">{{zh(24-v,1)}}時
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 7"
\t\t\tv-bind:class="{xx:7-v==w}"
\t\t\tv-bind:style="{transform:'translate('+xc(wr,v+w,7)+'px,'+yc(wr,v+w,7)+'px) rotate('+dg(v+w,7)+'deg)'}">星期{{wk[7-v]}}
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 31"
\t\t\tv-bind:class="{xx:31-k==d}"
\t\t\tv-bind:style="{transform:'translate('+xc(dr,k+d,31)+'px,'+yc(dr,k+d,31)+'px) rotate('+dg(k+d,31)+'deg)'}">{{zh(31-k,1)}}日
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 12"
\t\t\tv-bind:class="{xx:12-k==m+1}"
\t\t\tv-bind:style="{transform:'translate('+xc(mr,k+m+1,12)+'px,'+yc(mr,k+m+1,12)+'px) rotate('+dg(k+m+1,12)+'deg)'}">{{zh(12-k,1)}}月
\t\t\t
\t\t\t
\t\t\t
\t\t\t\t{{y}}年
\t\t\t
\t\t\t\t\t\t
\t\t
\t\t
\t
/<code>
3 中文版：
3.1 效果圖
3.2 完整含註釋的代碼：2.html
<code>
<title>vue版文字羅盤時鐘/<title>
\t
\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v) in 60"
\t\t\tv-bind:class="{xx:60-v==s}"
\t\t\tv-bind:style="{transform:'translate('+xc(sr,v+s,60)+'px,'+yc(sr,v+s,60)+'px) rotate('+dg(v+s,60)+'deg)'}">{{zh(60-v,1)}}秒
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 60"
\t\t\tv-bind:class="{xx:60-v==i}"
\t\t\tv-bind:style="{transform:'translate('+xc(ir,v+i,60)+'px,'+yc(ir,v+i,60)+'px) rotate('+dg(v+i,60)+'deg)'}">{{zh(60-v,1)}}分
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 24"
\t\t\tv-bind:class="{xx:24-v==h}"
\t\t\tv-bind:style="{transform:'translate('+xc(hr,v+h,24)+'px,'+yc(hr,v+h,24)+'px) rotate('+dg(v+h,24)+'deg)'}">{{zh(24-v,1)}}時
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 7"
\t\t\tv-bind:class="{xx:7-v==w}"
\t\t\tv-bind:style="{transform:'translate('+xc(wr,v+w,7)+'px,'+yc(wr,v+w,7)+'px) rotate('+dg(v+w,7)+'deg)'}">星期{{wk[7-v]}}
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 31"
\t\t\tv-bind:class="{xx:31-k==d}"
\t\t\tv-bind:style="{transform:'translate('+xc(dr,k+d,31)+'px,'+yc(dr,k+d,31)+'px) rotate('+dg(k+d,31)+'deg)'}">{{zh(31-k,1)}}日
\t\t\t
\t\t\t
\t\t\t\t\t\tv-for="(v,k) in 12"
\t\t\tv-bind:class="{xx:12-k==m+1}"
\t\t\tv-bind:style="{transform:'translate('+xc(mr,k+m+1,12)+'px,'+yc(mr,k+m+1,12)+'px) rotate('+dg(k+m+1,12)+'deg)'}">{{zh(12-k,1)}}月
\t\t\t
\t\t\t
\t\t\t
\t\t\t\t{{y}}年
\t\t\t
\t\t\t\t\t\t
\t\t
\t\t
\t
/<code>
4 注意：
4.1 本地引用：js/vue.min.js，就是建一個js文件夾，將vue.min.js放在文件夾內，js文件夾與上述html文件同一個目錄下或者文件夾。
4.2 在線引用法：
<code>/<code>
4.3 下載法：複習一下，本地法的好處就是斷網也能用。
用瀏覽器打開，
<code>https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js/<code>
按ctrl+a全選，複製，黏貼到txt文件，重新命名：vue.min.js，保存即可。
4.4 注意vue.min.js是壓縮版，可讀性差，但速度較快，和vue.js比起來。
===================
5 vue的基礎知識複習：
===================
5.1 vue的實例化
5.1.1 方法一：練習常用：
<code>{{message}}
