<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. Cordova入门系列(二)分析第一个helloworld项目 转发 https://www.cnblogs.com/lishuxue/p/6015420.html

    Cordova入门系列(二)分析第一个helloworld项目   版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的 ...

  2. python 提取pdf文字

    安装pdfminer 库 windows 下安装pdfminer3k pip install pdfminer3k Liunx 下安装pdfminer pip install pdfminer 代码 ...

  3. Luogu4655 [CEOI2017]Building Bridges

    Luogu4655 [CEOI2017]Building Bridges 有 \(n\) 根柱子依次排列,每根柱子都有一个高度.第 \(i\) 根柱子的高度为 \(h_i\) . 现在想要建造若干座桥 ...

  4. Django Template(模板)

    一.模板组成 组成:HTML代码 + 逻辑控制代码 二.逻辑控制代码的组成 1.变量 语法格式 : {{ name }} # 使用双大括号来引用变量 1.Template和Context对象(不推荐使 ...

  5. Selenium 4即将发布:每个QA都应该知道的

    阅读原文 Simon Stewart(Selenium的创始成员)在班加罗尔的Selenium大会议上正式确认了Selenium4.0的发布日期和一些主要更新.我们先来提前了解一下Selenium 4 ...

  6. 复习交换代数——Noether正规化

    目录 简介 初等启发 证明过程 几何意义 定理应用 参考资料 简介 在交换代数中有如下定理 Noether正规化引理 令$R$是一个有限生成$k$-代数整环,则存在$t_1,\ldots,t_n\in ...

  7. Java Web的简单项目部署

    目录 项目介绍 安装并配置jdk和tomcat 安装并配置mysql 使用Eclipse导出war包 部署war包到服务器 导出项目的数据库 将项目的数据库导入服务器的数据库中 修改配置 重启Tomc ...

  8. pytorch识别CIFAR10:训练ResNet-34(自定义transform,动态调整学习率,准确率提升到94.33%)

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 前面通过数据增强,ResNet-34残差网络识别CIFAR10,准确率达到了92.6. 这里对训练过程 ...

  9. CentOS 安装 Ansible 以及连接Windows server的办法

    1. CentOS机器上面按住那ansible yum install ansible 2. 安装 pywinrm  如果不安装 这个的话  ansible 会提示 没有 winrm 模块 注意需要先 ...

  10. IIS7下设置https主机名灰色无法修改

    打开iis绑定域名时,点击绑定弹出绑定框,在选择类型为“https”的时候,主机名为灰色的无法填写 解决方法: 1. 选择https,在选择相应的SSL证书,点击确定 2. 打开C:\Windows\ ...