JS-Vue/基于Vue.js的时钟_js时钟样式vue-优快云博客

本文链接：https://blog.youkuaiyun.com/coder_vader/article/details/78454336

MVVM框架的精髓是什么？我想【数据驱动视图】是一个很重要的组成部分。实现同一个特效，用原生js、jq写，与用框架写，思路上最大的不同点便在于【DOM操作上】。其中原生JS对于DOM的操作最为繁琐，而jq则极大地简化了DOM操作，替我们封装好了一大堆好用又靠谱的方法，诸如选择器，节点操作等等，链式调用附带兼容性处理，买一送一划算的很（笑）。而基于MVVM模式的前端框架（比如最火的那三小只），替我们把DOM操作也省略了，也就是说用框架做东西，我们只需要关心数据层面就可以了，至于【数据->DOM】的渲染，他会自动替我们完成，想想就觉得美翻！当然真的学习起来还是需要一定的时间成本的~下面向大家展示一个基于Vue2.0的时钟，老鸟轻拍~

html部分

<body>
	<div id="app">
		<my-clock></my-clock>
	</div>
</body>

js部分

		var app = new Vue({
			el: '#app',
			components: {
				myClock: {
					data() {
						return {
							cssClock: {//整个钟的盒子
								position: 'absolute',
								width: '500px',
								height: '500px',
								border: '1px solid black',
								borderRadius: '50%'
							},
							cssDotWrap: {//装刻度的盒子
								transform: 'translateX(250px)'
							},
							cssDot: {//刻度们
								position: 'abs