Vue基础学习 --- 全局组件与局部组件
组件分为
全局组件
局部组件
全局组件
// 语法---Vue.component('组件名', {组件参数})
Vue.component('com1', {
template: '<button @click="count++">你点了我{{count}}次</button>',
data() {
return {
count: 0
}
}
})示例：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我是测试vue</title>
<!-- 01-引入vue -->
<script src="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<!-- 02创建一个div，ID为app -->
<div id="app"> <!-- 02-使用组件 --><com></com>
</div>
<script>//01-创建全局组件
Vue.component('com', {
template: '<button @click="add">你点击了我{{count}}次</button>',
data() {
return {
count: 0
}
},
methods: {
add() {
this.count++
}
}
})
const vm = new Vue({
el: '#app',//对应的操作区，必填
data: {
msg: ''
},//数据
methods: {}//方法
});
</script>
</body> </html>说明：
组件没有el参数, 原因是组件不会和具体的页面元素绑定
组件必须有template参数, 原因是组件需要渲染页面, template就是需要渲染的html
组件也是一个Vue的实例, 所以在组件中也有data/methods等
data必须是一个函数, 并返回一个对象
局部组件
组件的html部分是在template标签中渲染
组件的js部分就是组件参数(对象)
示例：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<!-- 04-使用组件 -->
<son></son>
<abc></abc>
</div> <!-- 02-局部组件的样式在这里实现 -->
<template id="jubu">
<div>
<button @click="count++">你点击了{{count}}次</button>
</div>
</template> <script>
//01-定义局部组件
const jubu = {
template: '#jubu',
data() {
return {
count: 0
}
},
} const vm = new Vue({
el: '#app',
data: {},
methods: { },
//03- 挂载局部组件
components: {
// 定义组件---组件名：组件参数对象
son: jubu,
abc: jubu
}
});
</script>
</body> </html>
Vue基础学习 --- 全局组件与局部组件的更多相关文章
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
- TZ_16_Vue定义全局组件和局部组件
1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
随机推荐
- 0001-代码仓库-mvn
暂缺 基本介绍 web管理 ifsvnadmin
- MySQL Partition Table--分区表优缺点
分区表历史 1.MySQL 5.1版本开始支持基于整数列的分区表, 2.MySQL 5.5版本开始支持RANGE和LIST分区,支持TRUNCATE分区,新增COLUMNS关键词简化分区定义. 3.M ...
- IntelliJ Idea 依赖包下载成功，代码里无法import问题解决方法
今天clone一个github上的基于maven的项目IntelliJ Idea 依赖包下载成功,代码里无法import.解决方法:删掉原来的.iml,刷新. 如果不行,可尝试:File->In ...
- Python 中 plt 画柱状图和折线图
1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np. ...
- 2013.6.26 - OpenNER第六天
今例会的时候看CRF,突然感觉到ANN模型可能没有问题了,问题出在评价函数,不能接过好就说好,或者说收敛方法有问题,并不是打得对就答得好.还有就是我们应该让他能够根据需要而自己产生问题,问我们,然后我 ...
- [转]Linux虚拟网络设备之tun/tap
转, 原文:https://segmentfault.com/a/1190000009249039 -------------------------------------------------- ...
- Div+CSS总结
之前最早接触是在牛腩新闻发布系统中,当时看到这些自己是一头雾水,不过好在我们已经形成了这样的学习习惯,先实践在接触理论,这样再学习理论的时候就会想到当初我是怎样的迷茫,这样自己印象更深刻. DIV+C ...
- LG4762 Virus synthesis
Virus synthesis 初始有一个空串,利用下面的操作构造给定串 S . 串开头或末尾加一个字符 串开头或末尾加一个该串的逆串 求最小化操作数, ∣S∣≤105 . 题解 显然应该多使用操作2 ...
- 在PHP中使用CURL实现GET和POST请求的方法
1.CURL介绍 CURL是一个利用URL语法规定来传输文件和数据的工具.支持很多协议,如HTTP.FTP.TELNET等. 幸运的是PHP也支持CURL库.本文将介绍curl的一些高级特性,以及在P ...
- 通过php安装Imagick扩展给动态gif图片打水印
通过php安装Imagick扩展给动态gif图片打水印 一直以来php处理图片都是以gd为主流,直到近些年Imagick的使用才渐渐变多. gd通常用来缩放图片,给图片打水印等基本功能,对于复杂效果如 ...