<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. SpringBoot常用注解解析

    @RestController 将返回的对象数据直接以 JSON 或 XML 形式写入 HTTP 响应(Response)中.绝大部分情况下都是直接以 JSON 形式返回给客户端,很少的情况下才会以 ...

  2. 多项式输出 (0)<P2009_1>

    多项式输出 (poly.pas/c/cpp) [问题描述] 一元n次多项式可用如下的表达式表示: 其中,称为i次项,ai称为i次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输 ...

  3. Python 使用pillow 操作图像

    文档:https://pillow.readthedocs.io/en/stable/index.html 计算机图像基础 颜色和RGBA值 计算机程序通常将图像中的颜色表示为 RGBA 值.RGBA ...

  4. 【转载】script命令使用

    二.script命令简介当你在终端或控制台上工作时,你可能想记录下自己做了些什么.这种记录可以看成是保存了终端痕迹的文档.假设你跟一些Linux管理员同时在系统上干活.或者说你让别人远程到你的服务器. ...

  5. springboot不能加载主类

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

  6. Python流程控制-3 循环控制

    循环控制,就是让程序循环运行某一段代码直到满足退出的条件,才退出循环. Python用关键字for和while来进行循环控制,但是没有其它语言的do...while语句(在Java和PHP中都有do ...

  7. LeetCode 725. Split Linked List in Parts(分隔链表)

    题意:将原链表分隔成k个链表,要求所有分隔的链表长度差异至多为1,且前面的链表长度必须大于等于后面的链表长度. 分析: (1)首先计算链表总长len (2)根据len得到分隔的链表长度要么为size, ...

  8. 尝试实现一个简单的C语言string类型

    用过`C++/Java/python/matlab/JS`等语言后,发现都能很轻松的使用string类型,而C只能这样: char str[] = "hello world"; o ...

  9. windows 批量杀进程 类似pkill

    轉:http://blog.sina.com.cn/s/blog_55fb522f0100whki.html 1.开始-运行(或win+R),输入cmd,打开命令行模式: 2.输入tasklist,可 ...

  10. matlab练习程序(龙格库塔法)

    非刚性常微分方程的数值解法通常会用四阶龙格库塔算法,其matlab函数对应ode45. 对于dy/dx = f(x,y),y(0)=y0. 其四阶龙格库塔公式如下: 对于通常计算,四阶已经够用,四阶以 ...