使用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 获取页面元素的位置的代码
Sep 25 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
初识Node.js
Sep 03 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
修改vue+webpack run build的路径方法
Sep 01 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
实例讲解React 组件
Jul 07 Javascript
微信小程序实现电影App导航和轮播
Nov 30 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实现链结人气统计
2006/10/09 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
简单谈谈python的反射机制
2016/06/28 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
餐饮收银员岗位职责
2014/02/07 职场文书
群众路线领导对照材料
2014/08/23 职场文书
冰峪沟导游词
2015/02/09 职场文书
父亲去世追悼词
2015/06/23 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL