<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputvalue" />
<button v-on:click="clickfunction">提交</button>
<ul>
<todo-item v-bind:content="item" v-for="item in list" v-bind:index="index" @delete="testfunction"></todo-item>
</ul>
</div>
<script>
var TodoItem = {
props: ['content'],
template:"<li v-on:click='testfunction1'>{{content}}</li>",
methods:{
testfunction1: function(){
this.$emit("delete",this.index)
}
}
}
var app1 = new Vue({
el: '#app',
data: {
list:[]
},
components:{
"TodoItem":TodoItem

},
methods: {
clickfunction: function(){
this.list.push(this.inputvalue)
},
testfunction: function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>

vue.js学习系列-第一篇(代码)的更多相关文章

  1. vue.js学习系列-第一篇

    VUE系列一 简介    vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...

  2. Vue.js学习笔记 第一篇 数据绑定

    双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...

  3. vue.js学习系列-第二篇

    一 VUE实例生命周期钩子     1 生命周期函数         定义 生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数      1 new vue()      2 before ...

  4. vue.js学习（第一课）

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  5. Vue.js学习和第一个实例

    第一个实例效果图: 1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.下载Vue.js.链接:http://pan. ...

  6. OpenStack学习系列-----第一篇 OpenStack介绍

    刚开始接触OpenStack,被它所承诺的前景,以及现在业界对它的期望吸引(OpenStack被誉为21世纪的Linux开源社区,可以预见其的发展前景是何其广阔.).怎么说呢,我现在也暂时相信,Ope ...

  7. Vue.js学习笔记 第二篇 样式绑定

    Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  9. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

随机推荐

  1. 系统运行缓慢，CPU 100%，以及Full GC次数过多问题的排查思路

    前言 处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题.当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警. 本文主要针对系统运 ...

  2. iOS 使用Instruments的工具小结

    使用Instruments的工具 iOSXcodeInstrumentsInstruments是一个官方提供的强大的性能调试工具集. 1.Blank(空模板):创建一个空的模板,可以从Library库 ...

  3. open live writer 测试

    什么是Hash表 1.定义 Hash(散列/哈希),就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是,散 ...

  4. golang项目练习

    一.记账系统 1.该软件能够记录收入.支出,并能够打印收支明细表 2. 代码 package main import ( . "fmt" ) func menu() string{ ...

  5. Spring Bean's life

    In contrast, the lifecycle of a bean in a Spring container is more elaborate. It’simportant to under ...

  6. Vue js 的生命周期（看了就懂）

    转自: https://blog.csdn.net/qq_24073885/article/details/60143856 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 首先先看看官网的图, ...

  7. 关于Vue修改默认的build文件存放的dist路径

    原文地址:http://www.cnblogs.com/JimmyBright/p/7681086.html Vue默认build路径是项目的dist目录下,有时候我们可能希望build之后的文件自动 ...

  8. JS在一个数组中查找某个用户输入的值,返回对应值所在索引值

    方法有很多种 第一:直接循环,判断输出 第二:使用indexOf 正常来说,为了增加工作效率一般会选择indexOf,但是indexOf存在兼容性问题,因此最完善的写法如下 function inde ...

  9. [AH2017/HNOI2017]大佬

    题目描述 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语. 你作为一个 OIER,面对这样的事情非常不开心,于 ...

  10. python 用嵌套列表做矩阵加法

    写一个函数,接收两个由嵌套列表模拟成的矩阵,返回一个嵌套列表作为计算结果,要求运行效果如下: >>> matrix1 = [[1, 1], [-3, 4]] >>> ...