<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. JavaScript 引擎「V8」发布 8.0 版本,内存占用量大幅下降

    上周,JavaScript 引擎「V8」的开发团队在该项目官方网站上正式宣布推出最新的 8.0 版本.这次更新的重点主要集中在错误修复及性能改善上,正式的版本将在数周后随着谷歌 Chrome 80 稳 ...

  2. selenium webdriver 操作select

    @Test public void test() { WebDriver driver=ExplorerBase.IESetting(); driver.get("http://unique ...

  3. SpringData学习笔记一

    Spring Data : 介绍: Spring 的一个子项目.用于简化数据库访问,支持NoSQL 和 关系数据存储.其主要目标是使数据库的访问变得方便快捷. SpringData 项目所支持 NoS ...

  4. Spring boot 中发送邮件

    参考:https://blog.csdn.net/qq_39241443/article/details/81293939 添加依赖: <dependency> <groupId&g ...

  5. Spring注解@Qualifier、@Autowired、@Primary

    @Qualifier 1.当一个接口有多个实现类,且均已注入到Spring容器中了,使用@AutoWired是byType的,而这些实现类类型都相同,此时就需要使用@Qualifier明确指定使用那个 ...

  6. 关于盒模型的外边距padding和内边距margin

    边框border属性值  solid实线   dashed虚线   dotted点线   double双实线 /* 内边距 */padding:20px 30px 30px 30px;若有四个值代表  ...

  7. nginx + keepalive 实现高可用

    https://blog.csdn.net/u010020099/article/details/82116474 ! Configuration File for keepalived global ...

  8. Spring Boot + MyBatis + PostgreSql

    Maven构建项目 1.访问http://start.spring.io/ 2.选择构建工具Maven Project.Spring Boot版本1.3.6以及一些工程基本信息,点击“Switch t ...

  9. 一、log4j日志框架的理论和不同场景使用

    1.日志框架: 工作中要进行Java输出日志时,你需要一个或者多个日志框架.框架能提供对象.方法和必要的配置来发送日志信息.Java语言本身有自带的日志实现包java.util.logging.还有很 ...

  10. FFmpeg——命令笔记

    1. 获取 dshow设备列表 ffmpeg -list_devices true -f dshow -i dummy 2. 通过UDP流推ts文件: ffmpeg.exe -re -i zhen.t ...