使用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 相关文章推荐
正则表达式语法
Oct 09 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
Three.JS实现三维场景
Dec 30 Javascript
ES5新增数组的实现方法
May 12 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中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
Python 元类使用说明
2009/12/18 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python中字符串与编码示例代码
2019/05/20 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
使用python计算三角形的斜边例子
2020/04/15 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
如何提高JDBC的性能
2013/04/30 面试题
GC是什么?为什么要有GC?
2013/12/08 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
采购部主管岗位职责
2014/01/01 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS