初识Vue，简单的todolist
vue开发源码：https://vuejs.org/js/vue.js
todolist代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input v-model="inputValue" type="text" name="">
<button @click="submit">提交</button> <ul>
<todo-item
v-for="(item, index) in list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
@update="handleUpdate"
>
</todo-item>
</ul>
<input v-model="updateValue" type="text" name="">
<button @click="update">确定</button>
</div>
</body>
<script type="text/javascript"> Vue.component("todo-item", {
props:["content", "index"],
template:'<li>{{content}} <button @click="handleClick">remove</button><button @click="handleUp">update</button></li>',
methods:{
handleClick:function() {
this.$emit('delete', this.index)
},
handleUp:function() {
this.$emit('update', this.index)
}
}
}) new Vue({
el:"#app",
data: {
inputValue : '',
updateValue : '',
in:'',
list:[]
},
methods: {
submit:function() {
if(this.inputValue.trim() !== "") {
this.list.push(this.inputValue);
}
this.inputValue = ''
},
handleDelete: function(index) {
this.list.splice(index, 1);
},
handleUpdate: function(index) {
this.updateValue = this.list[index]
this.in = index;
},
update: function() {
console.log(this.in)
this.list.splice(this.in, 1, this.updateValue);
this.updateValue = ''
}
}
})
</script>
</html>
重点：子组件与父组件的值传递
初识Vue，简单的todolist的更多相关文章
- 第1章-初识Vue.js
一.初识Vue 1.1.本次我们学习的内容 常用指令:vue中最基础的内容 交互: 网络请求 组件: 是vue.js 这个框架 最核心,最精华的内容,因为vue呐,它在所有的框架中是把组件化做到了极致 ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- Vue编写的todolist小例子
Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...
- 初识vue小结
初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...
- day22 01 初识面向对象----简单的人狗大战小游戏
day22 01 初识面向对象----简单的人狗大战小游戏 假设有一个简单的小游戏:人狗大战 怎样用代码去实现呢? 首先得有任何狗这两个角色,并且每个角色都有他们自己的一些属性,比如任务名字nam ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue简单实现
vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,
- Vue.js——1.初识Vue
初识Vue.js 1. 什么是Vue.js Vue.js是前端主流框架之一,现在看招聘几乎都要求会vue 好像成了前端的代名词. Vue.js是构建界面 只关注视图层V,也就是页面的, 2. 为什么要 ...
- html vue简单
1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- 【每日一题】Squares UVA - 201 暴力+输出坑 + 读文件模板
题意 给你n*n的图,让你数正方形 题解:暴力for每个点,对于每个点从它出发顺时针走一个正方形.走完就ans[i]++; 坑:多输了一行******,然后在那里手摸样例,无限debug orz #d ...
- 生日蛋糕 POJ - 1190 搜索 数学
http://poj.org/problem?id=1190 题解:四个剪枝. #define _CRT_SECURE_NO_WARNINGS #include<cstring> #inc ...
- Mac开发博客摘录
https://blog.csdn.net/wangyouxiang/article/details/17855255 https://www.cocoacontrols.com/controls?p ...
- 双栈算术表达式求值算法 栈(Stack) - Java实现
https://mp.weixin.qq.com/s/dg8mgd6CIQ7Tui1_fQwSBA https://github.com/toywei/DataStructure/tree/maste ...
- linux系统操作笔记
tar cvf test.tar /etc gzip test.tar bzep2 test.tar 归档压缩 tar czf test.tar.gz /etc vi /etc/test ...
- json解析出来数据为空解决方法
从APP端或从其他页面post,get过来的数据一般因为数组形式.因为数组形式不易传输,所以一般都会转json后再发送.本以为发送方json_encode(),接收方json_decode(),就解决 ...
- mysql学习【第4篇】：MySQL函数和编程
狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第4篇]:MySQL函数 官方文档 : 官方文档 常用函数 分类: 数学函数 , ...
- 《mongoDB》基本操作-创建/更新/删除文档
一:基本操作 - db; 当前选择的集合(等于数据库名) > db demo - use db_name; 选择你要操作的集合 > use demo switched to db dem ...
- ansible--我的几个报错
我的几个报错: 1.远程复制失败 [root@localhost ~ ]#scp -r .ssh 192.168.10.145:/root/ root@192.168.10.145's passwor ...
- winform版的dota改键器
从网上找的源码很不齐全,自己补充了一下,有兴趣的可以看看. 首先是建立一个hook类WFChangeKey using System; using System.Reflection; using S ...