Vue2.x案例之计划清单的实现

教程目录

• • 
    
• ​​0x00 教程内容​​
• ​​0x01 准备环境​​

• • 
    
• ​​1. 安装nvm（node与npm）​​
• ​​2. 安装并初始化vue-cli​​
  • 
    

• ​​0x02 开发Todolist​​

• • 
    
• ​​1. 启动项目​​
• ​​2. 编写代码​​
  • 
    

• ​​0x03 校验效果​​

• ​​1. 详细步骤​​

• ​​0xFF 总结​​
  • 
    

0x00 教程内容

1. 1. 
      
2. 准备环境
3. 开发Todolist
4. 校验效果
   1. 
      

0x01 准备环境

1. 安装nvm（node与npm）

a. 请参考教程：​​Node版本管理工具nvm的安装与使用（windows）​​

b. 按流程下载相对于版本的node即可，也会默认安装好对应版本的npm

2. 安装并初始化vue-cli

a. 请参考教程：​​Vue2.x最简单的两个入门例子​​

0x02 开发Todolist

1. 启动项目

a. 打开ip地址可看到启动的项目：

2. 编写代码

a. 修改vue_sny/src/App.vue文件的内容为：

<template>
  <div id="app">
  <h1 v-text="title"></h1>
  <input v-model="newItem" v-on:keyup.enter="addItem">
  <ul>
    <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
        {{item.label}}
    </li>
  </ul>
  </div>
</template>

<script>
export default {
  data:function(){
    return {
      title:'计划清单',
      items: [
        {
          label:'每天写一篇教程',
          isFinished:false
        },
        {
          label:'每天健身一小时',
          isFinished:false
        },
      ],
      newItem:''
    }
  },
  methods: {
     toggleFinish:function(item){
        item.isFinished = !item.isFinished
      },
      addItem:function(){
        console.log(this.newItem);
        this.items.push({
          label:this.newItem,
          isFinished:false
        })
        this.newItem = '';
      }
  }
}
</script>

<style>
.finished {
  text-decoration:line-through;
}
</style>

0x03 校验效果

1. 详细步骤

a. 刷新​​localhost:8080​​界面，可看到结果。

0xFF 总结

1. 1. 
      
2. 本教程主要介绍两个例子，通过对比学习，更有利于学习，其实我们vue-cli例子只是第二个例子的复杂实现而已。
3. 最近很忙，发一篇以前的写了一半教程，后期有空再回头完善。
   1. 
      

全栈工程师、市场洞察者、专栏编辑

| ​​公众号​​​ | ​​微信​​​ | ​​微博​​ | ​​简书​​ |

福利：

​​邵奈一的技术博客导航​​

​​邵奈一​​ 原创不易，如转载请标明出处。