使用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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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/08/27 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
js取得url地址参数实例
2013/02/22 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
运动会入场词100字
2014/02/06 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
中学生评语大全
2014/04/18 职场文书
测绘工程专业求职信
2014/07/15 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
支行行长竞聘报告
2014/11/06 职场文书
校长师德表现自我评价
2015/03/04 职场文书
2019公司管理制度
2019/04/19 职场文书