使用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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
js实现车辆管理系统
Aug 26 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
javascript实现智能手环时间显示
2020/09/18 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
深入浅析python with语句简介
2018/04/11 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
顶撞领导检讨书
2014/01/29 职场文书
司仪主持词两篇
2014/03/22 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
三字经教学反思
2014/04/26 职场文书
助残日活动总结
2014/08/27 职场文书
2014最新实习证明模板
2014/10/02 职场文书
立项申请报告范本
2015/05/15 职场文书
中秋节晚会开场白
2015/05/29 职场文书
升学宴家长答谢词
2015/09/29 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
k-means & DBSCAN 总结
2021/04/27 Python