初识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"> ...
随机推荐
- 查看ElasticSearch服务状态和结果的URL
1,查看es集群状态 http://ip:port/_cat/health?v 2,集群节点健康查看 http://ip:port/_cat/nodes?v 3,列出集群索引 http://ip:po ...
- Zabbix unreachable poller processes more than 75% busy
“Zabbix poller processes more than 75% busy”警报问题解决 虽然Zabbix的监控警报各种有,碰到最多的几个莫过于内存耗尽,网络不通,IO太慢还有这个“Zab ...
- tornado框架&三层架构&MVC&MTV&模板语言&cookie&session
web框架的本质其实就是socket服务端再加上业务逻辑处理, 比如像是Tornado这样的框架. 有一些框架则只包含业务逻辑处理, 例如Django, bottle, flask这些框架, 它们的使 ...
- install python in wine
wget http://www.kegel.com/wine/winetricks chmod +x winetricks ./winetricks 钩选msxml3就可以了. ___________ ...
- 敏捷开发之Scrum扫盲篇（转）
现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后于他人,我也开始学习Scrum.今天主要是对我最近阅读的相关资料,根据自己的理解,用自己的语言来描述Scrum中 ...
- PostgreSQL 自动输入密码
在 Shell 命令行中,使用 postgresql-client 连接 PostgreSQL 数据库时,每次都要输入密码.如果要写 Shell Script,做一些类似于备份的自动化管理工作,每次都 ...
- Linux下Zookeeper的安装
Linux下Zookeeper的安装 安装环境: Linux:centos6.4 Jdk:1.7以上版本 Zookeeper是java开发的可以运行在windows.linux环境.需要先安装jdk. ...
- 筛选BETWEEN '2018-1-1 00:00:00' AND '2018-5-18 00:00:00'每日`status`='1'的记录总条数
最近做了一个小任务,要求是:使用MySQL #筛选BETWEEN '2018-1-1 00:00:00' AND '2018-5-18 00:00:00'每日`status`='1'的记录总条数 SE ...
- pycharm换行
Pycharm自动换行 只对当前文件有效的操作是菜单栏->View -> Active Editor -> Use Soft Wraps. 要是想对所有文件都起到效果,就要在sett ...
- 帝国cms调用栏目自定义字段(栏目简介)如何操作
开源的cms就像一个操作系统,可以满足大部分人的需求,如果你想增加一些特殊的功能,那就二次开发呗,就像APP一样.帝国cms默认的栏目是没有调用栏目自定义字段的,我们可以增加一些概述类的文字,让读者对 ...