使用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 ui插件的使用方法代码实例
May 08 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
JQuery学习总结【二】
Dec 01 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
vue实现列表滚动的过渡动画
Jun 29 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输出1000以内质数(素数)示例
2014/02/16 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python属于跨平台语言码
2020/06/09 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
法律专业求职信
2014/05/24 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
检讨书范文2000字
2015/01/28 职场文书
山楂树之恋观后感
2015/06/11 职场文书
行政复议决定书
2015/06/24 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP