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基础语 ...
随机推荐
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- Java使用POI操作Excel文件
1.简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式文件读和写的功能. 2.依赖的jar包 <!-- ex ...
- 02_Redis数据类型（String、Hash）
[Redis数据类型] redis是通过key-Value来存储的,其支持的数据类型如下: 1.字符串 2.Hash 3.List 4.Set 5.SortSet(zset) 注:redis中,命令( ...
- 转：ArcGIS提取面状道路中心线（转载）
1.首先把所有的面要素merge成一个要素 2.把merge后的数据转成线数据 3.此时转换后的线数据一定是闭合的,为了防止提取中心线失败(只提取出外围轮廓)我们在随意一个道路末端使用打断工具打一个开 ...
- AS打包出现app:transformClassesAndResourcesWithProguardForRelease错误
今天打包项目的正式签名APK出现以下错误,当时挺着急用的实在没办法就只能用测试apk凑合来对付一下了 Error:Execution failed for task ':app:transformCl ...
- Java—集合框架Set
Set接口及其实现类——HashSet Set是元素无序并且不可以重复的集合,被称作集. HashSet—哈希集,是Set的一个重要实现类. Set的使用 HashSet没有像List一样的set ...
- Android SDK Manager 如何下载？
修改 "C:\Windows\System32\driver\etc\hosts" 文件,添加以下两行 203.208.40.111 dl-ssl.google.com 203.2 ...
- C 中重载一词中的“重”字读ZHONG4还是CHONG2?
in my opinion: overload: 重zhong4载override overwrite:覆盖,改写,重写.//csdn上有人问过,没有overwrite这个词 http://bbs.c ...
- [19/03/20-星期三] 常用类_Enum(枚举)类
一.概念(JDK 1.5之后才有的类) 所有的枚举(英语:enumeration) 类型隐性地继承自 java.lang.Enum.枚举实质上还是类,而每个被枚举的成员实质就是一个枚举类型的实例,他们 ...
- 【luogu P3366 最小生成树】 模板
这里是kruskal做法 当然prim也可以,至于prim和kruskal的比较: Prim在稠密图中比Kruskal优,Kruskal在稀疏图中比Prim优. #include<bits/st ...