Vue2.5入门-2
todolist功能开发
代码
<!DOCTYPE html>
<html>
<head>
<title>vue 入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="value"/>
<button @click="add">提交</button>
</div>
<div>
<ul>
<li v-for="(item,index) of list" v-bind:key="index">{{item}}</li>
</ul>
</div>
</div>
<script>
new Vue({
el: "#root" ,//和哪一个dom节点绑定
data: {
value: null,
list: []
},
methods:{
add: function(){
console.log(123);
this.list.unshift(this.value);
this.value = '';
}
}
})
</script>
</body>
</html>
组件拆分
代码
<!DOCTYPE html>
<html>
<head>
<title>vue 入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="value"/>
<button @click="add">提交</button>
</div>
<div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item" @dele="dele"></todo-item>
</ul>
</div>
</div>
<script>
//定义一个全局组件
// Vue.component('todo-item', {
// template: '<li>{{content}}</li>'
// }) //定义一个局部组件
var TodoItem = {
//如果父组件向子组件传值，那么子组件需要定义参数
props: ['content'],
template: '<li @click="dele">{{content}}</li>',
methods: {
dele(){
//console.log(this.index);
this.$emit('dele',this.index);
}
}
}
new Vue({
el: "#root" ,//和哪一个dom节点绑定
//如果是全局组件，那么需要定义props接收参数
props: ['content'],
//如果是局部组件，需要做一个注册
components: {
'todo-item': TodoItem
},
data: {
value: null,
list: []
},
methods:{
add: function(){
console.log(123);
this.list.unshift(this.value);
this.value = '';
},
dele(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
组件和实例的关系
每一个组件就是一个vue实例
实现todolist的删除功能
Vue2.5入门-2的更多相关文章
- vue2.0入门
vue2.0 开发实践总结之入门篇 vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工 ...
- 【数据售卖平台】—— Vue2.0入门学习项目爬坑
前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...
- Vue2.5入门-1
vue如何引用和使用,实例和挂在点的介绍 <!DOCTYPE html> <html> <head> <title>vue 入门</title&g ...
- Vue2.0 入门 安装Vue-cli
因为要用到npm命令先按装node.js 具体安装如下: 一.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/2.选安装目 ...
- Vue2.5入门-3
安装和使用 全局安装vue npm install --global vue-cli 创建基于webpack模板的新项目 vue init webpack my-project 安装依赖 cd my- ...
- vue2.x入门学习
vue安装 # 最新稳定版本 $ npm install vue # 最新稳定 CSP 兼容版本 $ npm install vue@csp 引包 cd /d/vue/demo cnpm instal ...
- Vue2.5学习路线及基础知识总结。
在接触新技术不了解时,我喜欢去慕课网上看新手教程,在学习vue时,在慕课网上看了几个老师的视频,发现这挺好,讲到挺详细的,适合新手,有兴趣的可以先看一下,vue2.5入门教程. 然后在学习路上看见了一 ...
- Vue入门到TodoList练手
学习资料 慕课网 - vue2.5入门 基础语法 示例代码1 <div id="root"> <h1>hello {{msg}}</h1> &l ...
- vue
vue.js 插件 setting--> plugins 搜索vue,下载安装如果想要高亮显示*.vue文件,可以在File Types 选项里找到HTML,然后在下方手动添加*.vue,这样就 ...
随机推荐
- Google官方教程之Selling In-app Products
1.原文链接[需FQ]:http://developer.android.com/training/in-app-billing/index.html 2.平时对于英文文档都是大概读一下,现在翻译文章 ...
- Java集合框架中的快速失败（fail—fast）机制
fail-fast机制,即快速失败机制,是java集合框架中的一种错误检测机制.多线程下用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加.删除),则会抛出Concurre ...
- CRITICAL **: Couldn't acquire global lock, snapshots will not be consistent: Access denied
报错如下:** (mydumper:56288): CRITICAL **: Couldn't acquire global lock, snapshots will not be consisten ...
- [枫叶学院] Unity3d高级开发教程 工具集（一） 哈希列表——强大的自己定义数据集
在日常开发中.数据集合是我们不可缺少的重要工具之中的一个.在C#中,.Net Framework也为我们提供了种类繁多,功能多样的数据集工具.在此,我基于List<T> 和 HashTab ...
- 【[AHOI2009]同类分布】
这是一篇有些赖皮的题解 (如果不赖皮的话,bzoj上也是能卡过去的) 首先由于我这个非常\(sb\)的方法复杂度高达\(O(171^4)\),所以面对极限的\(1e18\)的数据实在是卡死了 但是这个 ...
- Odoo字段类型
转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9278620.html 一:基本字段类型 Binary:二进制类型,用于保存图片.视频.文件.附件等,在视 ...
- Qt中QScrollArea类的简单使用心得
平台:windows 64位 Qt版本:5.5.1 MinGW 32bit 根据自己目前的需求简单说下怎么在QScrollArea滚动窗口中实现多个控件的滚动显示,先看看最 ...
- Luogu_4886 快递员
Luogu_4886 快递员 一道淀粉质的题目. 先考虑最简单的算法,那便是对每个点都求一边.时间复杂度O(NM) 然后如果我们把每个点的结果对应一个高度,我们会发现.最优解是在这个对应高度形成的三维 ...
- [Luogu2622]关灯问题$||$（状压$DP$）
#\(\color{red}{\mathcal{Description}}\) \(Link\) 现有\(n\)盏灯,以及\(m\)个按钮.每个按钮可以同时控制这\(n\)盏灯--按下了第i个按钮,对 ...
- 字符型设备驱动程序-first-printf以及点亮LED灯（二）
编译这几个函数之前要学一下:Linux 的几个操作命令. 学习地址:http://edu.51cto.com/lesson/id-101824.html 重要的命令 有4个 :分别是 1.lsmod, ...