使用vue-cli开发TodoList

Myth丶恋晨 2021-07-24 20:45 462阅读 0赞

**一 预备知识**

1 目录结构

![20191029204525193.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>目录/文件</p> </td> 
   <td> <p>说明</p> </td> 
  </tr> 
  <tr> 
   <td> <p>build</p> </td> 
   <td> <p>项目构建(webpack)相关代码</p> </td> 
  </tr> 
  <tr> 
   <td> <p>config</p> </td> 
   <td> <p>配置目录，包括端口号等。我们初学可以使用默认的。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>node_modules</p> </td> 
   <td> <p>npm 加载的项目依赖模块</p> </td> 
  </tr> 
  <tr> 
   <td> <p>src</p> </td> 
   <td> <p>这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：</p> <p>assets: 放置一些图片，如logo等。</p> <p>components: 目录里面放了一个组件文件，可以不用。</p> <p>App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。</p> <p>main.js: 项目的核心文件。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>static</p> </td> 
   <td> <p>静态资源目录，如图片、字体等。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>test</p> </td> 
   <td> <p>初始测试目录，可删除</p> </td> 
  </tr> 
  <tr> 
   <td> <p>.xxxx文件</p> </td> 
   <td> <p>这些是一些配置文件，包括语法配置，git配置等。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>index.html</p> </td> 
   <td> <p>首页入口文件，你可以添加一些 meta 信息或统计代码啥的。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>package.json</p> </td> 
   <td> <p>项目配置文件。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>README.md</p> </td> 
   <td> <p>项目的说明文档，markdown 格式</p> </td> 
  </tr> 
 </tbody> 
</table>

2 Vue组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

**二 本项目结构**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

**三 代码**

1 src\\main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import TodoList from './TodoList'
    
    
    Vue.config.productionTip = false
    
    
    /* 项目的核心文件 */
    new Vue({
      el: '#app',
      components: { TodoList },
      template: '<TodoList/>'
    })

2 src\\TodoList.vue

// 父组件
    <template>
      <div>
        <div>
          <input class="item" v-model="inputVaule" />
          <button @click="handleSubmit">提交</button>
        </div>
        <ul>
          <todo-item
            v-for="(item,index) of list"
            :key="index"
            :content="item"
            :index="index"
            @delete="handDelete"
          ></todo-item>
        </ul>
      </div>
    </template>
    
    
    <script>
    import TodoItem from "./components/TodoItem";
    export default {
      // 注册子组件组件
      components: {
        // 用todo-item标签去使用TodoItem这个组件
        "todo-item": TodoItem
      },
      data() {
        return {
          inputVaule: "",
          list: []
        };
      },
      methods: {
        handleSubmit() {
          this.list.push(this.inputVaule);
          this.inputVaule = "";
        },
        handDelete(index) {
          this.list.splice(index, 1);
        }
      }
    };
    </script>
    
    
    <style>
    </style>

3 src\\components\\TodoItem.vue

// 子组件
    <template>
      <li class="item" @click="handleDelete">{
       {content}}</li>
    </template>
    
    
    <script>
    export default {
      props:['content','index'],
      methods:{
        handleDelete(){
          this.$emit('delete',this.index)
        }
      }
    }
    </script>
    
    
    
    <style scoped>
      .item{
        color: green;
      }
    </style>

**四 效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

[20191029204525193.png]: /images/20210724/13c2f474219b416a9d21fd08c3d09efe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/b98f52ba741c448182a86059d7bd1070.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/7a6f99692f034655aa5a7852b604faab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/53ae5b14db76409f9fe3fbf90182b79a.png