<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. mysql cmmand not found

    https://www.cnblogs.com/yangzigege/p/8337393.html

  2. Kali中文乱码问题

    上面的是用网上介绍的安装组件无法安装,老是提示最后一句:Unable to locate package ...... 后来觉得应该是因为安装Kali时在最后有个选择更新系统的一个配置上,我选择了下面 ...

  3. Win10子系统Ubuntu安装nginx (win10 安装 nginx)

    更新仓库,下载nginx: sudo apt update sudo apt install nginx 检查版本: nginx –v 启动服务: sudo  nginx sudo  service ...

  4. eclipse启动时权限不够的问题

    eclipse启动时权限不够的问题 2009年04月28日 19:19:00 tomey21 阅读数 1445   安装好后每次都要用root权限运行,比较郁闷,摸索了一下,修改一下相关目录的权限就可 ...

  5. 表格中td限宽溢出以省略号代替

    table.ms-listviewtable { table-layout:fixed; width: 100%; } table.ms-listviewtable td[role="gri ...

  6. UniGui学习之部署(06)只 有Loading...,

    procedure TUniServerModule.UniGUIServerModuleBeforeInit(Sender: TObject);begin Self.ExtRoot:='ext-6. ...

  7. 提高unigui开发效率的两个方法(02)

    1.编译时自己退出运行的程序. 在做unigui开发时,每次编译运行时,unigui的应用都会在后台运行,每次重新编译时都必须手工在任务栏里将应用退出才行,非常麻烦,可以在项目编译的参数里加上杀进程的 ...

  8. 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Java中进行Md5加密

    java文件 https://pan.baidu.com/s/1kXcif35  密码:3cjd 代码案例: package cn.itcast.estore.utils; import java.m ...

  10. delphi中的pansichar和pchar等类型的区别

    varc: Char; {Char 类型的取值范围是: #0..#255, 用十六进制表示是: #$0..#$FF}begin{用十进制方式赋值:}c := #65;ShowMessage(c); { ...