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,这样就 ...
随机推荐
- 火狐浏览器对svg支持的一点不足
项目中要用svg实现一个如下图所示的风机扇叶转动效果 当用chrome浏览器打开,动画显示正常.用火狐浏览器打开扇叶静止不动,代码如下: <svg xmlns:cge="http:// ...
- Salesforce和SAP Netweaver里数据库表的元数据设计
从Salesforce官网可以了解到Salesforce的force.com平台里数据库表的设计:https://developer.salesforce.com/page/Multi_Tenant_ ...
- Asp.net & Aspose.cells 导入
Workbook workBook = new Workbook(this.fuFile.FileContent); Aspose.Cells.Worksheet sheet = workBook.W ...
- vue开发知识点汇总
网址: https://www.tuicool.com/articles/Zb2Qre2;
- jq实现拖拽
$("body").delegate( ".msg-layer",{ mousedown: function (e) { var el = $(".m ...
- JAVA中正则表达式学习总结
一.JAVA中正则表达式相关的类 1. java.util.regex.Pattern 该类用于编译模式,模式可以理解为一个正则表达式,比如:a*b. 用法如下: // 创建模式 Pattern p ...
- Sublime Text 3中设置不记住上次打开的文件
转自:https://blog.csdn.net/nicholaszao/article/details/79575251 在”User/Preferences.sublime-settings”配置 ...
- eclipse删除的文件如何恢复。
1.如果不小心删除了单个文件或者文件夹. 鼠标点击上级目录 Ctrl+z就可以恢复了. 如果没有恢复,就右击项目,选择Resore from Local History 然后选择你所删除的文件,选择恢 ...
- oracle 子查询的几个种类
1.where型子查询: select cat_id,good_id,good_name from goods where good_id in (selct max(good_id) from go ...
- Oracle 11g R2 RAC with ASM存储迁移--Rman copy&ASM Rebalance（一）
ASM GROUP-Rman copy迁移 0x00--环境介绍 VMware版本:VMware12pro 主机操作系统:RHEL6.5_64 共享存储使用VMWARE创建共享磁盘文件 数据库版本:O ...