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 过程,它会初始化生命周期. ...
随机推荐
- django实现github第三方本地登录
1.安装 pip install social-auth-app-django 2.生成Client ID和Client Secret 3.修改setting.py INSTALLED_APPS = ...
- string和数值之间的转换
string和数值之间的转换 to_string(val) 一组重载函数,返回数值val的string表示val可以是任何算数类型. stoi(s,p,b),stol(s,p,b),stoul(s,p ...
- Java学习之File类理解
File类是io包中唯一代表磁盘文件本身的对象.File类定义了一些与平台无关的方法来操作文件,可以通过调用File类中的方法,实现创建.删除.重命名文件等.File类的对象主要用来获取文件本身的一些 ...
- python024 Python3 实例
Python3 实例 以下实例在 Python3.4.3 版本下测试通过: Python Hello World 实例 Python 数字求和 Python 平方根 Python 二次方程 Pytho ...
- zoj 1295 Reverse Text
Reverse Text Time Limit: 2 Seconds Memory Limit: 65536 KB In most languages, text is written fr ...
- php面向对象(设计模式 工厂模式)
//设计模式//单例模式//类的计划生育//让该类在外界无法造成对象//让外界可以造一个对象,做一个静态方法返回对象//在累里面可以通过静态变量控制返回对象只能有一个 //class Cat//{// ...
- 认识Linux文件系统的架构
本文主要研究一下storm的OpaquePartitionedTridentSpoutExecutor TridentTopology.newStream storm-core-1.2.2-sourc ...
- BZOJ4553 - [TJOI2016]序列
Portal Description 给出一个\(n(n\leq10^5)\)个数的数列\(\{a_n\}\)和\(m(m\leq10^5)\)个形如\((x,y)\)的变化,表示\(a_x\)可以变 ...
- windows 配置 apache的多个站点
windows 配置apache的多个站点 第一步打开apache的conf/extra/httpd-vhosts.conf,复制<VirtualHost></VirtualHost ...
- HDU 6441 费马大定理+勾股数
#include <bits/stdc++.h> #define pb push_back #define mp make_pair #define fi first #define se ...