vue学习【第五篇】：Vue组件
什么是组件
- 每一个组件都是一个vue实例
- 每个组件均具有自身的模板template，根组件的模板就是挂载点
- 每个组件模板只能拥有一个根标签
- 子组件的数据具有作用域，以达到组件的复用
根组件
<div id="app">
<h1>{{ msg }}</h1>
</div>
<script type="text/javascript">
// 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
// 每个组件组件均拥有模板,template
var app = new Vue({
// 根组件的模板就是挂载点，不需要自定义
el: "#app",
data : {
msg: "根组件"
},
// 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
// 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
template: "<div>显式模板</div>"
})
// app.$template
</script>
局部组件
<body>
<div id="app">
<abc></abc>
<abc></abc>
<abc></abc>
</div>
<hr>
<div id="main">
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 局部组件
var localTag = {
// 子组件的数据具有作用域，以达到组件的复用, 每一个复用的组件具有自身独立的一套数据
data: function () {
return { // 返回值是一个数据字典(一套数据)
count: 0
}
},
template: "<div @click='fn'>点击{{ count }}次</div>",
methods: {
fn: function () {
this.count += 1;
}
}
} // app根组件
new Vue({
el: "#app",
// 注册
components: {
'abc': localTag
}
})
// main根组件
new Vue({
el: "#main",
components: {
// localTag js中键值一样可以简写，只写一个就行 这样写比较装十三，一般不知道js标识符于css/html标识符的相互转换的可能不知道
'local-tag': localTag
}
})
</script>
全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<global-tag></global-tag>
</div>
<div id="main">
<global-tag></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建全局组件
Vue.component('global-tag', {
template: "<div @click='fn'>全局组件点击了 {{ count }} 次</div>",
data: function () {
return {
count: 0
}
},
methods: {
fn: function () {
this.count++;
}
}
}); new Vue({
el: "#app",
});
new Vue({
el: "#main",
});
</script>
</html>
父组件传递数据给子组件
通过绑定属性的方式进行数据传递
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件通信父到子</title>
</head>
<body>
<div id="app">
<input type="text" v-model="sup_data"> <global-tag :abcde="sup_msg" :sup_data="sup_data"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建全局组件
Vue.component('global-tag', {
props: ['abcde', 'sup_data'],
template: "<div @click='fn'>{{ abcde }}</div>",
data: function () {
return { }
},
methods: {
fn: function () {
alert(this.sup_data)
}
}
});
// 将父组件的信息传递给子组件
// 采用属性绑定的方式: 1,父级提供数据 2.绑定给子组件的自定义属性 3.子组件通过props的数组拿到自定义属性从而拿到数据
new Vue({
el: "#app",
data: {
sup_msg: "父级的msg",
sup_data: ""
}
});
</script>
</html>
子组件传递数据给父组件
通过发送事件请求的方式进行数据传递
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件通信子到父</title>
</head>
<body>
<div id="app">
<!-- abc为子组件的自定义事件,该事件的含义要在子组件内容声明规定 -->
<global-tag @abc="action"></global-tag>
<global-tag @abc="action"></global-tag>
{{ sup_info }}
</div> </body>
<script src="js/vue.js"></script>
<script>
// 创建全局组件
Vue.component('global-tag', {
template: "<div><input v-model='info'><p @click='sendMsg'>子组件</p></div>",
data: function () {
return {
info: "",
msg: "子组件的信息"
}
},
methods: {
sendMsg: function () {
// alert(123)
// 激活自定义事件 abc
this.$emit('abc', this.msg, this.info)
}, }
});
// 将子组件的信息传递给父组件
// 采用发生事件的方式:
// 1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
// 2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
// 3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据
new Vue({
el: "#app",
data: {
sup_info: ""
},
methods: {
action: function (msg, info) {
alert(msg)
this.sup_info = info
}
}
});
</script>
</html>
组件实现留言板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style>
ul {
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
display: block;
height: 21px;
}
p {
margin: 0;
color: orange;
float: left;
}
span {
color: red;
float: right;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<button @click="btnClick">留言</button>
<hr>
<ul>
<!-- 如果每一个渲染的列表项是一个相对复杂的结构, 该复杂的结构可以封装成组件 -->
<li v-for="(v, i) in list">
<global-tag :value="v" :index="i" @delete="delAction"></global-tag>
</li>
</ul>
<!--<ul>-->
<!--<li v-for="(v, i) in list2">-->
<!--<global-tag :value="v" :index="i" @delete="delAction"></global-tag>-->
<!--</li>-->
<!--</ul>-->
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "",
list: [],
list2: []
},
methods: {
btnClick: function () {
if (this.msg) {
this.list.push(this.msg);
this.msg = "";
}
},
delAction: function (index) {
this.list.splice(index, 1)
}
}
}); Vue.component('global-tag', {
props: ['value', 'index'],
template: "<a href='javascript:void(0)'><p>{{ value }}</p><span @click='sendDel'>x</span></a>",
methods: {
sendDel: function () {
this.$emit('delete', this.index)
}
}
});
</script>
</html>
vue学习【第五篇】：Vue组件的更多相关文章
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- Vue学习【第一篇】：Vue初识与指令
什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...
- Vue学习之全局和私有组件小结（七）
一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...
- vue学习笔记(五)：对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
- vue学习-day03（动画，组件）
目录: 1.品牌列表-从数据库获取列表 2.品牌列表-完成添加功能 3.品牌列表-完成删除功能 4.品牌列表-全局配置数据接口的根域名 5.品牌列表-全局配置emulateJS ...
- Vue学习(2)---v-指令和组件
Vue中的指令 Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute) 一个v-bind的例子 <div id="app" v-bind ...
- vue学习(十五) 过滤器简单实用
vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示 //过滤器调用时候的格式 {{ name ...
随机推荐
- Oracle / PLSQL函数 - LENGTH和LENGTHB
1.LENGTH( string1 ) 2.LENGTHB( string1 ) 在oracle中,这两个函数都有差不多意思,最大的区别在于:length 求得是字符长度,lengthb求得是字节长度 ...
- uvm设计分析——tlm
tlm模块,用来在不同模块之间实现实时通信,主要基于两个定义在通信双方的port类来实现. 两个port之间,通过connect函数,来拿到双方的class指针,进而调用对方的function. 但是 ...
- QString和char*互转
1. QString转为char * // QString转QByteArray QByteArray sr = strQ.toLocal8Bit(); int len = sr.length(); ...
- linux命令-查找所有文件中包含某个字符串
查找目录下的所有文件中是否含有某个字符串 find .|xargs grep -ri "IBM" 查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名 find .|xar ...
- html5-新布局元素header，footer
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 【Redis学习之八】Redis集群：主从复制
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 redis-2.8.18 Redis集群分类: 主从复制 R ...
- 查询和修改mysql最大连接数的方法
查询和修改mysql最大连接数的方法切换到mysql库里查询show variables like 'max_connections';show global status like 'Max_use ...
- Codeforce 791A - Bear and Big Brother
Bear Limak wants to become the largest of bears, or at least to become larger than his brother Bob. ...
- Lonsdor K518ISE free update news on what makes and year can work
Lonsdor K518ISE engineers recently tested a number of cars and verified working great, below are tes ...
- django项目----函数和方法的区别
一.函数和方法的区别 1.函数要手动传self,方法不用传 2.如果是一个函数,用类名去调用,如果是一个方法,用对象去调用 举例说明: class Foo(object): def __init__( ...