Vue组件component创建及使用
2024-08-27 02:27:34
组件化与模块化的区别
什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块
,将来我们需要什么功能,就可以去调用对应的组件即可
组件化与模块化的不同:
模块化:是从代码逻辑的角度进行分析,方便代码分层开发,保证每个功能模块的只能单一
组件化:是从UI界面的角度进行划分,前端的组件化,方便UI组件的重用。
<!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="./lib/vue-2.4.0.js"></script>
</head>
<body> <div class="app">
<!-- 引用组件的名称 -->
<login></login>
<login2></login2>
<login3></login3>
<hr>
<login6></login6>
</div> <!-- 注意 这里的id是必须的,不要在实例控制中的divcalss app 中去写template -->
<template id="login3">
<div>
<h2>我是第三种方式创建出来的</h2>
</div>
</template> <!-- Vue实例 -->
<script>
// Component 组件的创建
// 注意 template 中的容器 只能有一个父元素,不能包含两个 你可以用一个div包裹
// 第一种创建全局组件
// extend是注册组件函数,他返回一个对象
var comobj= Vue.extend({
template:"<h1>我是全局组件</h1>"
})
// component函数提交组件,第一个参数为组件的名称,第二个参数是一个注册组件的对象
Vue.component("login",comobj) // 第二种创建方式
// component 中直接写上一个模板对象
Vue.component('login2',{template:'<h1>我是第二种v创建出来的组件</h1>'}); // 第三种创建的方式 首先在元素中创建一个template模板
Vue.component('login3',{template:'#login3'}) var vm=new Vue({
el:'.app',
data:{},
// 定义私有组件 和全局差不多 组件名称和对象,也可以使用template模板来创建
components:{
login6:{template:'#login3'} }
}) </script>
</body>
</html>
组件的引用可以使用组件的名字直接引用 也可以使用Vue给我们提供的的元素
Vue 提供了component,来展示对应名称的组件
component是一个占位符,:is属性可以用来指定要展示的组件名称
<compnent :is="comName" ></component>
<div class="app">
<login></login>
<login2></login2>
<!-- 使用component 占位符来展示组件 -->
<!-- 注意 :is 是绑定的属性,需要在实例的data中绑定的 组件的名称是字符串 -->
<!-- 其中 他还提供了 mode属性来切换动画的先进先出的问题 -->
<component :is="login='login'" mode="out-in"></component>
</div>
最新文章
- html中input文本框,初始里边有文字提示,当点击时,文字消失,怎么设置?
- 深入理解java虚拟机(1)------内存区域与内存溢出
- Unity的HTC VIVE SDK研究(手柄按键功能的研究,比较详细)
- Mysql数据库表排序规则不一致导致联表查询,索引不起作用问题
- apache与nginx日志文件的区别(转载)
- PHP下拉框选择的实现方法
- 在KEIL中的模块化程序写法
- C++ —— 编译程序
- SSCTF-PWN
- Codeforce 143B - Help Kingdom of Far Far Away 2
- [Ruby]How to create singleton class ?
- 【转】嵌入式C语言调试开关
- Python基本知识
- Spring的PropertyPlaceholderConfigurer强制使用默认值的坑
- vue-cli 上传图片上传到OSS(阿里云)
- js类的继承,es5和es6的方法
- CMM:软件成熟度模型
- ThreadLocal、Volatile、synchronized、Atomic
- SGU 200. Cracking RSA (高斯消元求自由变元个数)
- Android DiskLruCache 源代码解析 硬盘缓存的绝佳方案
热门文章
- Spring Cloud简介 4.1
- LeetCode_234. Palindrome Linked List
- PHP5.2\5.3 Xdebug 调试器配置及应用
- [转帖]AMD:Zen 2霄龙处理器每美元性能可达英特尔至强5.6倍
- SQL语言(一)
- 20191108-从零搭建基于Linux的RobotFramework框架
- python技巧 — Chrome浏览器中的 XPath Helper
- Python后台执行不启用缓存
- 十九、eMMC驱动框架分析
- Angular 学习笔记 (Material table sticky 原理)