{"id":92,"date":"2019-05-30T15:01:06","date_gmt":"2019-05-30T15:01:06","guid":{"rendered":"https:\/\/www.369usa.com\/blog\/?p=92"},"modified":"2019-05-30T20:23:41","modified_gmt":"2019-05-30T20:23:41","slug":"a-tiny-bit-of-code-example-for-vue","status":"publish","type":"post","link":"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/","title":{"rendered":"A tiny bit of code example for Vue"},"content":{"rendered":"

Here it is, nothing fancy…<\/p>\n

\r\n\r\n<html>\r\n<head>\r\n\t<script src="https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.10\/dist\/vue.js"><\/script>\r\n\t<style>\r\n\t#app{width:100%;height:3900px;}\r\n\t#main{position:relative;margin:50px auto 2000px;width:550px;}\r\n\t#column{width:20px;height:3800px;background:#BBB;position:absolute;top:0;left:0;}\r\n\t#content{}\r\n\t#content .unit{margin:0 0 20px 50px;width:500px;height:300px;background:#BBB;}\r\n\t#circle{width:20px;height:20px;background:#000;border-radius:50%;\r\n\t\tposition:absolute;top:0;left:0;color:#FFF;line-height:20px;text-align:center;\r\n\t\t;}\r\n\t.unit.highlighted{\r\n\t\tbackground:pink !important;\r\n\t}\r\n\t<\/style>\r\n<\/head>\r\n<body>\r\n\t<div id="app">\r\n\t\t\r\n\t\t<div id="main">\r\n\r\n\t\t\t<div id="column">\r\n\t\t\t\t<div id="circle" v-bind:style="{'top':y+'px'}">{{activeUnit}}<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div id="content">\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 0}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 1}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 2}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 3}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 4}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 5}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 6}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 7}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 8}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 9}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 10}"><\/div>\r\n\t\t\t\t<div class="unit" v-bind:class="{'highlighted': activeUnit == 11}"><\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t<\/div>\r\n\r\n\t\t<!-- <button id="up" v-on:click="goUp">Up<\/button> \r\n\t\t<button id="down" v-on:click="goDown">Down<\/button> -->\r\n\r\n\t<\/div>\r\n<\/body>\r\n<script>\r\nvar app = new Vue({\r\n\tel: '#app',\r\n\tdata: {\r\n\t\ty: 0,\r\n\t\tactiveUnit: 0,\r\n\t},\r\n\tmethods: {\r\n\t\thandleScroll:function(){\r\n\t\t\tvar units = document.querySelectorAll('.unit'); \r\n\t\t\tapp.activeUnit = (function(){\r\n\t\t\t\tvar y = window.scrollY-50;\r\n\t\t\t\tfor(var i=0;i<units.length;i++){\r\n\t\t\t\t\tif(y < units[0].offsetTop){\r\n\t\t\t\t\t\treturn 0;\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse if(i+1 >= units.length){\r\n\t\t\t\t\t\treturn units.length-1;\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse if(y > units[i].offsetTop && y < units[i+1].offsetTop){\r\n\t\t\t\t\t\treturn i+1;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t})();\r\n\t\t\tapp.y = units[app.activeUnit].offsetTop;\r\n\t\t},\r\n\t},\r\n\tcreated(){\r\n\t\twindow.addEventListener('scroll', this.handleScroll);\r\n\t},\r\n\tdestroyed(){\r\n\t\twindow.removeEventListener('scroll', this.handleScroll);\r\n\t}\r\n})\r\n<\/script>\r\n<\/html>\r\n\r\n<\/pre>\n
Version Number 2:<\/p>\n
\r\n\r\n<html>\r\n<head>\r\n\t<script src="https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.10\/dist\/vue.js"><\/script>\r\n\t<style>\r\n\t\t#app{margin:50px auto; width:600px;}\r\n\t\thr{border-top: 1px solid #DDD; margin:0 0 50px;}\r\n\t\t.intro{margin-bottom:50px;color:#888;font-size:16px;line-height:20px;text-align:justify;}\r\n\t\t.section{width:600px;display:flex;margin:0 auto 50px;}\r\n\t\t.column{width:20px;background:#DDD;border-radius:10px;}\r\n\t\t.unit{margin-left:20px;margin-bottom:10px;width:560px;background:#DDD;height:250px;\r\n\t\t\t-webkit-transition: background .5s; \/* Safari *\/\r\n\t\t\ttransition: background .5s;\r\n\t\t}\r\n\t\t.unit.highlighted{background:#373737;}\r\n\t\t.unit:last-of-type{margin-bottom:0;}\r\n\t\t.wrapper{position:relative;padding-bottom:20px;}\r\n\t\t.circle{width:20px;height:20px;border-radius:50%;background:#373737;\r\n\t\t\tposition: -webkit-sticky; \/* Safari *\/\r\n\t\t\tposition: sticky;\r\n\t\t\ttop: 40vh;\r\n\t\t\topacity:0;\r\n\t\t}\r\n\t\t.circle.show{\r\n\t\t\topacity:1;\r\n\t\t}\r\n\t<\/style>\r\n<\/head>\r\n<body>\r\n\t<div id="app">\r\n\t\t\r\n\t\t<div class="intro">\r\n\u5317\u7f8e\u79d1\u6280 \u4e8e2006\u5e742\u6708\u5728\u7ebd\u7ea6\u521b\u5efa\u3002\u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u8054\u76df\u662f\u5317\u7f8e\u79d1\u6280\u65d7\u4e0b\u7684\u4e00\u4e2a\u56e2\u961f\uff0c\u4ee5\u5176\u591a\u5e74\u4e30\u5bcc\u7684\u7f51\u9875\u8bbe\u8ba1\u7ecf\u9a8c\uff0c\u4eb2\u5207\u7ec6\u5fc3\u5730\u5e2e\u52a9\u534e\u4eba\u5efa\u8bbe\u7f51\u7ad9\u548c\u5ba3\u4f20\u5e7f\u544a\u7684\u4e00\u6761\u9f99\u670d\u52a1\uff08\u505a\u63a8\u5e7f\u5c31\u662f\u6709\u514d\u8d39\u7f51\u7ad9\u8bbe\u8ba1\uff09\u3002\r\n\u5317\u7f8e\u79d1\u6280\u6839\u636e\u5ba2\u6237\u7684\u9700\u8981\uff0c\u6765\u63d0\u4f9b\u6700\u9ad8\u54c1\u8d28\u7684\u7b56\u7565\u548c\u5e7f\u544a\u5ba3\u4f20\u670d\u52a1\uff0c\u4e13\u4e1a\u7684\u77e5\u8bc6\u7684\u63d0\u5347\u4e0e\u670d\u52a1\uff0c\u4ee5\u5ba2\u6237\u7684\u7acb\u573a\u7740\u60f3\uff0c\u8ba9\u5ba2\u6237\u6ee1\u610f\uff0c\u662f\u6211\u4eec\u4e00\u8d2f\u79c9\u6301\u7684\u7cbe\u795e\u3002\u5317\u7f8e\u79d1\u6280\u81f4\u529b\u4e8e\u4f01\u4e1a\u54c1\u724c\u7684\u5efa\u7acb\uff0c\u5e2e\u52a9\u4f01\u4e1a\u6811\u7acb\u826f\u597d\u7684\u4f01\u4e1a\u5f62\u8c61\uff0c\u6253\u5f00\u5e02\u573a\uff0c\u5e2e\u52a9\u4e2d\u5c0f\u4f01\u4e1a\u8d70\u51fa\u56f0\u5883\u3002 \r\n\u5317\u7f8e\u79d1\u6280\u62e5\u6709\u591a\u5e74\u7f51\u9875\u8bbe\u8ba1\u548c\u7f51\u7ad9\u8bbe\u8ba1\u7ecf\u9a8c\uff0c\u4e13\u4e3a\u6d77\u5916\u534e\u4eba\u4f01\u4e1a\u63d0\u4f9b\u7f51\u7ad9\u5efa\u8bbe\u670d\u52a1\u3002\u4ece\u7f51\u7ad9\u7b56\u5212\u5230\u7f51\u7ad9\u5236\u4f5c\uff0c\u6211\u4eec\u7684\u7f51\u9875\u8bbe\u8ba1\u5e08\u4e3a\u60a8\u63d0\u4f9b\u5b8c\u7f8e\u7684\u89e3\u51b3\u65b9\u6848\u3002\u7f51\u9875\u8bbe\u8ba1\u7531\u5e7f\u544a\u8425\u9500\u4e13\u4e1a\u4eba\u624d\u8d1f\u8d23\uff0c\u5efa\u7f51\u7ad9\u65f6\u5145\u5206\u8003\u8651\u5230\u672a\u6765\u7684\u7f51\u7edc\u8425\u9500\u3001\u5f62\u8c61\u4ea7\u54c1\u5c55\u793a\u548c\u7535\u5b50\u5546\u52a1\u529f\u80fd\uff0c\u4e3a\u60a8\u8d62\u5f97\u5e02\u573a\u3002\r\n\u5317\u7f8e\u79d1\u6280\u4e3b\u8425\u4e1a\u52a1\u4e3a\uff1a\u8c37\u6b4c\u6392\u540dSEO\uff0c \u7f51\u7ea2\u8425\u9500\uff0c \u89c6\u9891\u63a8\u5e7f\uff0c \u5fae\u4fe1\u8fd0\u8425\uff0c \u82f1\u6587\u5a92\u4f53\u63a8\u5e7f\uff0c \u793e\u4ea4\u5a92\u4f53\u63a8\u5e7f\uff0c \u7f51\u7ad9\u5efa\u8bbe\uff0c \u7f51\u9875LOGO\u8bbe\u8ba1\uff0c \u7f51\u7edc\u5546\u5e97\u5efa\u7ad9\uff0c\u7f51\u7edc\u8f6f\u4ef6\u5f00\u53d1\u53ca\u7f51\u7edc\u5e7f\u544a\u6295\u653e\u63a8\u5e7f\u7b49\u7f51\u7edc\u76f8\u5173\u670d\u52a1\u3002\u6211\u4eec\u63d0\u4f9b\u9ad8\u6548\u800c\u5207\u5408\u5b9e\u9645\u7684\u7f51\u7edc\u5f00\u53d1\u8ba1\u5212\uff0c\u5e2e\u52a9\u6d77\u5185\u5916\u534e\u4eba\u5546\u5bb6\u5728\u4fe1\u606f\u65f6\u4ee3\u4fdd\u6301\u9886\u5148\u5730\u4f4d\uff0c\u62a2\u5360\u65b0\u7684\u5546\u673a\u3002\r\n\u8bf7\u5bdf\u770b\u6211\u4eec\u7684\u4f5c\u54c1\u5c55\u793a\uff0c\u6211\u4eec\u4e3a\u6bcf\u4e2a\u4f01\u4e1a\u91cf\u8eab\u5b9a\u505a\u6700\u9002\u5408\u7684\u5f00\u53d1\u8ba1\u5212\u3002\u8bf7\u7ed9\u6211\u4eec\u5199\u4fe1\u6216\u8005\u6253\u7535\u8bdd\uff0c\u6211\u4eec\u5c06\u4e3a\u60a8\u514d\u8d39\u8bc4\u4f30\u5f00\u53d1\u6240\u9700\u7684\u8d39\u7528\u3002\r\n\t\t<\/div>\r\n\r\n\t\t<hr>\r\n\r\n\t\t<div class="wrapper">\r\n\r\n\t\t\t<div class="circle" v-bind:class="{'show':circleShow}"><\/div>\r\n\r\n\t\t\t<!--Session 1-->\r\n\r\n\t\t\t<div class="section">\r\n\r\n\t\t\t\t<div class="column"><\/div>\r\n\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 0}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 1}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 2}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 3}"><\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<hr>\r\n\r\n\t\t\t<!--Session 2-->\r\n\r\n\t\t\t<div class="section">\r\n\r\n\t\t\t\t<div class="column"><\/div>\r\n\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 4}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 5}"><\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<hr>\r\n\r\n\t\t\t<!--Session 3-->\r\n\r\n\t\t\t<div class="section">\r\n\r\n\t\t\t\t<div class="column"><\/div>\r\n\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 6}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 7}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 8}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 9}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 10}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 11}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 12}"><\/div>\r\n\t\t\t\t\t<div class="unit" v-bind:class="{'highlighted': highlightedIndex == 13}"><\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t<\/div>\r\n\r\n\t\t<\/div>\r\n\r\n\t\t<hr>\r\n\r\n\t\t<div class="intro">\r\nI1024\u7f51\u7edc\u79d1\u6280\uff08\u7f51\u7ad9\u5efa\u8bbe\uff0c\u7f51\u7ad9\u4f18\u5316\uff09\u51dd\u805a\u4e86\u4e00\u6279\u6d3b\u8dc3\u5728\u7ebd\u7ea6\u5730\u533a\u7684\u534e\u4eba\u8bbe\u8ba1\u5e08\uff0c\u8f6f\u4ef6\u5de5\u7a0b\u5e08\u548c\u6709\u6d3b\u529b\u7684\u5a92\u4f53\u4eba\u3002\u4ed6\u4eec\u5728\u5404\u81ea\u7684\u9635\u5730\u4e0a\u6709\u7740\u51fa\u8272\u7684\u8868\u73b0\u4ee5\u53ca\u4e30\u5bcc\u7684\u5b9e\u6218\u7ecf\u9a8c\uff0c\u66f4\u5177\u9b45\u529b\u7684\u662f\u4ed6\u4eec\u7684\u7f51\u7ad9\u521b\u9020\u529b\u548c\u5949\u732e\u7cbe\u795e\u3002\u6211\u4eec\u7684\u8bbe\u8ba1\u5b9e\u529b\u548c\u56e2\u961f\u914d\u5408\u7edd\u5bf9\u53ef\u4ee5\u80dc\u4efb\u4efb\u4f55\u6709\u5177\u6709\u6311\u6218\u6027\u7684\u8bbe\u8ba1\u5de5\u4f5c\uff01\u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u5ba4i1024\u4e8e2006\u5e742\u6708\u5728\u7ebd\u7ea6\u521b\u5efa\u3002\r\n\u672c\u56e2\u961f\u5c06\u4ee5\u5176\u591a\u5e74\u4e30\u5bcc\u7684\u7f51\u7ad9\u8bbe\u8ba1\u7ecf\u9a8c\uff0c\u4eb2\u5207\u7ec6\u5fc3\u5730\u5e2e\u52a9\u534e\u4eba\u7f51\u7ad9\u8bbe\u8ba1\u548c\u5e7f\u544a\u5ba3\u4f20\u3002I1024\u7f51\u7edc\u79d1\u6280\u4ee5\u6700\u6709\u529b\u7684\u6574\u5408\u548c\u4e0d\u65ad\u521b\u65b0\u7684\u529b\u91cf\uff0c\u8ffd\u6c42\u4e0e\u5ba2\u6237\u4e4b\u95f4\u7684\u53cc\u5b34\uff0c\u59cb\u7ec8\u52aa\u529b\u6210\u4e3a\u884c\u4e1a\u6700\u5177\u7ade\u4e89\u529b\u7684\u54c1\u724c\u3002\r\n\u79c9\u627f\u201c\u8bf4\u5230\u505a\u5230\u3001\u53ea\u8ba4\u529f\u52b3\u3001\u4e25\u5df1\u5bbd\u4eba\u3001\u6562\u62c5\u8d23\u4efb\u3001\u8270\u82e6\u594b\u6597\u201d\u7684\u56e2\u961f\u7cbe\u795e\uff0c\u4e13\u6ce8\u5730\u81f4\u529b\u4e8e\u4e3a\u4f01\u4e8b\u4e1a\u5355\u4f4d\u63d0\u4f9b\u6700\u9ad8\u54c1\u8d28\u7684\u4e92\u8054\u7f51\u591a\u5a92\u4f53\u670d\u52a1\uff0c\u4e3a\u4f01\u4e8b\u4e1a\u5355\u4f4d\u521b\u9020\u5168\u65b0\u7684\u901a\u8fc7\u4e92\u8054\u7f51\u5ba3\u4f20\u4f01\u4e1a\u54c1\u724c\u5f62\u8c61\u9014\u5f84\uff0c\u4e0e\u5927\u4f17\u4e00\u8d77\u5171\u540c\u63a8\u8fdb\u4e2d\u56fd\u4e92\u8054\u7f51\u4ea7\u4e1a\u7684\u84ec\u52c3\u53d1\u5c55\u3002\r\n\u6211\u4eec\u7684\u4e1a\u52a1\u6db5\u76d6\u4f01\u4e8b\u4e1a\u5355\u4f4d\u4e92\u8054\u7f51\u5e94\u7528\u670d\u52a1\u3001\u591a\u5a92\u4f53\u8bbe\u8ba1\u3001\u7f51\u7ad9\u5efa\u8bbe\u3001\u7f51\u7ad9\u63a8\u5e7f\u3001\u7f51\u7ad9\u4f18\u5316\u3001DIV+CSS\u7f51\u7ad9\u4f18\u5316\u3001\u7f51\u9875\u8bbe\u8ba1\u3001\u7f51\u7ad9\u5236\u4f5c\u3001\u7535\u5b50\u5546\u52a1\u7684\u5e94\u7528\uff0c\u5e73\u9762\u8bbe\u8ba1\u00b7\u6807\u5fd7\uff3b\u6807\u8bc6 \u5546\u6807 logo\uff3d\u00b7VI\uff3b\u89c6\u89c9\u8bc6\u522b\u7cfb\u7edf\uff3d\u00b7\u5b57\u4f53\u00b7\u8272\u5f69\u987e\u95ee\u00b7\u673a\u6784\u89c6\u89c9\u8bc6\u522b\u7cfb\u7edf\u00b7\u4f01\u4e1a\u5f62\u8c61\u7ba1\u7406\u987e\u95ee\u00b7\u89c6\u89c9\u8425\u9500\u987e\u95ee\u00b7\u54c1\u724c\u7b56\u5212\u00b7\u5e7f\u544a\u56fe\u6587\u00b7\u753b\u518c\u8bbe\u8ba1\u7b49\u89c6\u89c9\u8bbe\u8ba1\u63a8\u5e7f\u9886\u57df\u3002\r\nvy\u66fe\u5728\u6469\u6839\u5927\u901a\u94f6\u884c(\u4e2d\u56fd)\u4efb\u804c\u8d22\u52a1\u7ecf\u7406\uff0c\u8d1f\u8d23\u57fa\u91d1\u52df\u96c6\u548c\u6295\u8d44\u8005\u5173\u7cfb\u7684\u5f00\u53d1\u53ca\u7ef4\u62a4\u3002Ivy\u662f\u5317\u79d1\u8d22\u52a1\u603b\u76d1\u517c\u6280\u672f\u7ecf\u7406\uff0c\u8d1f\u8d23\u534f\u8c03\u9879\u76ee\u5185\u7684\u6280\u672f\u521b\u65b0\u6d3b\u52a8\uff0c\u63a8\u52a8\u4e3b\u8981\u6280\u672f\u51b3\u7b56\uff0c\u7ef4\u62a4\u516c\u53f8\u8d22\u52a1\u3002Ivy\u62e5\u6709\u4e2d\u56fd\u9752\u5e74\u653f\u6cbb\u5b66\u9662\u7ecf\u6d4e\u5b66\u5b66\u58eb\u5b66\u4f4d\u548c\u7ebd\u7ea6\u5927\u5b66\u4f1a\u8ba1\u5b66\u7855\u58eb\u5b66\u4f4d\u3002\u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u8054\u76df\u62e5\u6709\u4e00\u652f\u6210\u719f\u777f\u667a\u5374\u5e74\u8f7b\u6d3b\u6cfc\u7684\u5de5\u4f5c\u56e2\u961f\u3002\r\n\u56e2\u961f\u6210\u5458\u90fd\u662f\u6bd5\u4e1a\u4e8e\u56fd\u9645\u9876\u7ea7\u5546\u5b66\u9662\u53ca\u4ece\u4e8b\u54c1\u724c\u7b56\u5212\u3001\u7f51\u7ad9\u8bbe\u8ba1\u3001\u7f51\u7edc\u63a8\u5e7f\u884c\u4e1a\u591a\u5e74\u7684\u4e13\u4e1a\u4eba\u3002\u6211\u4eec\u7ecf\u8fc7\u957f\u671f\u4e0d\u61c8\u7684\u52aa\u529b\uff0c\u79ef\u7d2f\u4e86\u4e30\u5bcc\u7684\u5b9e\u6218\u7ecf\u9a8c\uff0c\u4f7f\u5f97\u51fa\u8272\u7684\u54c1\u724c\u4f20\u64ad\u5de5\u4f5c\u535a\u5f97\u4e86\u5ba2\u6237\u7684\u5145\u5206\u4fe1\u8d56\u4e0e\u8d5e\u8a89\u3002\r\n\u5317\u7f8e\u79d1\u6280\u662f\u4e00\u4e2a\u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u516c\u53f8\uff0c\u6211\u4eec\u4e3b\u8425\u4e1a\u52a1\u4e3a\uff1a\u7f51\u7ad9\u8bbe\u8ba1\u548c\u5efa\u8bbe\uff0c\u7f51\u7ad9\u63a8\u5e7f\uff0c\u7f51\u7edc\u5546\u5e97\u5efa\u7ad9\uff0c\u7f51\u7edc\u8f6f\u4ef6\u5f00\u53d1\u53ca\u7f51\u7edc\u5e7f\u544a\u6295\u653e\u63a8\u5e7f\u7b49\u7f51\u7edc\u76f8\u5173\u670d\u52a1\u3002\u6211\u4eec\u63d0\u4f9b\u9ad8\u6548\u800c\u5207\u5408\u5b9e\u9645\u7684\u7f51\u7edc\u5f00\u53d1\u8ba1\u5212\uff0c\u5e2e\u52a9\u6d77\u5185\u5916\u534e\u4eba\u5546\u5bb6\u5728\u4fe1\u606f\u65f6\u4ee3\u4fdd\u6301\u9886\u5148\u5730\u4f4d\uff0c\u62a2\u5360\u65b0\u7684\u5546\u673a\u3002\r\n\u5317\u7f8e\u79d1\u6280\u4e86\u89e3\u534e\u4eba\u4f01\u4e1a\u7684\u9700\u6c42\uff0c\u6240\u4ee5\u6211\u4eec\u63d0\u4f9b\u6700\u7ecf\u6d4e\u7684\u670d\u52a1\u4ef7\u683c\uff0c\u6700\u9ad8\u7684\u5236\u4f5c\u6c34\u51c6\u3002\u8bf7\u5bdf\u770b\u6211\u4eec\u7684\u4f5c\u54c1\u5c55\u793a\uff0c\u6211\u4eec\u4e3a\u6bcf\u4e2a\u4f01\u4e1a\u91cf\u8eab\u5b9a\u505a\u6700\u9002\u5408\u7684\u5f00\u53d1\u8ba1\u5212\u3002\u8bf7\u7ed9\u6211\u4eec\u5199\u4fe1\u6216\u8005\u6253\u7535\u8bdd\uff0c\u6211\u4eec\u5c06\u4e3a\u60a8\u514d\u8d39\u8bc4\u4f30\u5f00\u53d1\u6240\u9700\u7684\u8d39\u7528\u3002\r\n\t<\/div>\r\n<\/body>\r\n\r\n<script>\r\nvar app = new Vue({\r\n\tel: '#app',\r\n\tdata: {\r\n\t\ty: 0,\r\n\t\tcircleShow: false,\r\n\t\thighlightedIndex: -1,\r\n\t},\r\n\tmethods: {\r\n\t\thandleScroll:function(){\r\n\t\t\tvar circle = document.getElementById('app').querySelector('.circle');\r\n\t\t\tvar circleY = circle.getBoundingClientRect().top;\r\n\t\t\t\/\/Update Circle Opcacity Status:\r\n\t\t\tapp.circleShow = (function(){\r\n\t\t\t\tvar columns = document.getElementById('app').querySelectorAll('.column');\r\n\t\t\t\tfor(var i=0;i<columns.length;i++){\r\n\t\t\t\t\tvar upperBound = columns[i].getBoundingClientRect().top;\r\n\t\t\t\t\tvar lowerBound = upperBound + columns[i].offsetHeight - 20;\r\n\t\t\t\t\tif(circleY > upperBound && circleY < lowerBound) return true;\r\n\t\t\t\t};\r\n\t\t\t\treturn false;\r\n\t\t\t})();\r\n\t\t\t\/\/Update Unit Highlighted Status:\r\n\t\t\tapp.highlightedIndex = (function(){\r\n\t\t\t\t\/\/Update Circle Opcacity Status:\r\n\t\t\t\tvar units = document.getElementById('app').querySelectorAll('.unit');\r\n\t\t\t\tfor(var i=0;i<units.length;i++){\r\n\t\t\t\t\tvar upperBound = units[i].getBoundingClientRect().top;\r\n\t\t\t\t\tvar lowerBound = upperBound + units[i].offsetHeight;\r\n\t\t\t\t\tif(circleY > upperBound && circleY < lowerBound) return i;\r\n\t\t\t\t};\r\n\t\t\t\treturn -1;\r\n\t\t\t})();\r\n\t\t}\r\n\t},\r\n\tcreated(){\r\n\t\twindow.addEventListener('scroll', this.handleScroll);\r\n\t},\r\n\tdestroyed(){\r\n\t\twindow.removeEventListener('scroll', this.handleScroll);\r\n\t}\r\n});\r\n<\/script>\r\n\r\n<\/html>\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Here it is, nothing fancy… <html> <head> <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.10\/dist\/vue.js"><\/script> <style> #app{width:100%;height:3900px;} #main{position:relative;margin:50px auto 2000px;width:550px;} #column{width:20px;height:3800px;background:#BBB;position:absolute;top:0;left:0;} #content{} #content .unit{margin:0 0 20px 50px;width:500px;height:300px;background:#BBB;} #circle{width:20px;height:20px;background:#000;border-radius:50%; position:absolute;top:0;left:0;color:#FFF;line-height:20px;text-align:center; ;} .unit.highlighted{ background:pink !important; } <\/style> <\/head> <body> <div id="app"> <div id="main"> <div id="column"> <div id="circle" v-bind:style="{‘top’:y+’px’}">{{activeUnit}}<\/div> <\/div> <div id="content"> <div class="unit" v-bind:class="{‘highlighted’: activeUnit == 0}"><\/div> <div class="unit" v-bind:class="{‘highlighted’: activeUnit == 1}"><\/div> … Continue reading “A tiny bit of code example for Vue”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-92","post","type-post","status-publish","format-standard","hentry","category-5"],"yoast_head":"\nA tiny bit of code example for Vue - \u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u535a\u5ba2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A tiny bit of code example for Vue - \u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u535a\u5ba2\" \/>\n<meta property=\"og:description\" content=\"Here it is, nothing fancy… <html> <head> <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.10\/dist\/vue.js"><\/script> <style> #app{width:100%;height:3900px;} #main{position:relative;margin:50px auto 2000px;width:550px;} #column{width:20px;height:3800px;background:#BBB;position:absolute;top:0;left:0;} #content{} #content .unit{margin:0 0 20px 50px;width:500px;height:300px;background:#BBB;} #circle{width:20px;height:20px;background:#000;border-radius:50%; position:absolute;top:0;left:0;color:#FFF;line-height:20px;text-align:center; ;} .unit.highlighted{ background:pink !important; } <\/style> <\/head> <body> <div id="app"> <div id="main"> <div id="column"> <div id="circle" v-bind:style="{'top':y+'px'}">{{activeUnit}}<\/div> <\/div> <div id="content"> <div class="unit" v-bind:class="{'highlighted': activeUnit == 0}"><\/div> <div class="unit" v-bind:class="{'highlighted': activeUnit == 1}"><\/div> … Continue reading "A tiny bit of code example for Vue"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/\" \/>\n<meta property=\"og:site_name\" content=\"\u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u535a\u5ba2\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-30T15:01:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-30T20:23:41+00:00\" \/>\n<meta name=\"author\" content=\"darkersss\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"darkersss\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/\",\"url\":\"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/\",\"name\":\"A tiny bit of code example for Vue - \u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u535a\u5ba2\",\"isPartOf\":{\"@id\":\"https:\/\/www.369usa.com\/blog\/#website\"},\"datePublished\":\"2019-05-30T15:01:06+00:00\",\"dateModified\":\"2019-05-30T20:23:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.369usa.com\/blog\/#\/schema\/person\/1c260c42af4aadda7f89a0081f6591b6\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.369usa.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A tiny bit of code example for Vue\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.369usa.com\/blog\/#website\",\"url\":\"https:\/\/www.369usa.com\/blog\/\",\"name\":\"369\u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.369usa.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.369usa.com\/blog\/#\/schema\/person\/1c260c42af4aadda7f89a0081f6591b6\",\"name\":\"darkersss\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.369usa.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2c538d84b753eed6f6f714becf9b3955?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2c538d84b753eed6f6f714becf9b3955?s=96&d=mm&r=g\",\"caption\":\"darkersss\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A tiny bit of code example for Vue - \u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u535a\u5ba2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/","og_locale":"en_US","og_type":"article","og_title":"A tiny bit of code example for Vue - \u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u535a\u5ba2","og_description":"Here it is, nothing fancy… <html> <head> <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.10\/dist\/vue.js"><\/script> <style> #app{width:100%;height:3900px;} #main{position:relative;margin:50px auto 2000px;width:550px;} #column{width:20px;height:3800px;background:#BBB;position:absolute;top:0;left:0;} #content{} #content .unit{margin:0 0 20px 50px;width:500px;height:300px;background:#BBB;} #circle{width:20px;height:20px;background:#000;border-radius:50%; position:absolute;top:0;left:0;color:#FFF;line-height:20px;text-align:center; ;} .unit.highlighted{ background:pink !important; } <\/style> <\/head> <body> <div id="app"> <div id="main"> <div id="column"> <div id="circle" v-bind:style="{'top':y+'px'}">{{activeUnit}}<\/div> <\/div> <div id="content"> <div class="unit" v-bind:class="{'highlighted': activeUnit == 0}"><\/div> <div class="unit" v-bind:class="{'highlighted': activeUnit == 1}"><\/div> … Continue reading \"A tiny bit of code example for Vue\"","og_url":"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/","og_site_name":"\u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u535a\u5ba2","article_published_time":"2019-05-30T15:01:06+00:00","article_modified_time":"2019-05-30T20:23:41+00:00","author":"darkersss","twitter_card":"summary_large_image","twitter_misc":{"Written by":"darkersss","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/","url":"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/","name":"A tiny bit of code example for Vue - \u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1\u535a\u5ba2","isPartOf":{"@id":"https:\/\/www.369usa.com\/blog\/#website"},"datePublished":"2019-05-30T15:01:06+00:00","dateModified":"2019-05-30T20:23:41+00:00","author":{"@id":"https:\/\/www.369usa.com\/blog\/#\/schema\/person\/1c260c42af4aadda7f89a0081f6591b6"},"breadcrumb":{"@id":"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.369usa.com\/blog\/a-tiny-bit-of-code-example-for-vue\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.369usa.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A tiny bit of code example for Vue"}]},{"@type":"WebSite","@id":"https:\/\/www.369usa.com\/blog\/#website","url":"https:\/\/www.369usa.com\/blog\/","name":"369\u7ebd\u7ea6\u7f51\u7ad9\u8bbe\u8ba1","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.369usa.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.369usa.com\/blog\/#\/schema\/person\/1c260c42af4aadda7f89a0081f6591b6","name":"darkersss","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.369usa.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2c538d84b753eed6f6f714becf9b3955?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2c538d84b753eed6f6f714becf9b3955?s=96&d=mm&r=g","caption":"darkersss"}}]}},"_links":{"self":[{"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/posts\/92"}],"collection":[{"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":4,"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/posts\/92\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.369usa.com\/blog\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}