一个简单的例子入门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”,

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

---

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