<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. docker 不能访问外网

    如果之前docker能访问外网,现在不能访问, 同时宿主机可以访问外网,那就重启docker.

  2. EntityFramework Core进行读写分离最佳实践方式，了解一下（二）？

    前言 写过上一篇关于EF Core中读写分离最佳实践方式后,虽然在一定程度上改善了问题,但是在评论中有的指出更换到从数据库,那么接下来要进行插入此时又要切换到主数据库,同时有的指出是否可以进行底层无感 ...

  3. BAT面试题：请使用递归构建N叉树

    题目要求: 现在我们拥有全国的省.市.县.镇的行政信息,比如 浙江省 -> 杭州市 -> 西湖区 --> xx街道,请将这些信息构建成一棵树,根节点为全国,叶子节点为镇. 我的误解: ...

  4. Markdown语法基础

    Markdown基本语法 创建 2018-09-07 by YANHAI 标题:Setext方式 三个或更多 大标题 === 小标题 --- 大标题 小标题 标题:Atx方式 # 内容 (一级标题) ...

  5. xml错误之cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element 'mvc:annotation-driven'.

    今天从svn导入项目的时候,一个xml文件里面报错:‘cvc-complex-type.2.4.c: The matching wildcard is strict, but no declarati ...

  6. Lazy 延迟加载

    问题:最近遇到一个项目遇到一个问题(很久的项目,现阶段主要维护),程序初始化的时候比较慢,最后查原因的时候发现是因为一个类的构造方法里面有些逻辑, 解决办法:希望在使用的时候再进行加载,最后想到了延迟 ...

  7. ADT打开layout目录的xml报错java.lang.NullPointerException

    原因为使用了Android Studio的绿色JRE,必须要安装安装版JDK或者JRE,绿色版JRE放在ADT目录虽然能启动ADT但是不能启动layout目录的xml

  8. 多线程的休息室WaitSet详细介绍

    1. 所有对象都会有一个wait set,用于存放调用了该对象wait方法之后进入block状态的线程; 2. 线程被notify之后,不一定会立即执行; 3. 线程从wait set中唤醒的顺序不一 ...

  9. TOP按钮

    TOP按钮 博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色backgro ...

  10. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...