vue入门——组件基础todolist
1. 以下是 todolist 的例子，没有用到组件：下面的3 会通过组件拆分todolist
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button v-on:click="submit">提交</button>
</div>
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data:{
inputValue: ' hello',
list:[ ]
},
methods:{
submit: function(){
// var val = this.inputValue;
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
2. 全局组件和局部组件怎么写？
全局组件：在js中直接定义 Vue.component('组件名‘,{ 业务逻辑})，然后在body中直接使用组件名，子组件可以传参，组件中使用props去接收参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<todo-item v-for="item in list"
:key="item.id"
:content="item.title"
></todo-item>
</ul>
</div>
</body>
<script>
Vue.component('todo-item',{
props: ['content'],
template: '<li>{{content}}</li>'
}); new Vue({
el: '#app',
data:{
list: [
{id: 1, title: 't1'},
{id: 2, title: 't2'},
{id: 3, title: 't3'}
]}
});
</script>
</body>
</html>
局部组件：第一步var 定义局部组件，然后在vue中注册局部组件，也就是给局部组件一个名字，html中直接通过名字调用
html:
<todo-item></todo-item> js:
//定义局部组件
var TodoItem = {
template: '<li>item</li>'
}
//在vue中注册组件
new Vue({
el: "#root",
components:{
'todo-item': TodoItem
}
...
}）
3. 将1中的todolist例子拆分成组件模式,用的全局组件，：key是v-bind的缩写
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button v-on:click="submit">提交</button>
</div>
<ul>
<!-- <li v-for="(item,index) in list" :key="index">{{item}}</li> -->
<todo-item
v-for="(item,index) in list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
//全局组件
Vue.component('todo-item',{
props: ['content'],
template: '<li>{{content}}</li>'
})
new Vue({
el: "#root",
data:{
inputValue: ' hello',
list:[ ]
},
methods:{
submit: function(){
this.list.push(this.inputValue);
this.inputValue='';
}
} })
</script>
</body>
</html>
4：组件和vue实例的关系：
每一个组件都是一个vue实例，就是说组件中也可以包含data、methods、data、计算属性computed....，同时每一个vue实例都是一个组件
5. 带删除功能的todolist组件
父子组件通信使用$emit 和v-on，子组件使用$emit触发，父组件在实例中v-on自定义事件监听
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button v-on:click="submit">提交</button>
</div>
<ul>
<!-- <li v-for="(item,index) in list" :key="index">{{item}}</li> -->
<todo-item
v-for="(item,index) in list"
:key="index"
:content="item"
:index = "index"
@delete="handDelete"
>
</todo-item>
</ul>
</div>
<script>
//全局组件
Vue.component('todo-item',{
props: ['content','index'],
template: '<li >{{content}}<button @click="handDel">remove</button></li>',
methods:{
handDel: function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el: "#root",
data:{
inputValue: ' hello',
list:[]
},
methods:{
submit: function(){
// var val = this.inputValue;
this.list.push(this.inputValue);
this.inputValue='';
},
//删除一条数据
handDelete: function(index){
this.list.splice(index,1);
}
} })
</script>
</body>
</html>
vue入门——组件基础todolist的更多相关文章
- 前端框架之Vue(9)-组件基础&vue-cli
组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue 父子组件 基础应用scrollball v-model sync
# 组件之间通信 可以通过 v-model 子组件可以通过 改变数据来改变父组件的数组 * v-model 子组件需要接受value属性,需要出发this.$emit("input&qu ...
- vue的组件基础
组件分为全局组件和局部组件. 组件的核心是template:所有的数据都为template服务. 父组件子组件传值:因为子组件是父组件的个标签,完全等同于添加动态属性: 然后子组件能够通过props: ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue.js-09：第九章 - 组件基础再探（data、props）
一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vu ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- 01慕课网《vue.js2.5入门》——基础知识
前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...
随机推荐
- JavaScript数组求和
<script> function demo(){ var d=document.getElementsByTagName("input")[0].value.spli ...
- arcengine自己做一个工具Tool放到工具箱中
// Copyright 2010 ESRI // // All rights reserved under the copyright laws of the United States // an ...
- 《ArcGIS Runtime SDK for Android开发笔记》——（15）、要素绘制Drawtools3.0工具DEMO
1.前言 移动GIS项目开发中点线面的要素绘制及编辑是最常用的操作,在ArcGIS Runtime SDK for iOS 自带AGSSketchLayer类可以帮助用户快速实现要素的绘制,图形编辑. ...
- matlab练习程序（多线段交点）
很简单的算法,这里是把每对线段都进行比较了. 还有一种似乎先通过x和y排序再进行交点判断的,不过那种方法我还没看太明白. 这里的方法如下: 1.根据线段的端点求两条直线的交点. 2.判断直线的交点是否 ...
- 在crontab中执行脚本重要事项
crontab不能成功执行shell脚本的可能原因 crond进程不存在,该进程是crontab的守护进程,它必须存在才能让crontab正常使用: 系统时间不对: 环境变量的问题:crontab执行 ...
- mvc4 坑啊
昨天下午出了个BUG.到今天上午才解决掉.就是mvc页面的属性名跟controller 中action 参数的名相同.导致action无法取得前台的值.这个问题浪费了很多时间.命名要规范. 如 页面 ...
- C#设计模式之代理模式（四）
15.7 代理模式效果与适用场景 代理模式是常用的结构型设计模式之一,它为对象的间接访问提供了一个解决方案,可以对对象的访问进行控制.代理模式类型较多,其中远程代理.虚拟代理.保护代理等在软件开发中应 ...
- vue v-on:事件
1.js代码 var box=new Vue({ el:'.box', data:{ msg:'hello' }, methods:{ /*方法放置区,函数*/ show:function(){ // ...
- python25 python的三目运算符
其他语言的三目运算符大类似: 条件 ? 条件为真返回值: 条件为假返回值 python不一样: 条件为真的返回值 if 条件 else 条件为假的返回值 或者 ...
- 读REDIS数据结构
一.DICT 主要有两个问题: 1.散列冲突,解决办法是拉链法 typedef struct dictEntry { void *key; union { void *val; uint64_t u6 ...