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:鼠标移入正方形的时候,蓝色小圆点跟随鼠标滚动(不许蓝色小圆点超出正方形区域),正方形里实时显示当前鼠标相对于body的坐标. <!DOCTYPE html> <html la ...
- SharePoint2010 HTTP Error 503. The service is unavailable 解决方法
1.更改系统管理员用户密码前提 因为更改系管理员用户密码会影响到 "SharePoint2010"正常运行,所在尽量不要更改系统管理员用户的密码, 必须更改密码的话,需要注意以两点 ...
- Windows漏洞利用技术概述
Windows漏洞利用技术总结 1. 前言 本文是我对漏洞利用技术的学习总结,也是自己践行QAD (Questions.Answer.Discussions)的一次实践.本文通过阅读几位大牛的文章.演 ...
- java之大文件断点续传
针对某些场景下,面对服务文件大,或者服务端服务器不稳定时使用该模块.功能代码如下: import java.io.File; import java.io.FileOutputStream; impo ...
- mysql使用mysqld_multi工具启动多实例
先给出实验环境/etc/my.cnf文件内容修改内容为:添加了[mysqld_multi]标签和多出来两个数据库的标签[mysqld3307]和[mysqld3308]配置完成后启动方法,举一例:my ...
- 作为软件技术人员建立自己的git账户并保存资料的重要性
日常生活中,当修改并保存了一个文件,所得到的就是此文件的最新版本,假若今后因某一问题需要用到原来文件,可是很多情况下,这种修改是不可逆的.你修改完之后,无法回到你修改前的样子.为了避免这种情况,有的人 ...
- 使用shell调用python中的函数
最近遇到一个需求,需要通过shell调用python中的一个函数,发现其实也挺简单的: python脚本如下: test.py: import ConfigParser config = Config ...
- hdu1215 七夕节---因子和
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1215 题目大意: 求N的因子和(不包括N本身) 解题思路: 模板传送门 #include<io ...
- javaw.exe 和java.exe的区别
1.java启动的程序是命令行程序或阻塞程序,如果该程序未执行完毕或未被关闭,则所打开的命令行将被阻塞,不能执行其它命令如dir等,可以通过Ctrl+C等方式关闭程序:2.javaw启动的程序是窗口程 ...
- GetClassLoader和GetCallerClass的使用
GetClassLoader是JAVA中用来得到ClassLoader的 JAVA中有以下几种ClassLoader. 1. Bootstrap ClassLoader - GetClassLoad ...