1 说明：
1.1 了解vue的基本知识：网页显示方法和js结构。
1.2 如何获取动态时间。
2 效果图
3 完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js数字时钟本地时间代码</title>
<!--css设置，没区别，html直接设置-->
<style>
html, body {
height: 100%;
}
body {
/*整体背景颜色渐变效果设置*/
background: radial-gradient(ellipse at center, pink 0%, blue 70%);
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: 'Share Tech Mono', monospace;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*显示文字颜色*/
color: lightgreen;
text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
#clock .date {
letter-spacing: 0.1em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 12px;
font-style: italic;
padding: 20px 0 0;
}
</style>
</head>
<body>
<!--引入本地vuejs，可以导入在线vue.min.js，此处省略-->
<script type="text/javascript" src="js/vue.min.js"></script>
<!--div容器定义，vue的特点-->
<div id="clock">
<!--三行显示：有顺序性；2对大括号-->
<p class="text">数字时钟</p>
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
</div>
<!--vue格式的js文件-->
<script>
// vue格式的js文件和js文件格式差不多，采用倒装法，与python不同-->
var clock = new Vue({
// el就是对象：上面div里的id内容，注意#符号
el: '#clock',
data: {
// data里面的内容就是class的内容，但是因为可变所以先是空的
// 先各自定义一个空的，后面利用函数获得值
time: '',
date: ''
}
});
/* Model层 */
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var timerID = setInterval(updateTime, 1000);
// 先定义一个空的时间更新函数
updateTime();
// 再定义时间更新函数，获取动态时间值
function updateTime() {
// 定义一个cd变量获取动态时间
var cd = new Date();
// 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};
// 定义零填充函数：就是没有数值就是0来填充
function zeroPadding(num, digit) {
var zero = '';
for(var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
</script>
</body>
</html>4 复习vue的基本知识：
4.1 我是引用本地js/vue.min.js，放在js文件夹内，也可以引用在线的，自己网上搜索，简单。
4.2 <div id="clock">，这里是id="clock"，一般教程都是id="app"，注意这是一个可以自定义的，下面对应需要修改。
4.3 {{}}表示文本插值，运行{{message}}会被数据对象的message属性替换。<!--view层：网页渲染后看到的-->
4.4 js里面的vue是vue的特点：
/* ViewModel层,连接view和model层；
vue实例需要传入一个选项对象，选项对象包括挂载对象，数据，方法，模生命周期钩子（？）
el属性指向view,表示把vue实例绑定某个dom元素*/
/* ViewModel层*/
var clock = new Vue({
// el就是对象：上面div里的id内容，注意#符号
el: '#clock',
data: {
// data里面的内容就是class的内容，但是因为可变所以先是空的
// 先各自定义一个空的，后面利用函数获得值
time: '',
date: ''
}
});
/*下面的是 Model层 ，此处省略*/4.5 动态获取当前时间的函数定义，此处略，属于html的js内容，基本相同。