2017-07-19 • 前端开发

Web Vue项目速转.htm静态网页

拖了2个星期, 终于可以结束简历制作的项目了, 说实话这个项目其实挺没有技术含量的, 话说我也没什么技术, 对于前端方面的技术也仅仅是浅显的认知, 要更加深入的进行学习的话算法也就是数学知识真的是一个很大的瓶颈, 所以这一话后准备潜心修炼自己薄弱的数学知识.

参考链接:

以下内容在上述文章基础上进行, 请事先查阅.

设计模式是小白晋升码农的利器, 而对于算法, 则是区分大神和码农的一道不可逾越的天堑, 起初学习iOS, 是看@coderMJLee的视频学的, 我想好多的同学都是, 不过到一定阶段就会发生瓶颈, 这时@onevcat喵神的出现让我看到了编程的美, 不仅仅是复制黏贴及简单的封装.而对于我目前的状态, 准备通过学习吴军老师的数学之美, 和程序员的算法等书籍进行算法上的入门.

之前看过一本python的算法书, 里面还依稀记得二分查找和选择排序, 快速排序之类的, 都是一些比较常用的算法, 我对于2017年的计划是要入门统计学, 现在已经7月下旬了, 是应该要进行学习了. 好了, 闲扯了那么多就是为了说明等这篇文章的结束后就要进行数学及算法的闭关, 在此立下Flag.

好了, 为了以后能带来一些高质量的算法文章, 我现在已经迫不及待的想要完成这个项目了, 手指在键盘上的舞动也是从身体上本能的想要快些结束这篇没有质量的文章. 最后, 我们来完善简历吧.

还是和往常一样, 我们每次学习vue的一个小概念, 这次将的是点击事件, v-on:click, 其实这个可以简写成@click: 等下会给出具体代码, 这里先了解就好.

完成图示和之前几个模块一样, 我们将后面两个模块完成, 但由于技术相同, 这里就不赘述, 仅仅贴出图示, 有兴趣的可以参照源码.

现在我们来完成之前的一些细节, 导航栏上的切换:

navigation.vue

<template>
<div>
  <div class="nav">
    <div class="content">
      <div class="title">
        Castie!
      </div>
      <div class="items">
        <span @click="scrollTo(0, 0)"><a>Home</a></span>
        <span @click="scrollTo(0, 600)"><a>Projects</a></span>
        <span @click="scrollTo(0, 1200)"><a>GitHub</a></span>
        <span @click="scrollTo(0, 1800)"><a>Articles</a></span>
        <span @click="scrollTo(0, 2930)"><a>Experience</a></span>
        <span @click="scrollTo(0, 3530)"><a>Contact</a></span>
      </div>
    </div>
  </div>
  <div class="nav-offset">

  </div>
</div>
</template>

通过@click进行函数对dom的事件绑定.

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    scrollTo: function(x, y) {
      window.scrollTo(x, y);
    }
  }
}
</script>

window.scrollTo 可以定位到视图的任意位置, 但并没有动画, 想要动画的同学可以使用jQuery或者自己写Css, 这里就不实现了,

<style scoped>
...
.nav a,
.nav a:link,
.nav a:visited {
  text-decoration: none;
  color: #fff;
}

.nav a:hover {
  color: #aaa;
}
</style>

通过伪类来进行鼠标的控制, 这样我们的导航栏就搞定啦.

接下来, 怕有些同学没有用过vue不知道如何使用项目特地的进行了图示:

Resume

A Vue.js project Download Node.js first

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report