一个简单的例子入门Vue.js

现在是前端的天下，原来属于后端的交互现在逐渐被前端慢慢地取代，在前端飞速发展的今天，三大框架在各自擅长的领域独领风骚，Vue 作为一个轻量级的框架也深受国人开发者喜爱，今晚有雨，待在屋里写了一个 Vue 小示例，于我复习巩固，也记录下来供初学者参考：

<template>
  <div class="todos">
    <h1> {{ title }} </h1>
    <ul>
      <li v-for="(todo, index) in todos" :id="index" :class="{'checked': todo.done}">
        <label> {{ index + 1 }} . {{todo.value}} </label>
        <time> {{todo.created | date }} </time>
      </li>
    </ul>
  </div>
</template>

<script>
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-cn')

  export default {
    data () {
      return {
        title: 'vue-todos',
        todos: [
          {
            value: '阅读一本关于前端的书籍',
            done: false,
            created: Date.now()
          },
          {
            value: '补充范例代码',
            done: true,
            created: Date.now() + 300000
          },
          {
            value: '写心得',
            done: false,
            created: Date.now() - 300000
          }
        ]
      }
    },
    filters: {
      date (val) {
        return moment(val).calendar()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang = "less" scoped>

  .todos {

    h1 { font-style: normal;
    }

    ul {
      list-style-type: none;
      padding: 0;
      li { display: inline-block;
          margin: 0 10px;
      }
      li.checked {
        color: #969696;
      }
    }

  }

</style>

最终的效果是这样的：

中间我们用到了非常知名的时间处理插件 – moment.js, 安装方法如下：

$ sudo npm install moment -S

同时重新加载项目：

$ sudo npm install

重新运行即可，这时我们再来做最后一点改动：

<time> {{todo.created | date }} </time>

然后就能看到我们图中的效果了。

---

中间我们用到了 less 预处理语言，在文件中引用 less，必须添加上语言标识：

<style lang = "less" scoped> ... </style>

这里的 scoped 的意思就是将样式仅仅作用于当前页面，既然要用 less，我们必须在工程中添加 less 编译，如下：

$ sudo npm install less style-loader css-loader less-loader -D

或者我们直接在 package.json 里面直接添加:

“css-loader”: “^0.28.4”,
“less”: “^2.7.2”,
“less-loader”: “^4.0.4”,

也能达到同样的效果，条条大路通罗马，目的达到就行

---

好了，夜深了，不给大家啰嗦了，麻雀虽小，五脏俱全，这个案例还是很经典的，希望大家有所收获！