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,这样就 ...
随机推荐
- JQuery学习---JQuery基础知识
JQuery介绍: [官网]http://jquery.com [参考API]http://jquery.cuishifeng.cn/ JQuery的低版本支持IE低版本,JQuery的2版本不太支持 ...
- ASP.NET Core 上传多文件 超简单教程
示例源码下载地址 https://qcloud.coding.net/api/project/3915794/files/4463836/download 项目地址 https://dev.tence ...
- ZT自老罗的博客 Android系统的智能指针（轻量级指针、强指针和弱指针）的实现原理分析
Android系统的智能指针(轻量级指针.强指针和弱指针)的实现原理分析 分类: Android 2011-09-23 00:59 31568人阅读 评论(42) 收藏 举报 androidclass ...
- Java 多态（接口）
有两种意义的多态,一是操作名称的多态,即有多个操作具有相同的名字,但这些操作所接收的消息类型必须不同(方法重载).另一种多态是和继承有关的多态,是指同一个操作被不同类型对象调用时可能产生不同的行为(方 ...
- Redis的数据类型及其常用命令
快速入门Redis 首先安装redis: windows下安装redis Linux下安装redis 1. 什么是redis Redis属于nosql(非关系型数据库) 关系型数据库是基于关系表的数据 ...
- scala当中的类型参数
类型参数主要就是研究scala当中的类或者scala当中的方法的泛型 1.scala当中的类的泛型 object Demo8 { def main(args: Arr ...
- css3 网格背景
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), ...
- css3-鼠标经过产品列表 图片放大 显示文字 （兼容IE9以上 不含IE9）
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
- struts2中两个action之间的跳转（struts.xml）
1. action的配置中,有一个为"redirectAction”(重定向到一个Action)和chain(就是所谓的action请求链)的action类型顺便说一下struts2的act ...
- HTML5旋转立方体
http://42.121.104.41/templets/default/test1.htm 须要源代码的留言邮箱哈~