使用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利用初始化数据装配模版的实现代码
Nov 17 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python实现登录接口的示例代码
2017/07/21 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
校园之星获奖感言
2014/01/29 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
倡议书的写法
2014/08/30 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
工作表扬信范文
2015/01/17 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL