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"& ...
随机推荐
- ThinkPHP5.0框架开发--第8章 TP5.0 模型
ThinkPHP5.0框架开发--第8章 TP5.0 模型 第8章 TP5.0 模型 ================================================= 今日学习 1. ...
- 判断一个整数是否是回文数C++实现 leetcode系列（九）
判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向 ...
- cuda windows运行时间限制
GTX1080的卡,8G的显存,写cuda时申请了2G的显存就莫名其妙的抛异常,昨天找了一天也没找出bug,去stackoverflow上问了下才知道是windows的事,需要修改注册表.问题链接 - ...
- HDU 1506 Largest Rectangle in a Histogram【DP】
题意:坐标轴上有连续的n个底均为1,高为h[i]的矩形,求能够构成的最大矩形的面积. 学习的别人的代码 @_@ 看底的坐标怎么找的看了好一会儿--- 记l[i]为矩形的底的左边的坐标,就将它一直向左扩 ...
- XShell与虚拟机连接的IP问题
这几天在Xshell连接虚拟机这个问题上头疼了好长时间,原因是我在虚拟机内的eth0网卡没有分配IP地址,从而导致无法连接XShell,今天解决了这个问题,做一下记录. 首先我使用的是微软的Hyper ...
- lua中调用C++函数
lua中调用C++函数 我们产品中提供了很多lua-C API给用户在lua中调用,之前一直没用深究其实现原理,只是根据已有的代码在编码.显然这不是一个好的习惯,没用达到知其所以然的目的. 一.基本原 ...
- ZBrush中Z球（ZSphere和ZSphereⅡ）
ZSphere可以让用户使用干净的拓扑结构快速建立一个基础网格,然后将其塑造成任何形状.ZSphere的强大在于它非常简单,用户可以从一个单一的ZSphere开始,然后轻松地在其上面增加新的ZSphe ...
- 3ds Max绘制青花瓷茶壶
1.在桌面找到3DMAX软件,左键双击,启动程序: 2.在命令案板中,找到几何体,茶壶,在顶视图绘制一个茶壶: 3.在百度图片中搜索,查找“青花瓷”,找到一个自己喜欢的精美图案,截图保存备用: 4.在 ...
- Visual Studio中C++工程的环境配置方法
在Visual Studio的C++工程设置 1.添加工程的头文件目录:工程---属性---配置属性---c/c++---常规---附加包含目录. 2.添加文件引用的lib静态库路径:工程---属性- ...
- C语言基础 (3) C语言介绍
01回顾 02 语言介绍 语言是人和人交流,C语言是人和机器交流. 03_为什么学C语言 04_第一个C代码编译运行 #include <stdio.h> int main() { // ...