使用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 相关文章推荐
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
node跨域请求方法小结
Aug 25 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JavaScript中的null和undefined用法解析
Sep 30 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 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文件的实现方法
2007/03/19 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
vue-ajax小封装实例
2017/09/18 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
基于Python函数和变量名解析
2019/07/19 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
社团活动总结
2014/04/28 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
小学毕业教师寄语
2019/06/21 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
图解上海144收音机
2021/04/22 无线电