<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. ginput函数用法

    1.ginput函数:获取指定点坐标值 2.用法说明 (1)[x,y] = ginput(n) 函数从当前的坐标轴上选择n个点,并返回这n个点相应的坐标值(x,y).这n个点可由鼠标定位.用户可以按下 ...

  2. GUI编程实战

    1.拆分窗格:JSplistPane package swing; /** * swing 实战 */ import java.awt.*; import javax.swing.*; public ...

  3. springboot 与任务

    异步任务.定时任务.邮件任务 一.异步任务 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在 处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用 多线程来 ...

  4. jdk8中的stream

    https://www.ibm.com/developerworks/cn/java/j-lo-java8streamapi/ Java 8 中的 Streams API 详解 Streams 的背景 ...

  5. python操作Excel、openpyxl 之图表，折线图、饼图、柱状图等

    一.准备 需要模块: from openpyxl.workbook import Workbook from openpyxl.chart import Series,LineChart, Refer ...

  6. jQuery的deferred对象实战应用（附：Exchar动态多条数据展示并在topic展示详细数据）

    解决三个后台请求都成功后先比较数据再处理数据的需求 今天碰到了一个问题,我需要创建一个图表,但是需要请求三个接口才能比较出指标数据,于是就看到了deferred对象 理论的补充在这里:http://w ...

  7. Vue.js 2.x笔记：状态管理Vuex（7）

    1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...

  8. 聊聊 Scala 的伴生对象及其意义

    2019-04-22 关键字:Scala 伴生对象的作用 关于 Scala 伴生对象,比教材更详细的解释. 什么是伴生对象? 教材中关于伴生对象的解释是:实现类似 Java 中那种既有实例成员又有静态 ...

  9. mac 下 clang++ 找不到头文件 stdlib.h

    因为要用 openmp库,用 clang++ 编译 c++程序,出现了如下报错: clang++ xx.cpp -o xx -fopenmp /usr/local/Cellar/llvm/7.0.0/ ...

  10. 计算指定文件的MD5值

    /// <summary> /// 计算指定文件的MD5值 /// </summary> /// <param name="fileName"> ...