初识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"> ...
随机推荐
- OpenGL开发学习指南二（glfw+glad）
版权声明:本文为博主原创文章,未经博主允许不得转载.blog.liujunliang.com.cn https://blog.csdn.net/qq_33747722/article/details/ ...
- c# 字符串转为数字
C#判断输入是否数字 /// <summary> /// 判断输入是否数字 /// </summary> /// <param name="num"& ...
- Java与面向对象之随感(1)
大一下学期上完了c++课程,当时自我感觉很良好,认为对面向对象编程已经是身经百战了,但是上了院里HuangYu老师的Java课之后,才发现自己对于面向对象的编程风格的理解只在皮毛,着实惭愧不已. 假设 ...
- Flink - Scheduler
Job资源分配的过程, 在submitJob中,会生成ExecutionGraph 最终调用到, executionGraph.scheduleForExecution(scheduler) 接着,E ...
- spring相关的maven依赖
<properties> <springframework.version>5.0.4.RELEASE</springframework.version> < ...
- java 随机抽取案例，不重复抽取
以学生类为例,先准备一个Student类 package cn.sasa.demo1; public class Student { private int id; private String na ...
- Java中String类两种实例化的区别（转）
原文:http://blog.csdn.net/wangdajiao/article/details/52087302 一.String类的第一种方式 1.直接赋值 例:String str = &q ...
- CUDNN安装
在英伟达官网下载后解压,然后: cd cuda sudo cp lib64/* /usr/local/cuda/lib64/ sudo cp include/* /usr/local/cuda/inc ...
- 云serverlinux又一次挂载指定文件夹（非扩充）
版权声明:本文为博主原创文章.转载请注明出处. https://blog.csdn.net/liuensong/article/details/27548771 新买的香港云server,系统仅仅能在 ...
- chrome版本与对应的谷歌驱动（chromedriver）
chrome版本与对应的谷歌驱动(chromedriver) 1.下载chromedriver:http://chromedriver.storage.googleapis.com/index.htm ...