初识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"> ...
随机推荐
- Zabbix unreachable poller processes more than 75% busy
“Zabbix poller processes more than 75% busy”警报问题解决 虽然Zabbix的监控警报各种有,碰到最多的几个莫过于内存耗尽,网络不通,IO太慢还有这个“Zab ...
- [daily][netctl] netctl有线网络连接使用802.1x进行验证上网
由于企业安全管理要求,需要验证上网.验证方式是账号密码+802.1x 目前先调研了一下方案,还没有实施,大概调研结果如下: 先参考:https://jlk.fjfi.cvut.cz/arch/manp ...
- WIN10登录时找不到Administrator用户
前提:WIN才安装的系统登录时只看到admin用户看不到administrator用户 1. 按网上方法,进入[此电脑]--[管理]--[系统工具]--[本地用户和组]--[用户] 2. 双击打开Ad ...
- pyqt5-对文本样式进行操作
self.label_2 = QtWidgets.QLabel(self.centralWidget) self.label_2.setGeometry(QtCore.QRect(330, 220, ...
- 多线程-interrupt()，isInterrupted()，interrupted()（转）
Content 背景 中断 相关方法 阻塞方法 不可中断的阻塞方法 处理不支持中断的线程中断的常用方法 处理InterruptedException 待决中断 实例1 实例2 参考资料 Top 背景 ...
- C# cmd bcp 导出数据
背景需求:应用系统间数据自动同步处理,要求高效无人工干预 技术实现:C#启动cmd,通过BCP命令传入必要参数,实现数据导出 /// <summary> /// cmd下,启动应用程序命令 ...
- Activiti（生成25张表）
有两种方式,第一种是使用默认的配置文件,第二种是指定配置文件: package com.ouyan.activiti.table; import org.activiti.engine.Process ...
- Tcpdump MySQL Query
在MySQL线上环境我们一般只打开了binary log,slow log,有时我们需要查看general log呢?因为该log记录所有的请求,打开该日志肯定给磁盘造成很大压力,IO能力有所下降,所 ...
- linux 查看磁盘读写：iostat
iostat命令用来查看磁盘IO的读写情况,用法如下: 安装iostat命令 [root@mysql ~]# yum install -y sysstat [root@mysql ~]# iostat ...
- Visual Studio 10.0设置引用HalconDotNet.dll
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010435562/article/details/8858638 開始做Halcon的上位机.选用 ...