Vue小例子-todolist功能开发Vue-cli的简介与使用

101 阅读 0 评论 67 点赞

我是靠谱客的博主优雅小土豆，最近开发中收集的这篇文章主要介绍Vue小例子-todolist功能开发Vue-cli的简介与使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、最简单的todolist

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="root">
    <div>
      <input v-model="inputValue">
      <button @click="handelSubmit">提交</button>
    </div>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>

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

    })
  </script>
</body>

</html>

2、todolist组件拆分

①：局部组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="root">
    <div>
      <input v-model="inputValue">
      <button @click="handelSubmit">提交</button>
    </div>
    <ul>
      <todo-item></todo-item>
    </ul>
  </div>

  <script>
    //全局组件
    // Vue.component(
    //   'todo-item', {
    //   template: '<li>item</li>'
    // }
    // )
    //局部组件
    var TodoItem = {
      template: '<li>item</li>'
    }
    new Vue({
      el: "#root",
      components: {
        'todo-item': TodoItem
      },
      data: {
        inputValue: '',
        list: []
      },
      methods: {
        handelSubmit: function () {
          this.list.push(this.inputValue)
          this.inputValue = ''
        }
      }

    })
  </script>
</body>

</html>

②：全局组件拆分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="root">
    <div>
      <input v-model="inputValue">
      <button @click="handelSubmit">提交</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
    </ul>
  </div>

  <script>
    //全局组件
    //外部组件对内部组件（todo-item）传值，内部组件通过props接受传值
    Vue.component(
      'todo-item', {
      props: ['content'],
      template: '<li>{{content}}</li>'
    }
    )
    new Vue({
      el: "#root",
      data: {
        inputValue: '',
        list: []
      },
      methods: {
        handelSubmit: function () {
          this.list.push(this.inputValue)
          this.inputValue = ''
        }
      }

    })
  </script>
</body>

</html>

3、组件与实例的关系

①：每个组件都是vue的一个实例（任何一个vue项目都是由千千万万实例组成的）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="root">
    <div>
      <input v-model="inputValue">
      <button @click="handelSubmit">提交</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
    </ul>
  </div>

  <script>
    //全局组件
    //外部组件对内部组件（todo-item）传值，内部组件通过props接受传值
    Vue.component(
      'todo-item', {
      props: ['content'],
      template: '<li @click="handleClick">{{content}}</li>',
      methods: {
        handleClick: function () {
          alert('clicked')
        }
      }
    }
    )
    new Vue({
      el: "#root",
      data: {
        inputValue: '',
        list: []
      },
      methods: {
        handelSubmit: function () {
          this.list.push(this.inputValue)
          this.inputValue = ''
        },

      }

    })
  </script>
</body>

</html>

4、todolist的删除功能

父组件向子组件传递值（通过属性传值）

子组件向父组件传值（子组件向父组件发送emit模式，父组件监听这个子组件）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="root">
    <div>
      <input v-model="inputValue">
      <button @click="handelSubmit">提交</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelte">
      </todo-item>
    </ul>
  </div>

  <script>
    //全局组件
    //外部组件对内部组件（todo-item）传值，内部组件通过props接受传值
    Vue.component(
      'todo-item', {
      props: ['content', 'index'],
      template: '<li @click="handleClick">{{content}}</li>',
      methods: {
        handleClick: function () {
          this.$emit('delete', this.index)
        }
      }
    }
    )
    new Vue({
      el: "#root",
      data: {
        inputValue: '',
        list: []
      },
      methods: {
        handelSubmit: function () {
          this.list.push(this.inputValue)
          this.inputValue = ''
        },
        handleDelte: function (index) {
          this.list.splice(index, 1)
        }

      }

    })
  </script>
</body>

</html>