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,这样就 ...
随机推荐
- Linux下打包压缩war、解压war包和jar命令
情景:把project_a文件夹下的文件打包成project.war 1. 打包 jar -cvf project.war /project_a 说明: -c 创建war包 -v 显示过程信息 -f ...
- HDBn编解码原理 n阶高密度双极性码
/*------------------------------------------------------------------ HDB3 编码解码原理 // 转载 ---------- ...
- Programming Assignment 2: Seam Carving
编程作业二 作业链接:Seam Carving & Checklist 我的代码:SeamCarver.java 问题简介 接缝裁剪(Seam carving),是一个可以针对照片内容做正确缩 ...
- programming-languages学习笔记--第7部分
programming-languages学习笔记–第7部分 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src ...
- Linux学习总结（十七）-shell 基础知识
一 先介绍几种常用字符: 1 * 匹配任意个任意字符2 ?匹配一个任意字符3 # 注释符号,符号后的语句不被执行4 \脱意字符,后面跟带含义字符时,照原字符输出5 []匹配包含在[]之中的任意一个字符 ...
- nginx发布antd-pro项目（别人发的，未测试）
server { listen ; server_name localhost; #charset koi8-r; charset utf-; #access_log logs/host.access ...
- RSA加密算法和签名算法
RSA加密算法 RSA公钥加密体制包含如下3个算法:KeyGen(密钥生成算法),Encrypt(加密算法)以及Decrypt(解密算法). .密钥生成算法以安全常数作为输入,输出一个公钥PK,和一个 ...
- HDU 1102(Constructing Roads）（最小生成树之prim算法）
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1102 Constructing Roads Time Limit: 2000/1000 MS (Ja ...
- ts简单点
typescript 简洁使用 *做最简洁核心的记录,可以节约时间.再是提炼概括,理解归纳.便于日后查阅联想* > typescript原则之一: 对值所具有的结构进行类型检查 #### 基础类 ...
- 信息: Error parsing HTTP request header Note: further occurrences of HTTP header parsing errors will be logged at DEBUG level
四月 , :: 下午 org.apache.coyote.http11.AbstractHttp11Processor process 信息: Error parsing HTTP request h ...