<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. SpringSecurity配置,简单梳理

    生活加油:摘一句子: “我希望自己能写这样的诗.我希望自己也是一颗星星.如果我会发光,就不必害怕黑暗.如果我自己是那么美好,那么一切恐惧就可以烟消云散.于是我开始存下了一点希望—如果我能做到,那么我就 ...

  2. win10 设置jdk环境变量

    win10环境变量较为特殊 只需要设置JAVA_HOME和PATH,设置后可以通过java -version 和 javac -version 验证查看jdk得版本号和编译版本号 具体如下图所示:

  3. postman使用get请求的url地址传参中文乱码问题

    编码之后

  4. 小白笔记:Git入门之常见命令

    安装 这里就不介绍安装了,度娘一大堆,找不到可以去找谷爹(前提是你能找到).安装好就跟着笔记进行下一步 准备工作 首先我们需要一个可以 git 的东西,所以我们需要一个文件夹和一个文件 创建文件夹 t ...

  5. Django 中的select_related函数优化查询

    参考链接: https://blog.csdn.net/secretx/article/details/43964607 在数据库有外键的时候,使用select_related()和prefech_r ...

  6. LeetCode633. Sum of Square Numbers(双指针)

    题意:给定一个非负整数c,确定是否存在a和b使得a*a+b*b=c. class Solution { typedef long long LL; public: bool judgeSquareSu ...

  7. JS 表单相关

    var title = $("#subjects option:selected").text();

  8. Django 学习之From组件

    一.Form组件介绍 Form组件可以做的几件事情: 1.用户请求数据验证 2.自动生成错误信息 3.打包用户提交的正确信息 4.如果其中有一个错误了,其他的正确这,保留上次输入的内容 4.自动创建i ...

  9. 学习redis

    https://blog.csdn.net/xiaoyiyz/article/details/60613165 https://bbs.csdn.net/topics/392277304 https: ...

  10. C++ 类构造函数 & 析构函数

    前言: 析构函数和构造函数是一对.构造函数用于创建对象,而析构函数是用来撤销对象.简单的说:一个对象出生的时候,使用构造函数,死掉的时候,使用析构函数.构造函数 和 析构函数 各有各的用途,在构造函数 ...