使用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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
详解vue路由
Aug 05 Javascript
利用node.js开发cli的完整步骤
Dec 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生成静态文件的多种方法分享
2012/07/17 PHP
基于PHP文件操作的详解
2013/06/05 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
python中logging包的使用总结
2018/02/28 Python
python批量修改图片大小的方法
2018/07/24 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
在django模板中实现超链接配置
2019/08/21 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
自荐信格式范文
2013/10/07 职场文书
给学校建议书范文
2014/05/13 职场文书
法律专业求职信
2014/05/24 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
街道务虚会发言材料
2014/10/20 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
React如何创建组件
2021/06/27 Javascript
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技