<template>
  <div>
      <form @submit.prevent="addTodo">
        <input v-model="title" type="text" name="title" placeholder="请添加代办事项...">
        <input type="submit" value="添加" class="btn">
      </form>
  </div>
</template>
<script>
/* 引入npm模块 */
import uuid from 'uuid'
export default {
   name:'AddTodos',
   data() {
       return {
           title:'',
       }
   },
   methods: {
       addTodo(){
           const newTodo = {
               id:uuid.v4(),
               title:this.title,
               completed:false
           }
           console.log(newTodo);
           /* 注册事件,由父级触发 */
           this.$emit('handleAdd', newTodo)
           this.title = ''
       }
   },
}

</script>

 

VUE - 引入 npm 安装的模块 以及 uuid模块的使用的更多相关文章

  1. vue用npm安装删除模块element-ui mint-ui

    vue用npm安装删除模块element-ui mint-ui 在vue项目中先引入了element-ui,后来发现移动版的需要用mint-ui,所以需要先卸载了再安装.卸载element-ui:np ...

  2. Vue. 之 npm安装Element

    Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等.    假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...

  3. Vue. 之 npm安装 axios

    Vue. 之 npm安装 axios 使用指令: cnpm install axios 

  4. Vue.js NPM 安装方法

    由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...

  5. npm安装package.json中的模块依赖

    npm 一键安装 package.json里的依赖时有2种情况: 1.package.json不存在时 运行命令: npm init可自动创建package.json文件 2.package.json ...

  6. vue使用npm安装sass

    npm install --save-dev sass-loader style-loader css-loader npm install --save-dev extract-text-webpa ...

  7. vue1——vue引入方法,npm本地安装

    博客地址 :https://www.cnblogs.com/sandraryan/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用 ...

  8. npm安装vue

    目录 npm安装vue Vue.js 是什么 直接用script引入 安装vue 对不同构建版本的解释 安装命令行工具 (CLI) 安装cnpm 安装vue-cli 新建vue项目 运行服务 目录结构 ...

  9. vue.js 三种方式安装--npm安装

    Vue.js是一个构建数据驱动的 web 界面的渐进式框架.     Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合.     ...

随机推荐

  1. iOS项目开发日常之创建文件(协议、类、分类、扩展)

    iOS项目开发过程中,是以不断创建文件的形式进行着的. 创建得比较频繁的文件类型是: 这两个类型中创建的文件有:子类.分类.扩展.协议四种文件,如下:    这四类文件是频繁创建的,我们来看一下各自分 ...

  2. robot framework 接口post请求需要加headers

    说明:当你用RF进行post接口测试时候,那么需要加个headers=Content-Type=application/x-www-form-urlencoded,要不然会请求不成功的.

  3. [转]利用 Commons-Fileupload 实现文件上传

    转载 Java Web开发人员可以使用Apache文件上传组件来接收浏览器上传的文件,该组件由多个类共同组成,但是,对于使用该组件来编写文件上传功能的Java Web开发人员来说,只需要了解和使用其中 ...

  4. development tool

    Eclipse :        https://www.eclipse.org/downloads/ WebStorm:   http://www.jetbrains.com/webstorm/do ...

  5. springboot不能加载主类

    参考:https://www.cnblogs.com/iyyy/p/8085719.html 若为maven项目:用maven更新下项目.

  6. java记录5--线程

    ------------恢复内容开始------------ 1.什么叫程序:是一个严格有序的指令集合.程序规定了完成某一任务时,计算机所需做的各种操作,已经执行顺序. 特点:资源的独占性     执 ...

  7. LeetCode 19. Remove Nth Node From End of List(删除链表中倒数第N个节点)

    题意:删除链表中倒数第N个节点. 法一:递归.每次统计当前链表长度,如果等于N,则return head -> next,即删除倒数第N个节点:否则的话,问题转化为子问题“对head->n ...

  8. Linux centosVMware apache 限定某个目录禁止解析php、限制user_agent、php相关配置

    一.限定某个目录禁止解析php 核心配置文件内容 vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf 先创建.编辑一个php 配置 vim /u ...

  9. Day11-G - Calendar Game HDU - 1079

    Adam and Eve enter this year’s ACM International Collegiate Programming Contest. Last night, they pl ...

  10. 设计模式课程 设计模式精讲 9-2 原型模式coding

    1 课堂演练 1.1 super.toString 作用 1.2 为什么要使用克隆方法呢 2 代码解析 2.1 代码解析1(使用原型模式之前) 2.2 代码解析2(使用原型模式默认方式(浅克隆)) 2 ...