使用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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
javaScript基础详解
Jan 19 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
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/06/07 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Angular.JS中的this指向详解
2017/05/17 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Python数据结构之翻转链表
2017/02/25 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
《灯光》教学反思
2014/02/08 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
工作会议通知
2015/04/15 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
使用JS实现简易计算器
2021/06/14 Javascript