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. 第1章-初识Vue.js

    一.初识Vue 1.1.本次我们学习的内容 常用指令:vue中最基础的内容 交互: 网络请求 组件: 是vue.js 这个框架 最核心,最精华的内容,因为vue呐,它在所有的框架中是把组件化做到了极致 ...

  2. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  3. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  4. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  5. 初识vue小结

    初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...

  6. day22 01 初识面向对象----简单的人狗大战小游戏

    day22 01 初识面向对象----简单的人狗大战小游戏 假设有一个简单的小游戏:人狗大战   怎样用代码去实现呢? 首先得有任何狗这两个角色,并且每个角色都有他们自己的一些属性,比如任务名字nam ...

  7. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  8. vue简单实现

    vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,

  9. Vue.js——1.初识Vue

    初识Vue.js 1. 什么是Vue.js Vue.js是前端主流框架之一,现在看招聘几乎都要求会vue 好像成了前端的代名词. Vue.js是构建界面 只关注视图层V,也就是页面的, 2. 为什么要 ...

  10. html vue简单

    1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. linux进程状态D

    运行在KVM虚拟机里的一些进程突然出了问题,这些出了问题的进程无法用kill杀掉,使用ps可以看到这些进程处于D状态: [build@kbuild-john ~]$ ps -a -ubuild -o ...

  2. Apache Sharding-Sphere

    Sharding-Sphere 正式步入 Apache 基金会孵化器 - 开源中国 https://www.oschina.net/news/101691/sharding-sphere-enter- ...

  3. [knownledge][latex] LaTex入门

    序言 最近需要写一份文档, 时间也不是特别紧. 之前一直用markdown写文档. 始终想学一下LaTex, 毕竟是学术论文界的工具. 在提及LaTex的内容之前. 事必是一定要首先提及高德纳的. 他 ...

  4. Apache Kafka - KIP-42: Add Producer and Consumer Interceptors

    kafka 0.10.0.0 released   Interceptors的概念应该来自flume 参考,http://blog.csdn.net/xiao_jun_0820/article/det ...

  5. Flash builder 、flash cs6、 as 3.0研究

    1.Flash/Actionscript3 载入资源文件方法考 http://zengrong.net/post/1107.htm 2.使用Flash Professional CS5和Flash B ...

  6. DBGridEh表尾显示合计 .....

    设置如下就可以了..... FooterRowCount  : 1 SumList--------Active:=true 双击 DBGridEh  加入所需要的列....然后在 需要合计的..... ...

  7. Joda Time - 强大易用的日期和时间库

    Joda-Time提供了一组Java类包用于处理包括ISO8601标准在内的date和time.可以利用它把JDK Date和Calendar类完全替换掉,而且仍然能够提供很好的集成. Joda-Ti ...

  8. java之获取资源文件

    背景介绍 在java程序中有时我们需要加载项目中的某些资源文件(如:config.properties之类),以便获取里面的值,这样可以避免某些需要经常修改的数据硬编码入业务程序中 实现方式 实现这种 ...

  9. 洛谷P3567 KUR-Couriers [POI2014] 主席树/莫队

    正解:主席树/莫队 解题报告: 传送门! 这题好像就是个主席树板子题的样子,,,? 毕竟,主席树的最基本的功能就是,维护一段区间内某个数字的个数 但是毕竟是刚get到主席树,然后之前做的一直是第k大, ...

  10. （4.6）mysql备份还原——深入解析二进制日志（2）binlog参数配置解析

    关键词:binlog配置,binlog参数,二进制日志配置,二进制文件参数配置 关键词:binlog缓存,binlog 刷新 0.bin写入流程 写binlog流程如下:# 数据操作buffer po ...