使用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中字符串拼接需注意的问题
Jul 13 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
vue实现树状表格效果
Dec 29 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后退一页表单内容保存实现方法
2012/06/17 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
怎么清空javascript数组
2013/05/11 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python中断多重循环的思路总结
2019/10/04 Python
python设置环境变量的作用整理
2020/02/17 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
会计专业应届生自荐信
2014/06/28 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
宣传稿格式范文
2015/07/23 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
MySQL中连接查询和子查询的问题
2021/09/04 MySQL