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. Django：模板template（一）

    把模板的过程.语法.标签.反向地址解析.过滤器.模板继承与HTML转义记下笔记 1.概述及demo 动态生成HTML 模板的设计实现业务逻辑(View)和显示内容(template)的分离 一个模板可 ...

  2. mysql 事务队列 写入 幂等性 重复写入

    mysql  事务队列   写入 幂等性  重复写入

  3. new malloc 区别

    http://www.cplusplus.com/reference/cstdlib/malloc/ http://www.cplusplus.com/reference/new/operator%2 ...

  4. iOS自定义结构体

    一.提要 通过以官方的CGSize为例,自定义Objective-C中的结构体,并使用. 二.CGSize 1.系统定义的CGSize结构体 struct CGSize { CGFloat width ...

  5. spark Pair RDD 基础操作

    下面是Pair RDD的API讲解 转化操作 reduceByKey:合并具有相同键的值: groupByKey:对具有相同键的值进行分组: keys:返回一个仅包含键值的RDD: values:返回 ...

  6. 转：JVM 内存初学 (堆(heap)、栈(stack)和方法区(method) )

    原文地址:JVM 内存初学 (堆(heap).栈(stack)和方法区(method) ) 博主推荐 深入浅出JVM 这本书 先了解具体的概念:JAVA的JVM的内存可分为3个区:堆(heap).栈( ...

  7. 使用反向代理的http的请求流程

    此文章主要为刚接触反向代理的小伙伴梳理请求流程,以便更好的理解反向代理是何时工作的 流程 由于浏览器是有缓存的,所以本地的hosts文件的信息也会在浏览器端缓存 当客户端发起一个新的请求(例如:输入的 ...

  8. Vue双向数据绑定原理分析（转）

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  9. ntpdata 同步时间

    ntpdate用来同步时间 [root@localhost ~]# yum install -y ntp [root@localhost ~]# ntpdate time.windows.com # ...

  10. Navigator is deprecated and has been removed from this package

    报错:'Navigator is deprecated and has been removed from this package. It can now be installed ' +     ...