使用Vue的单文件组件编写一个入门的Todo例子

这个例子是拿官方的Todo例子改写成的.vue格式的单文件组件，功能上新增了勾选复选框变更状态为已完成的功能。

在main.js入口文件中，导入vue和vue单文件组件

vue的正常使用首先是要导入vue框架，然后再导入vue的单文件组件，最后通过 new Vue()实例化这个组件。

# 导入 Vue 框架
import Vue from 'vue'
# 导入 App.vue组件
import App from './App'
# 实例化这个组件
new Vue({
  el: 'body',
  components: { App }
})

.vue的文件构成

每一个.vue都是一个单独的组件，包括独立的模板，样式，和逻辑。他们都是独立的，跟其他的组件不会互相影响。

# 模板
<template></template>
# 逻辑
<script></script>
# 样式
<style></style>

注意事项

如果有Vue逻辑代码，则必须以模块的形式返回接口。

export default{
    data: function () {
        return {
            msg：‘hello Vue.js！’
        }
    }
}

Todo 源码

模板源码

<template>
  <div id="App" class="m-todo">
    <input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请输入您的代表事项，按回车确认">
    <ul>
      <li v-for="todo in todos" v-bind:class="{ 'del': todo.isCheck }">
        <input type="checkbox" id="checkbox{{ $index }}" v-model="todo.isCheck">
        <label for="checkbox{{ $index }}">{{ todo.text }}</label>
        <button v-on:click="removeTodo($index)" v-on:click="removeTodo($index)">X</button>
      </li>
    </ul>
  </div>
</template>

逻辑源码

<script>
  export default{
    data () {
      return {
        # 新Todo
        newTodo: '',
        # Todo 列表
        todos: [
          { text: 'Add Todo Lists', isCheck: false }
        ]
      }
    },
    methods: {
        # 添加Todo方法
      addTodo: function () {
        var text = this.newTodo.trim()
        if (text) {
          this.todos.push({ text: text, isCheck: false })
          this.newTodo = ''
        }
      },
      # 删除Todo方法
      removeTodo: function (index) {
        this.todos.splice(index, 1)
      }
    }
  }
</script>

样式源码

<style>
  .m-todo{ width: 300px; margin: 0 auto; }
  .m-todo>input{ display: block; width: 100%; border: 1px solid #ddd; padding: 5px; border-radius: 3px; margin-bottom: 20px; }
  .m-todo ul{ margin: 0; padding: 0; }
  .m-todo li{ line-height: 30px; list-style: none; }
  .m-todo li.del{ color: #ccc; }
</style>

参考资料

Vue的单文件Vue的相关知识点
Vue的Class与Style的绑定
Vue的方法与事件处理
Vue的列表渲染