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 过程,它会初始化生命周期. ...
随机推荐
- CentOS 7的docker安装初始化
1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2: 添加软件源信息 添加阿里源这样下载 ...
- ThinkPHP foreach标签
$optionvalue = array( 'MSGTYPE_TEXT'=>'文本消息', 'MSGTYPE_EVENT_SCAN'=>'扫描事件', 'MSGTYPE_EVENT_sub ...
- LeetCode01--寻找两个有序数组的中位数
''' 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums1 和 nu ...
- 【01】在 Github 上编辑代码
[01]在 Github 上编辑代码 当你使用 GitHub,看一些文件(任何的文本文件或者仓库),能看到一个顶部右侧有一个小铅笔图标.点击即可编辑文档. 完成后,按照提示点击「Propose fil ...
- 准备新的代码迁移到cnblogs
http://www.cnblogs.com/danghuijian/ http://www.cnblogs.com/danghuijian/
- STM32F407 NVIC 中断优先级管理 个人笔记
内嵌向量中断控制器:Nested Vectored Interrupt Controller (NVIC) 设置中断向量的优先级并使能. 响应优先级& 抢占优先级 抢占优先级:一个中断A还在处 ...
- python接口自动化-multipart/form-data上传图片
前言 在提交表单操作的时候,经常会遇到图片上传的操作,图片上传是一个单独的接口,本篇以禅道为例,介绍如何上传图片 上传接口 1.以禅道上提交bug为例,在选择图片时,点确定按钮,就是上传图片了 2.用 ...
- python008 Python3 字符串
var1 = 'Hello World!' var2 = "QQ603374730" Python 访问字符串中的值Python 不支持单字符类型,单字符也在Python也是作为一 ...
- hexo干货系列：（二）hexo主题下载及配置
前言 上一篇文章介绍了hexo+gitHub简易搭建属于自己的个人独立博客,但是主题是默认的landscape,略显简单,今天的教程推荐Jacman主题. Jacman是一款为Hexo打造的一款扁平化 ...
- [luoguP2801] 教主的魔法（二分 + 分块）
传送门 以为对于这类问题线段树都能解决,分块比线段树菜,结果培训完才知道线段树是一种特殊的分块方法,有的分块的题线段树不能做,看来分块还是有必要学的. 对于这个题,先分块,然后另开一个数组对于每个块内 ...