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}}
