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 过程,它会初始化生命周期. ...
随机推荐
- Java Web中的编码解析
在springmvc工程web.xml中配置中文编码 <!-- 配置请求过滤器,编码格式设为UTF-8,避免中文乱码--> <filter> <filter-name&g ...
- centos7 ftp 500 OOPS: cannot change directory:/var/ftp/xutong/
在设置多用户登录的时候 该指定的用户xutong对于上级目录/var/ftp 没有访问权限 修改一下上级目录的权限 chmod /var/ftp 对于ftp多用户访问的配置修改也做一个记录 以是设置F ...
- HDU 1242 Rescue 营救天使
Description Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is describe ...
- .NET中的缓存实现
软件开发中最常用的模式之一是缓存,这是一个简单但非常有效的概念,想法是重用操作结果,执行繁重的操作时,我们会将结果保存在缓存容器中,下次我们需要该结果时,我们将从缓存容器中取出它,而不是再次执行繁重的 ...
- fiddler终极教程
http://www.cnblogs.com/yoyoketang/tag/fiddler/
- Leetcode 313.超级丑数
超级丑数 编写一段程序来查找第n个超级丑数. 超级丑数是指其所有质因数都是长度为 k 的质数列表 primes 中的正整数. 示例: 输入: n = 12, primes = [2,7,13,19] ...
- hdu 2845
#include<stdio.h> #define N 200100 int f[N]; int a[N],n; int main() { int m,j,i,suma,sumb,sum ...
- bzoj 3223 文艺平衡树 splay 区间翻转
Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 17715 Solved: 7769[Submit][Status][ ...
- 一段曲折的copy路程
cp 的时候出现:-bash: /bin/cp: Argument list too longcp ./*.swf /www/img/html/xxx/action/ 解决办法:find ./ -n ...
- mysql 获取所有的数据库名字
mysql 获取所有的数据库名字 一.如果使用的是mysqli: $con = @mysqli_connect("localhost", "root", &qu ...