vue.js学习系列-第一篇(代码)
<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学习系列-第一篇(代码)的更多相关文章
- vue.js学习系列-第一篇
VUE系列一 简介 vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...
- Vue.js学习笔记 第一篇 数据绑定
双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...
- vue.js学习系列-第二篇
一 VUE实例生命周期钩子 1 生命周期函数 定义 生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数 1 new vue() 2 before ...
- vue.js学习（第一课）
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- Vue.js学习和第一个实例
第一个实例效果图: 1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.下载Vue.js.链接:http://pan. ...
- OpenStack学习系列-----第一篇 OpenStack介绍
刚开始接触OpenStack,被它所承诺的前景,以及现在业界对它的期望吸引(OpenStack被誉为21世纪的Linux开源社区,可以预见其的发展前景是何其广阔.).怎么说呢,我现在也暂时相信,Ope ...
- Vue.js学习笔记 第二篇 样式绑定
Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
随机推荐
- CodeSmith 二、多模板按目录树批量自动生成代码
通过调用指定目录下的所有模板,逐一按照数据表生成独立的代码文件.支持多模板调用.支持所有数据表生成或批量指定多个生成.支持自动的文件目录结构.支持代码文件格式化命名等. 背景:最近一个新项目一高兴选了 ...
- springboot 与任务
异步任务.定时任务.邮件任务 一.异步任务 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在 处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用 多线程来 ...
- Flask自定义转换器，实现路由匹配正则表达式参数
Flask框架动态路由实现参数传递和Django框架有类似之处,但是相比于Django框架,Flask实现复杂的参数就需要自己自定义转换器来实现了,而不能向Django那样直接使用正则表达式 # 路由 ...
- pytorch错误：Missing key(s) in state_dict、Unexpected key(s) in state_dict解决
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 在模型训练时加上: model = nn.DataParallel(model)cudnn.bench ...
- java的clone()方法
什么是"clone"? 在实际编程过程中,我们常常要遇到这种情况:有一个对象A,在某一时刻A中已经包含了一些有效值,此时可能 会需要一个和A完全相同新对象B,并且此后对B任何改动都 ...
- Appium简介
Appium简介 Appium is an open source test automation framework for use with native, hybrid and mobile w ...
- Oracle篇 之 多表查询
一.概念 从多个表中查询数据时,需要在表和表间建立连接,一般使用主外键建立连接 二.连接种类 1． 等连接:连接条件使用等号 非等连接:连接条件使用等号以外的其它符号 2． 内连接:根据指定的连接条件 ...
- gulp 入门使用
gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...
- 【CF715E】Complete the Permutations 第一类斯特林数
题目大意 有两个排列 \(p,q\),其中有一些位置是空的. 你要补全这两个排列. 定义 \(s(p,q)\) 为 每次交换 \(p\) 中的两个数,让 \(p=q\) 的最小操作次数. 求 \(s( ...
- CF1114D 【Flood Fill】
Solution 一看就是很水的区间DP \(dp[i][j]\)表示区间\([l,r]\)都涂成同色的代价. \(dp[i][j] = min( dp[i][j], dp[i][k] + dp[k] ...