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 过程,它会初始化生命周期. ...
随机推荐
- 查询SYS_ORG_TB树的层级
WITH N(SYS_ORG_ID,SYS_ORG_NAME,LEVEL) AS( AS LEVEL FROM SYS_ORG_TB WHERE SYS_ORG_UPID IS NULL UNION ...
- python 简易计算器（只能计算加减乘除和括号）
import re # 格式化字符串函数(消除一些错误的格式) def format_string(string): # 一系列的替换语句 string = string.replace(" ...
- Python Tornado简单的http request
这是关于chunk encoding传输以前相关传输编码的处理.没有做压缩解码的处理. import tornado.ioloop import tornado.iostream import soc ...
- java数据结构简单点
java常用的数据结构一 集合框架主要就是Collection和Map: 1.Collection包含了List和Set两大分支. (1)List是一个有序的集合,每一个元素都有它的索引.第一个元素的 ...
- flume介绍及应用
版权声明:本文为yunshuxueyuan原创文章.如需转载请标明出处: http://www.cnblogs.com/sxt-zkys/QQ技术交流群:299142667 flume的概念 1. ...
- Flask--init和run启动研究---xunfeng巡风实例篇
第一: 首先在view目录下的__init__.py文件定义好 (1) Flask实例 : app = Flask(__name__) (2) 数据库实例 Mongo = Conn.MongoDB(a ...
- php 数据库的增删改查
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>&l ...
- 什么是Etcd?
文章大部分引至:http://jolestar.com/etcd-architecture/ Etcd 按照官方介绍 Etcd is a distributed, consistent key-val ...
- 【转】关于大型网站技术演进的思考（十九）--网站静态化处理—web前端优化—上（11）
网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...
- Linux（2）：基础命令
linux 的规则: 1. linux 命令行组成结构:如下 [root@neo ~]# [用户名@主机名 当前工作路径]# ~ 用户的家目录 2. linux系统命令操作语法的格式(命令的样子): ...