使用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 相关文章推荐
jQuery Tools tab使用介绍
Jul 14 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
sails框架的学习指南
Dec 22 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
JavaScript实现简单的弹窗效果
May 19 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 MySQL与分页效率
2008/06/04 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP数组相关函数汇总
2015/03/24 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
课前三分钟演讲稿
2014/04/24 职场文书
大学生毕业求职信
2014/06/12 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
会计求职信怎么写
2015/03/20 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
2015年加油站工作总结
2015/05/13 职场文书
刑事上诉状范文
2015/05/22 职场文书
陈斌强事迹观后感
2015/06/17 职场文书