vue注册和简单使用
组件的出现就是为了解决页面布局等等一些列的问题。
vue中的组件分为两种，全局组件和局部组件。
一 、 注册全局组件
通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
<script>
// Vue注册全局组件直接渲染使用
Vue.component("global-component", {
template: `
<div>
<h1>{{name}}</h1>
<h3>{{name}}</h3>
</div>`, data() {
return {
name: "hello word"
}
}
},
); // 第二种 查找template
new Vue({
el: '#d1',
}) </script>
全局组件简单示例
2. 第二种展示方法
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="d1"> </div> <script>
// Vue注册全局组件直接渲染使用
Vue.component("global-component", {
template: `
<div>
<h1>{{name}}</h1>
<h3>{{name}}</h3>
</div>`, data() {
return {
name: "hello word"
}
}
},
); // 第二种 查找template
new Vue({
el: '#d1',
template: "<global-component></global-component>"
}) </script> <!-- 实例二 -->
<div id="components-demo">
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter', {
data(){
return {
count: 0
}
},
template: '<button v-on:click="count++">你点击了 {{ count }} 次.</button>'
}) new Vue({el: '#components-demo'})
</script> </body>
</html>
二 、 组件的复用性
每个实例维护自己的一份独立的数据。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="vue.js"></script>
<title>标题</title>
</head>
<body> <div id="d1">
<global-component></global-component>
<global-component></global-component>
<global-component></global-component>
</div> <script>
// Vue注册全局组件直接渲染使用
Vue.component("global-component", {
template: `
<div>
<h3>{{name}}</h3>
<h6>{{name}}</h6>
</div>`, data() {
return {
name: "hello word"
}
}
},
); // 第二种 查找template
new Vue({el: '#d1', }) </script> <!-- 实例二 -->
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter', {
data(){
return {
count: 0
}
},
template: '<button v-on:click="count++">你点击了 {{ count }} 次.</button>'
}); new Vue({el: '#components-demo'})
</script> </body>
</html>
组件复用性
注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
data（）{ }
data 必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
页面显示
三 、局部组件注册和使用
1.全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
全局组件适中是存在的，除非程序结束，如果组件越来越大，那么程序所占用的空间和消耗的性能就会更大。
所以我们需要局部组件。不用的时候，被垃圾回收。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="d1">
<!--局部组件使用 第一种展示 以DOM去展示 -->
<App></App>
</div> <script>
// 创建局部组件
let Header = {
template: `
<div>
<h1>{{name}}</h1>
</div>
`,
data() {
return {
name: 'hello word'
}
},
};
//声明一个Vue局部组件的入口
// 所有组件都可以统一 一个接口
let App = {
template: `
<div>
<app-header></app-header>
</div>
`,
components: {
'app-header': Header //所以的子组件都可以注册到这接口
// 、、、、、 其他子组件等等
}
};
//实例化一个Vue 注册 入口局部组件
new Vue({
el: "#d1",
// template: `<App></App>`,
// 第二种方法 就是作为根组件去展示
components: {
App, //把入口组件注册下 不用注册所有的组件了
},
})
</script> </body>
</html>
组件的注册和使用
注意：在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：
- 用在模板中的自定义元素的名称
- 包含了这个组件选项的变量名
2.在模块中系统中局部注册
如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。
然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA' |
现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
四 父子组件的通讯
1.props
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
porps:[数组 or object]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
</head>
<body>
<div id="app"></div> <script>
// 创建一个局部组件
let Header = {
template: `<div>
<h2>{{ greeting }}</h2>
<h3>{{ fData }}</h3>
</div>
`,
props: ['fData'], // 相当于相应复制一份数据用来子父之间数据交流
data() {
return {
greeting: 'Hello, World'
}
},
}; // 在入口组件中注册你写的局部组件
let App = {
template: `
<div>
<page-header v-bind:fData="fatherData"></page-header>
</div>
`,
// 绑定一个属性 对应父组件的 数据 通过在子组件 porps 设置的的 fData 来响应式获得父组件的数据
components: {
'page-header': Header,
}, data(){
return {
fatherData: "我是父组件中的数据"
}
}
}; new Vue({
el: '#app',
// 在Vue实例中注册你的所有组件的入口
template: `<App></App>`,
components: {
App,
}
})
</script> </body>
</html>
porps
2..vm.$emit( eventName, […args] )
参数：
{string} eventName[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。
实例：只配合一个事件名使用 $emit：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="d1">
<welcome-button v-on:welcome="sayHi"></welcome-button>
<!-- 展示元素 -->
</div> <script> Vue.component('welcome-button', {
template: `<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>`
// 要生成元素的样式 绑定触发welcome welcome的value是sayHi sayHi的对应的函数的 弹窗
}); new Vue({
el: '#d1',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})
</script> </body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="d1">
<welcome-button v-on:welcome="sayHi"></welcome-button>
<!-- 展示元素 -->
</div> <script> Vue.component('welcome-button', {
template: `<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>`
// 要生成元素的样式 绑定触发welcome welcome的value是sayHi sayHi的对应的函数的 弹窗
}); new Vue({
el: '#d1',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})
</script> </body>
</html>
$emit之弹窗示例
实例：配合额外的参数使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="d1"> </div> <script>
// 创建局部组件
let Header = {
template: `
<div>
<button @click="sonClick">点击变大</button>
</div>>
`,
// 给按钮点击绑定上sonClick
methods: {
sonClick: function () {
this.$emit('FatherSize', 0.1) // 触发FatherSize，传参0.1
}
}
};
//创建一个父组件
let App = {
template: `
<div>
<span :style="{fontSize:postFontSize + 'em'}">我是父组件，我要变大</span>
<my-header v-on:FatherSize="fatherClick"></my-header>
</div>
`,
components: {
"my-header": Header // 注册子组件
},
data() {
return {
postFontSize: 1, // 初始数据是1
}
},
methods: {
fatherClick: function (value) {
// fatherClick 对应的方法是 默认初始数据 + 参数
this.postFontSize += value }
}
};
//实例化一个Vue 注册 入口局部组件
new Vue({
el: "#d1",
template: `<App></App>`,
components: {
App,
},
})
</script> </body>
</html>
$emit 传参之 字体变大
五 、混入：混入可以提高代码的重用性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="vue.js"></script>
<title>标题</title>
</head>
<body> <div id="d1">
<my-xiaoming></my-xiaoming>
<my-xiaohong></my-xiaohong>
</div> <script>
// 当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。
// 组件 1和 2 都是执行show和hide方法 那我就定义mixins 混合使用这个函数
let mixs = { // 定义一个混入对象
methods: {
show: function (name) {
console.log(name + '来了');
},
hide: function (name) {
console.log(name + '去了');
}
}
}; // 声明第一个使用混入的组件
let name1 = {
template: `<div>
<button @click="show('小明')">点击显示小明来了</button>
<button @click="hide('小明')">点击显示小明走了</button>
</div>`,
mixins: [mixs],
}; //声明第二个使用混入的组件
let name2 = {
template: `<div>
<button @mouseenter="show('小红')">鼠标移入显示小红来了</button>
<button @mouseenter="hide('小红')">鼠标移入显示小红走了</button>
</div>`,
mixins: [mixs],
}; //声明一个Vue实例
new Vue({
el: "#d1",
components: {
"my-xiaoming": name1, // name1组件注册
"my-xiaohong": name2, // name2组件注册
}
}) </script> </body>
</html>
混入
六 、 插槽
Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。
1.插槽
有时候需要给组件传递一些数据，这时候可以使用插槽
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
margin-left: 5px;
}
</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", {
template: `
<div class="box"><slot></slot></div>
`
});
//
new Vue({
el: "#app",
})
</script>
</body>
</html>
插槽
当组件渲染的时候，这个 <slot> 元素将会被替换为“首页”、"免费课程"、、等等 你需要曹汝的数据。插槽内可以包含任何模板代码，包括 HTML
2.具名插槽
有些时候我们需要多个插槽 并且需要按照自己的顺序展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="app">
<global-component>
<div slot="home">首页</div>
<div slot="Qing">轻课</div>
<div slot="Ke">课程</div>
</global-component> </div>
<script>
Vue.component("global-component", {
template: `
<div >
<slot name="Qing"></slot>
<slot name="Ke"></slot>
<slot name="home"></slot>
</div>
`
}); // 页面展示顺序 是按照template中的顺序 插入数据 按照自己的顺序展示
// 轻课
// 课程
// 首页 new Vue({
el: "#app",
})
</script>
</body>
</html>
具名插槽
vue注册和简单使用的更多相关文章
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- 为什么VUE注册组件命名时不能用大写的？
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
- 前台vue的使用简单小结
前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...
- axios在Vue中的简单应用（一）
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- C#操作注册表(简单方便,兼容X32和X64)
C#操作注册表(简单方便,兼容X32和X64) 大家好,我在这里给大家介绍本人实现的操作注册表的类,简单方便,兼容32位系统和64位系统. 一般大家用C#操作注册的方法是使用命名空间Microsoft ...
随机推荐
- 【ssh】端口转发
来源:https://www.ibm.com/developerworks/cn/linux/l-cn-sshforward/ 非常非常好用,可以通过跳板解决两台服务器无法连接的问题 第一部分 概述 ...
- log4j2的配置文件log4j2.xml笔记
一.背景 最近由于项目的需要,我们把log4j 1.x的版本全部迁移成log4j 2.x 的版本,那随之而来的slf4j整合log4j的配置(使用Slf4j集成Log4j2构建项目日志系统的完美解决方 ...
- Nginx + tomcat服务器 负载均衡
Nginx 反向代理初印象 Nginx (“engine x”) 是一个高性能的HTTP和反向代理 服务器,也是一个IMAP/POP3/SMTP服务器.其特点是占有内存少,并发能力强,事实上nginx ...
- C++ Primer 笔记——语句
switch 内部的变量定义 1.因为C++语言规定,不允许跨过变量的初始化语句直接跳转到该变量作用域内的另一位置,所以有了如下情况: bool bsuccess = false; switch (b ...
- 微信录音文件上传到服务器以及amr转化成MP3格式，linux上转换简单方法
微信公众号音频接口开发 根据业务需求,我们可能需要将微信录音保存到服务器,而通过微信上传语音接口上传到微信服务器的语音文件的有效期只有3天,所以需要将文件下载到我们自己的服务器. 上传语音接口 wx. ...
- windows环境下永久修改pip镜像源的方法（转）
一.在windows环境下修改pip镜像源的方法(以python3.7为例) (1):在windows文件管理器中,输入 %APPDATA%,cmd里面输入即可. (2):会定位到一个新的目录下,在该 ...
- 我的第一个Java程序和Java简介
public calss HelloWorld{ public static void main(String[] args){ System.out.println("Hello Worl ...
- python requests 正则爬虫
代码: import requests from multiprocessing import Pool from requests.exceptions import RequestExceptio ...
- element-ui MessageBox的bug
通过 use引用messageBox有bug Vue.use(MessageBox) 页面一开始会有一个弹窗,内容空白 Vue.component(MessageBox.name, MessageBo ...
- 【LGR-052】洛谷9月月赛II（加赛）
题解: 没打... ab题满世界都过了应该没什么意思 c题是个比较有意思的思维题(先看了题解才会的...) 我们考虑这么一件事情 没钥匙的人出门后 门一定是开着的 他进来的时候,门一定是开着的 其他时 ...