todolist带你熟悉vue

vue.js实现todolist

在学习vue之前，先跟着视频实现了一个todolist，对vue这个框架有了初步的认识。

引入vue.js文件，具体vue的安装参考官方文档。
然后实现一个简单的todolist：

当点击提交时，我们提交的任务项会显示在下方：在这里插入图片描述
具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
  <script src="../../imoocmall1/node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
  <div>
    <input v-model="inputValue"/> /*实现了数据的双向绑定,输入框的值发生变化，data中的inputValue也同步变化，返回亦然*/
    <button @click="handleSubmit">提交</button>
  </div>
  <ul>
    <li v-for="(item,index) of list" :key="index">{{item}}</li>
  </ul>
</div>
<script>
  new Vue({
    el:"#root",
    data:{
      inputValue:'hello',
      list:[]
    },
    methods:{
      handleSubmit:function () {
        /*显示单个输入this.list=this.inputValue*/
        this.list.push(this.inputValue)
        this.inputValue=''  /*加入到list里后清除input框里的内容*/
      }
    }
  })
</script>
</body>
</html>

使用组件化的概念修改todolist
组件 (Component) 是 Vue.js 最强大的功能之一。可以封装重用的代码，方便对开发过程当中各种功能模块的划分。而vue中组件又分为两种，分别是全局组件和局部组件，下面我们来看如何定义这两种组件。

全局组件

<body>
<div id="root">
  <div>
    <input v-model="inputValue">
    <button @click="handleSubmit">提交</button>
  </div>
  <ul>
    <todo-item></todo-item>
  </ul>
</div>
<script>
  Vue.component('todo-item',{  /*注册了全局组件todo-item*/
    template:'<li>item</li>'
  }),

  new Vue({
    el:"#root",
    data:{
      inputValue:"hello",
      list:[]
    },
    methods:{
      handleSubmit:function () {
        this.list.push(this.inputValue)
        this.inputValue=""
      }
    }
  })
</script>
</body>

局部组件

<body>
<div id="root">
  <div>
    <input v-model="inputValue">
    <button @click="handleSubmit">submit</button>
  </div>
  <ul>
   <todo-item></todo-item>
  </ul>
  </div>
<script>
/*定义局部组件*/
  var Todoitem={
    template:'<li>item</li>'
  }

  new Vue({
    el:"#root",
    components:{
      'todo-item':Todoitem
    },
    data:{
      inputValue:"hello",
      list:[]
    },
    methods:{
      handleSubmit:function () {
        this.list.push(this.inputValue),
        this.inputValue=""
      }
    }
  })
</script>
</body>

todolist组件拆分
了解了组件的定义后，就可以对我们一开始做的todolist进行组件拆分了。具体代码如下：

<body>
<div id="root">
  <div>
    <input v-model="inputValue">
    <button @click="handleSubmit">submit</button>
  </div>
  <ul>
    <todo-item
      v-for="(item,index) of list"
      :key="index"
      :content="item"
      >  <!--父组件给子组件传值是通过属性的形式-->

    </todo-item>
  </ul>
</div>
<script>
  Vue.component('todo-item',{
    props:['content'],   /*组件接收属性content的值*/
    template:'<li>{{content}}</li>'
  })

  new Vue({
    el:"#root",
    data:{
      inputValue:'',
      list:[]
    },
    methods:{
      handleSubmit:function () {
        this.list.push(this.inputValue)
        this.inputValue=""
      }
    }
  })
</script>
</body>

使用组件拆分的概念后，也实现了相同的效果。这里涉及到了父组件给子组件传值是通过属性（eg., content）来传的，而子组件给父组件传值通过事件来传，具体还是用todolist来实现子组件给父组件传值，我们主要实现当点击生成的待办事项后，点击事件，会删除当前事件。代码如下：

</head>
<body>
<div id="root">
  <div>
    <input v-model="inputValue">
    <button @click="handleSubmit">submit</button>
  </div>
  <ul>
    <todo-item
      v-for="(item,index) of list"
      :key="index"
      :content="item"
      :index="index"
      @delete="handleDelete">  <!--父组件监听到子组件发布的删除指令后，触发一个handleDelete函数-->
    </todo-item>
  </ul>
</div>
<script>
  Vue.component('todo-item',{
    props:['content','index'],
    template:'<li @click="handleClick">{{content}}{{index}}</li>',
    methods:{
      handleClick:function () {
        /*只要点击list的内容，子组件就向外发布一个事件，通知父组件执行删除操作,父组件要对这个动作监听*/
        this.$emit('delete',this.index)
      }
    }
  })

  new Vue({
    el:"#root",
    data:{
      inputValue:"",
      list:[]
    },
    methods:{
      handleSubmit:function () {
        this.list.push(this.inputValue)
        this.inputValue=""
      },
      handleDelete:function (index) {
        this.list.splice(index,1)
      }
    }
  })
</script>
</body>

通过这一个例子，对vue的核心，基本用法就有了一个大致的了解，更核心的知识还是需要多看官方文档。

todolist带你熟悉vue

vue.js实现todolist

猜你喜欢