Vue框架之组件系统
1,Vue组件系统之全局组件
- 1.1Vue全局组件的在实例化调用Vue的模板中导入组件的名称
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
</div>
<script> Vue.component("global-component",{
template: `
<div><h1>{{ xueren }}</h1>
<h3>{{ xueren }}</h3>
</div>
`,
// data是模板渲染的数据,从组件中获取,data中要写return返回值
data(){
return {
xueren: "Hello xueren,i miss you really!",
}
}
});
// 实例化一个Vue对象,还是有element代表找到模板那个标签
// template是模板的渲染需要指出组件的命名,但这是要写成标签
new Vue({
el: "#app",
template: `<global-component></global-component>`
})
- 1.2Vue全局组件的在实例化不用在template中指定组件名称
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
<global-component></global-component> </div>
<script> Vue.component("global-component", {
template: `
<div>
<h3>{{ xueren }}</h3>
</div>
`,
data(){
return {
xueren: "Hello 雪人, Long time no see",
}
}
});
// 实例化一个Vue对象,第一个参数还是要找到要替换的标签
new Vue({
el: "#app",
// template:`<global-component></global-component>`
}) </script>
</body>
</html>
2,Vue全局组件之系统的复用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
<global-component></global-component>
<global-component></global-component>
<global-component></global-component>
</div>
<script> Vue.component("global-component", {
template: `
<div>
<h3>{{ xueren }}</h3>
</div>
`,
data(){
return {
xueren: "Hello 雪人, Long time no see",
}
}
});
// 实例化一个Vue对象,第一个参数还是要找到要替换的标签
new Vue({
el: "#app",
// 当复用的时候一定不要在实例化的Vue中指定组件的名称
//template:`<global-component></global-component>`
}) </script>
</body>
</html>
3,Vue组件系统之局部组件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
.header {
width: 200px;
height: 50px;
background-color: #00a9ff;
}
</style>
</head>
<body> <div id="app"> </div>
<script> let Header = {
template: `
<div class="header">
<h1>{{ xueren }}</h1>
</div>
`,
data(){
return {
xueren: "i miss you",
}
},
};
new Vue({
// 找到要替换的模板中的标签
el: "#app" ,
// 找到局部组件的标签.,并使用组件
template:`<app-header></app-header>`,
// 定义完以后在实例化的Vue中注册
components: {
"app-header": Header,
}
}) </script>
</body>
</html>
4,Vue组件入口问题
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
.header {
width: 200px;
height: 50px;
background-color: #00a9ff;
}
</style>
</head>
<body> <div id="app"> </div>
<script> let Header = {
template: `
<div>
<h1>{{ xueren }}</h1>
</div>
`,
data(){
// 2,data数据的一个单体函数,要有返回值
return {
xueren:"hello 雪人!",
}
},
};
// 2,在入口组件中注册你写的局部组件App就是一个组件的入口
let App = {
// 在组件的入口也要有template模板,模板中要用组件入口的注册名
template:`
<div>
<page-header></page-header>
<button @click="myClick">点击</button>
</div>
`,
// 注册被调用的组件的组件名称
components: {
"page-header" : Header
},
// methods是绑定点击事件执行的函数
methods: {
myClick:function(){
alert("雪雪");
}
}
};
// 1,实例化一个Vue对象3步,1:找到要渲染的标签,2:要渲染的模板,3:components注册组件的入口
new Vue({
el: "#app",
template: `<App></App>`,
components: {
// 当注册的名一样时,可以只写一个就可以
App:App,
}
})
</script>
</body>
</html>
***在选用组件调用入口的时候.可以注册多个组件,按注册的顺序去渲染页面***
5,Vue组件系统之父子组件的通信
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
.header {
width: 200px;
height: 50px;
background-color: #00a9ff;
}
</style>
</head>
<body> <div id="app"> </div>
<script> let Header = {
template: `
<div>
<h1>{{ xueren }}</h1>
<h3>{{ xiaoxue }}</h3>
</div>
`,
// props是1,预留出来用父组件去绑定的,2,是把传递过来的数据返回给模板去渲染
props:["xiaoxue"], // props是道具的意思
// data指定几个就渲染几个,没有指定的就需要父组件去传递
data(){
return {
xueren: "Hello 雪人!"
}
}
}; // 在入口组件中注册局部组件
let App = {
// 模板要写子组件中渲染的子组件的名称,还需要绑定props的变量把数据一层一层的传递
template:` <page-header v-bind:xiaoxue="fatherData"></page-header> `,
// 注册子组件的名称
components: {
"page-header": Header
},
methods:{
myClick: function(){
alert("雪人好美~~~")
}
},
// 父组件的数据传递到模板,在由绑定事件传递给子组件
data(){
return {
fatherData: "Are you ok?"
}
}
};
new Vue({
el: "#app",
template: "<App></App>",
components: {
App,
}
})
</script>
</body>
</html>
6,组件系统之子父组件的通信
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style> </style>
</head>
<body> <div id="app"> </div>
<script> let Header = {
template:`
<div>
<button @click="sonClick">点击改变字体大小</button>
</div>
`,
// 当点击这个按钮触发这个函数就会给"change-size"的值发生变化,emit就有这样的功效
// emit就会把这个值的变化传递给父组件的change-size
methods: {
sonClick: function(){
this.$emit("change-size", 0.2);
}
}
};
let App = {
template: `
<div>
<span :style="{ fontSize: postFontSize + 'em' }">鞠婧祎喜欢我</span>
<my-header v-on:change-size="fatherClick"></my-header>
</div> `,
// 注册子组件的名称
components:{
"my-header": Header
},
// 先给postFontSie设置一个初始值为1
data(){
return {
postFontSize: 1,
}
},
// 当change-size的值发生了变化,就会触发这个函数,使postFontSize的值发生变化
// 并传递给模板
methods: {
fatherClick: function(value) {
this.postFontSize += value;
console.log(this.postFontSize)
}
}
};
new Vue({
el: "#app",
// 在模板上渲染的是父组件和子组件的模板
template: `<App></App>`,
components: {
App,
}
})
</script>
</body>
</html>
7,Vue组件系统之混入
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style> </style>
</head>
<body> <div id="app">
<my-xuexue></my-xuexue>
<my-xiaoxue></my-xiaoxue>
</div>
<script> // 定义一个混入的方法
let mixs = {
methods: {
show: function(name){
console.log(name + "来了");
},
hide: function(name){
console.log(name + "去了");
}
}
};
// 定义子组件2个按钮
let myXueXue = {
template:`
<div>
<button @click= "show('雪雪')">点击显示雪雪来了</button>
<button @click="hide('雪雪')">点击显示雪雪去了</button>
</div>
`,
// 指定混入的调用方法
mixins:[mixs],
};
let myXiaoXue = {
template: `
<div>
<button @mouseenter="show('小雪')">鼠标移入显示小雪来了</button>
<button @mouseleave="hide('小雪')">鼠标移除显示小雪去了</button>
</div>
`, mixins:[mixs],
};
new Vue({
el: "#app",
// 注册2个子组件
components: {
"my-xuexue": myXueXue,
"my-xiaoxue": myXiaoXue,
}
}) </script>
</body>
</html>
8,Vue组件系统之插槽(类似于函数的位置参数)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 80px;
height: 50px;
background-color: #00a9ff;
float: left;
margin-left: 10px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body> <div id="app">
<global-component>首页</global-component>
<global-component>免费授课</global-component>
<global-component>轻课</global-component>
<global-component>智能题库</global-component>
<global-component>学位课程</global-component>
</div>
<script> Vue.component("global-component", {
// 把模板中的每一个标签拿到slot中去渲染,slot就有这个功效
template: `
<div class="box"><slot></slot></div>
`
});
new Vue({
el: "#app",
})
</script>
</body>
</html>
9,Vue组件系统之具名插槽
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 80px;
height: 50px;
background-color: #00a9ff;
float: left;
margin-left: 10px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body> <div id="app">
<global-component>
<div slot="home">首页</div>
<div slot="lightcourses">轻课</div>
<div slot="degreecourses">学位课程</div>
</global-component>
</div>
<script> // 定义一个全局的组件
Vue.component("global-component", {
// 模板会按照组件指定的顺序去渲染这个页面,slot和模板一一对应
// 有点类似于关键字参数
template: `
<div class="box">
<slot name="lightcourses"></slot>
<slot name="degreecourses"></slot>
<slot name="home"></slot>
</div>
`
});
new Vue({
el: "#app"
})
</script>
</body>
</html>
Vue框架之组件系统的更多相关文章
- WijmoJS V2019.0 Update2发布：再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
- Vue.js之组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...
- vue学习之四组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...
- Vue框架之组件与过滤器的使用
一.组件的使用 局部组件的使用 打油诗: 1.声子 2.挂子 3.用 var App = { tempalte:` <div class='app'></div>` }; ...
- Vue框架——页面组件中使用小组件
小组件在components文件夹中,页面组件在views文件夹中 一.先写小组件的vue,比如text.vue(在template设置模板渲染,style设置样式) <template> ...
- 前端vue框架 父组件与子组件之间的相互调用
子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...
- DRF框架和Vue框架阅读目录
Vue框架目录 (一)Vue框架(一)——Vue导读.Vue实例(挂载点el.数据data.过滤器filters).Vue指令(文本指令v-text.事件指令v-on.属性指令v-bind.表单指令v ...
- vue组件系统
1. 全局组件的注册 <body> <div id="app"> <!--<global-component>< ...
- Vue 及框架响应式系统原理
个人bolg地址 全局概览 Vue运行内部运行机制 总览图: 初始化及挂载 在 new Vue()之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期. ...
随机推荐
- Ubuntu配置TFTP服务器
TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂.开销不大的文件传输服务 ...
- mysql多字段组合删除重复行
DELETEFROM boll_paramWHERE id in ( SELECT a.id FROM ( SELECT id FROM boll_param WHERE (symbol, time_ ...
- 剑指Offer（书）：数组中重复的数字
题目:找出数组中重复的数字. 说明:在一个长度为n的数组里的所有数字都在0~n-1的范围内,数组中某些数字是重复的,但是不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意一个重复的数 ...
- PCB线宽与电流计算器--在线计算
http://eda365.com/article-12-1.html 计算线宽与载流量的关系,方便设计:单个人建议在有限的空间尽量将大电流线路加宽.
- ()-servlet.xml中剥离出的hibernate.cfg.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- python mock模块使用（一）
什么是mock unittest.mock是一个用于在Python中进行单元测试的库,Mock翻译过来就是模拟的意思,顾名思义这个库的主要功能是模拟一些东西. 它的主要功能是使用mock对象替代掉指定 ...
- ACboy needs your help（分组背包）
ACboy has N courses this term, and he plans to spend at most M days on study.Of course,the profit he ...
- 【dp】E. Selling Souvenirs
http://codeforces.com/contest/808/problem/E 题意:给定n个重量为可能1,2,3的纪念品和各自的价值,问在背包总重量不超过m的条件下总价值最大为多少. 其中1 ...
- X230 安装 EI Capitan 10.11.5 驱动篇
/* 键盘又换回了 美蓓亚键盘 缩写nmb 虽然比群光软 但是手感真的出色,貌似x宝没有这个代工厂的键盘(全新,非拆机,而且是标准us阵列,背光版) 有人肯定会问,博主这么纠结键盘干嘛? ...
- jQuery根据属性模糊匹配元素
1.查看带有指定属性的元素: [attribute] 例如: $("div[id]") 2.查看属性值是某个特定值的元素: [attribute=value] 例如: $(&quo ...