使用Vue做一个简单的todo应用的三种方式的示例代码


Posted in Javascript onOctober 20, 2018

1. 引用vue.js

<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>
 <div id="root">
  <input type="text" v-model="inputValue">
  <button @click="handlerAdd">提交</button>
  <ul>
   <li 
     v-for="(item,index) of lists" 
     :key="index" 
     @click="handlerDel(index)"
    >
    {{item}}
   </li>
  </ul>
 </div>
 
 <script>
  new Vue({
   el: '#root',
   data: {
    inputValue: '',
    lists: []
   },
   methods: {
    handlerAdd: function() {
     this.lists.push(this.inputValue);
     this.inputValue = '';
    },
    handlerDel: function(index) {
     this.lists.splice(index, 1);
    }
   }
  });
 </script>
</body>
</html>

2. 全局组件注册

<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>
 <div id="root">
  <input type="text" v-model="inputValue">
  <button @click="handlerAdd">提交</button>
  <ul>
   <todo-item
    v-for="(item,index) of lists"
    :content = "item"
    :index = "index"
    :key = "index"
    @delete="handlerDel"
   >
   </todo-item>
  </ul>
 </div>
 
 <script>
  Vue.component('todoItem', {
   props: {
    content: String,
    index: Number
   },
   template: '<li @click="handlerClick">{{content}}</li>',
   methods: {
    handlerClick: function(){
     this.$emit('delete', this.index);
    }
   }

  });

  new Vue({
   el: '#root',
   data: {
    inputValue: '' ,
    lists: []
   },
   methods: {
    handlerAdd: function() {
     this.lists.push(this.inputValue);
     this.inputValue = '';
    },
    handlerDel: function(index) {
     this.lists.splice(index,1);
    }
   }
  });
 </script>
</body>
</html>

3. vue-cli脚手架

// Todo.Vue

<template>
 <div>
  <input type="text" v-model="inputValue">
  <button @click="handlerAdd">提交</button>
  <ul>
   <todo-item
    v-for="(item,index) of lists"
    :key="index"
    :content="item"
    :index="index"
    @delete="handlerDel"
   ></todo-item>
  </ul>
 </div>
</template>

<script>
import TodoItem from './components/todoItem'

export default {
 data () {
  return {
   inputValue: '',
   lists: []
  }
 },
 methods: {
  handlerAdd () {
   this.lists.push(this.inputValue)
   this.inputValue = ''
  },
  handlerDel (index) {
   this.lists.splice(index, 1)
  }
 },
 components: {
  'todo-item': TodoItem
 }
}
</script>

<style>

</style>
// TodoItem.vue

<template>
 <li @click="handlerClick" class="item">{{content}}</li>
</template>

<script>
export default {
 props: ['content', 'index'],
 methods: {
  handlerClick () {
   this.$emit('delete', this.index)
  }
 }
}
</script>

<style scoped>
 ul,li {
  list-style: none;
 }
 .item {
  color: blueviolet;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Iview Table组件中各种组件扩展的使用
Oct 20 #Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 #Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 #Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 #Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 #Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 #Javascript
vue 项目地址去掉 #的方法
Oct 20 #Javascript
You might like
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JS面向对象编程详解
2016/03/06 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
js实现漫天星星效果
2017/01/19 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python进行文件对比的方法
2018/12/24 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
三分钟英语演讲稿
2014/04/24 职场文书
转学证明范本
2015/06/19 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers