Vue.js小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- <input type="text" v-model="msg">
<button @click="handleClick">submit</button>
<ul>
<li v-for="(item, index) in items" :key="index">{{item}}<span @click="deleteClick(index)">delete</span></li>
</ul> -->
</div>
<script>
Vue.component("item-list", {
template: `
<li>{{itemprops}}<span @click="handleDeleteSon(index)">delete</span></li>
`,
props: ["itemprops", "index"],
methods: {
handleDeleteSon(index) {
this.$emit("handleDeleteS", index);
}
}
});
var app = new Vue({
el: "#root",
data: {
msg: '',
items: []
},
template: `
<div>
<input type="text" v-model="msg">
<button @click="handleClick">submit</button>
<ul>
<item-list v-for="(item, index) in items" :key="index" :itemprops="item" :index="index" @handleDeleteS="deleteClick"></item-list>
</ul>
</div>
`,
methods: {
handleClick() {
this.items.push(this.msg);
this.msg = '';
},
deleteClick(index) {
this.items.splice(index, 1);
}
}
});
</script>
</body>
</html>
Vue.js小demo的更多相关文章
- vue.js小总结
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...
- Vue.js小案例(2)
即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...
- vue传值(小demo)
vue+element ui实现的.解释大多在代码中(代码臭且长,有错误请指正)-- 代码如下: <template> <div class="userList" ...
- Vue.js小案例(1)
数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...
- Vue.js小游戏：测试CF打狙速度
此项目只测试反应速度,即手点击鼠标的反应速度 html代码 <div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div> < ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
随机推荐
- WIN32常用
//1.设置窗口大小 MoveWindow(hWnd, , , + , + , FALSE); //放在InitInstance用于设置位置与窗口大小 //传递句柄就可以绘图 //2.双缓冲绘图模式 ...
- JavaScript学习——DOM对象
1.DOM操作 Document:整个html文件都称之为一个document文档 Element:所有的标签都是Element元素 Attribute:标签里面的属性 Text:标签中间夹着的内容为 ...
- PHP SOAP 教程
一.SoapServer 服务器 1.__construct 作用:创建 SoapServer 对象 用法:__construct ( mixed wsdl [, array options] ) 参 ...
- Windows和Linux的编译理解
Windows一般编译出来的x86的软件,就是只能在x86的系统上才能运行,同理,在x64系统上也是一样的道理. Linux利用gcc编译器编译,可以在Linux上面运行,但是想要在嵌入式系统上运行的 ...
- Linux学习总结（11）——Linux文件查找
Linux下的常用查找命令 locate whereis which find locate -i, 忽略大小写 find 根据文件名或正则表达式搜索 -name 条件限制 -a 与条 ...
- [terry笔记]oracle里的执行计划-查看
内容主要来自看书学习的笔记,如下记录了常见查询执行计划的方法. 2.2 如何查看执行计划 1.explain plan 2.dbms_xplan包 3.autotrace 4.10046事件 5.10 ...
- ASP.NET-Razor语法03
ASP.NET MVC中使用Razor语法 @{} @{ string s ="super xiao lizi"; @s; // 里面的这个@代表着在页面上输出这个s // 我记 ...
- SQL Server 性能调优2 之索引（Index）的建立
前言 索引是关系数据库中最重要的对象之中的一个,他能显著降低磁盘I/O及逻辑读取的消耗,并以此来提升 SELECT 语句的查找性能.但它是一把双刃剑.使用不当反而会影响性能:他须要额外的空间来存放这些 ...
- 【我所认知的BIOS】系列blog整理 1.23.2016.zip
这几年来,蛮多小伙伴都给我发邮件拿PDF版本号. 几年前写的文章格式什么的实在是太粗糙.近期我把全部的文章都整理了一下.事实上该想法已经早就有了,仅仅是近期才開始空暇.如今我把全部的文章整理好了以后上 ...
- 阿里云X-Forwarded-For 发现tomcat记录的日志所有来自于SLB转发的IP地址，不能获取到请求的真实IP。
1.背景:阿里云的SLB的负载均衡,在tomcat中获取不到真实IP,而是阿里的内网IP,SLB中俩台或者3台本身是局域网,这里是SLB原理,能够看看.没怎么看懂.呵呵,要细细读下. 2.须要开启to ...