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,这样就 ...
随机推荐
- C# 特性 System.ComponentModel 命名空间属性方法大全，System.ComponentModel 命名空间的特性
目录: System.ComponentModel 特性命名空间与常用类 System.ComponentModel.DataAnnotations ComponentModel - Classes ...
- OC基础数据类型-NSValue
1.NSValue:将指针等复杂的类型存储为对象 struct sct { int a; int b; }sctt; NSValue * value = [[NSValue alloc] initWi ...
- Mac appium iOS 安装命令
1. brew install node 2. npm install -g appium #或者用安装包安装 3. brew install libimobiledevice --HEAD # in ...
- apt安装mysql
使用 APT 安装 MySQL 参考官方文档 apt-get install mysql-server 这将安装MySQL服务器的包,以及客户端和数据库公共文件的包. 在安装过程中,系统会要求您为ro ...
- Salesforce和SAP HANA的元数据访问加速
Salesforce 在Jerry的其他文章曾经提到,Salesforce里运行时对象均是通过静态存储的元数据,经过Runtime engine加工而成的. Because metadata is a ...
- mac 学习笔记
1.关于launchctl http://zhengwei.name/2011/11/lanunchctl-notes/ 2.php-fpm 默认配置 php-fpm.conf :/etc/php-f ...
- IOS http(上传和下载)
HttpTool.h #import <Foundation/Foundation.h> typedef void (^HttpToolProgressBlock)(CGFloat pro ...
- oracle exp 无法导出空表
oracle exp 无法导出空表 select 'alter table '|| a.table_name ||' allocate extent;' from user_tables a wh ...
- Java集合源码 -- List列表
List概述 List是一个有序,可重复的集合,可以在List的中间插入和移除元素,根据整数索引访问元素 下图是List集合的框架图 下面是对上图的简单介绍 AbstractCollection: 提 ...
- MRC 和 ARC 混编
在targets的build phases选项下Compile Sources下选择要不使用arc编译的文件,双击它,输入 -fno-objc-arc 即可 MRC工程中也可以使用ARC的类.方法 ...