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 ...
随机推荐
- LeetCode12.整数转罗马数字
给定一个整数,将其转为罗马数字.输入确保在 1 到 3999 的范围内. 示例 1: 输入: 3 输出: "III" 示例 2: 输入: 4 输出: "IV" ...
- jQuery-点击查看联系方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ps 证件照（1，2寸）
制作证件照 9*9打印 1,1寸 图片裁剪 2, 2寸 图片裁剪 3,将裁剪完成后的图片选择添加画布 Alt Ctrl c 将高和宽各加20px ,背景选择白色 4,将得到的带有白色 ...
- Vue系列之 => 动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- workerman 7272端口被占用
1/问题:workerman 7272端口被占用 2/策略: 1.查找被占用的端口 netstat -tln netstat -tln | grep 8083 netstat -tln 查看端口使用情 ...
- html5-样式的三种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Robotframework 3- 安装
1. 安装, python3 安装好后,在cmd中运行 pip install robotframework # Install the latest version (does not upgrad ...
- Teacher Bo (时间复杂度 + 暴力)
如果你仔细看就会发现有一个数据很重要那就是点的范围,那么这样一来最多只有2 * maxn的不同曼哈顿距离了,这样一看只要暴力一下就可以过了. #include<bits/stdc++.h> ...
- 【Hadoop学习之九】MapReduce案例分析一-天气
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 找出每个月气温最高的2天 1949 ...
- linux下卸载mysql（rpm）
linux下卸载mysql 查看是否安装了mysql的组件 rpm –qa |grep –I mysql 卸载前关闭mysql服务 service mysql status service mysql ...