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

3473 次阅读 zuley 发布于 3年前 (2016-09-11) 前端开发 4 COMMENTS

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

使用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的列表渲染

二维码
扫描此二维码去手机端访问

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

文章评论

  1. 瓜瓜 2016-9-20 02:03 #1

    好久没有敲过代码了。。

  2. 广告任务网 2016-10-6 09:44 #2

    月黑风高夜,访问博客时!

  3. 广州美贝尔 2016-10-14 10:46 #3

    这个可以有 支持一下 哈哈 虽然看不太懂

  4. 蒂欧娜 2016-10-16 11:22 #4

    来看看,学习学习!!

发表评论