Vue学习之全局和私有组件小结（七）
一、组件：
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用相应的组件即可。
二、组件和模块：
1、模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
2、组块化：是从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>组件</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 -->
<mycom1></mycom1>
</div>
<!-- 3.在被控制的 #app外面，使用 template 元素，定义组件的HTML模板结构-->
<template id="tmp1">
<div>
<h1>
这是通过
template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮
</h1>
<h4>好用，不错</h4>
</div>
</template id="tmp2">
<h2>
这是私有的 login 组件
</h2>
<template> </template>
<script>
Vue.component("mycom1", {
template: "#tmp1"
}); // 1.1 使用 Vue.extend 来创建全局的Vue组件
// var com1 = Vue.extend({
// 通过template 属性，指定了组件要展示的HTML结构
// template: "<h3>这是使用 Vue.extend 创建的组件<h3>"
// });
// 1.2 使用 Vue.component('组件的名称'，创建出来的组件模板对象)
// 如果使用 Vue.component 定义全局组件的时候，组件的名称使用了驼峰命名，则在引用组件的时候，
// 需要把大写的驼峰改成小写的字母，同时，两个单词之前，使用 - 连接；
// 如果不使用驼峰，则直接拿名称来使用即可；
// Vue.component("mycom1", com1); // 2. Vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是一个标签的形式来引入它的
// 第二个参数：Vue.extend 创建的组件，其中 template 就是组件将来要展示的HTML内容。
// 相当于第一种方式的简写
// Vue.component(
// "mycom1",
// Vue.extend({
// //注意：不论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个元素
// template:
// "<div><h3>这是使用 Vue.extend 创建的组件<h3><span>123</span></div>"
// })
// ); var vm = new Vue({
el: "#app",
data: {},
methods: {},
filters: {},
directives: {},
components: { //定义实例的内部私有组件的
login: {
template: "#tmp2"
}
}
});
</script>
</body>
</html>
四、定义私有的组件：如上图代码中的 tmp2 ;
五、组件内可以有data数据，但其是一个有return的function方法。
<!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>组件</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 -->
<mycom1></mycom1>
</div>
<script>
Vue.component("mycom1", {
template: "<h1>这是全局组件-----{{ msg }}</h1>",
data: function() {
return {
msg: "这是组件的中data定义的数据"
};
}
}); var vm = new Vue({
el: "#app",
data: {},
methods: {},
filters: {},
directives: {}
});
</script>
</body>
</html>
六、多个组件：
<!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>组件</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
<hr /> <counter></counter>
<hr />
<counter></counter> <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 -->
</div>
<template id="tmp1">
<div>
<input type="button" value="+1" @click="increment" />
<h3>{{ count }}</h3>
</div>
</template>
<script>
var dataObj = { count: 0 };
//这是一个计数器的组件，身上有个按钮，每当点击按钮，让 data 中的 count 值 +1
Vue.component("counter", {
template: "#tmp1",
data: function() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
}); var vm = new Vue({
el: "#app",
data: {},
methods: {},
filters: {},
directives: {}
});
</script>
</body>
</html>
Vue学习之全局和私有组件小结（七）的更多相关文章
- vue学习-day03（动画，组件）
目录: 1.品牌列表-从数据库获取列表 2.品牌列表-完成添加功能 3.品牌列表-完成删除功能 4.品牌列表-全局配置数据接口的根域名 5.品牌列表-全局配置emulateJS ...
- Vue学习之--------全局事件总线（2022/8/22）
文章目录 1.全局事件总线基础知识(GlobalEventBus) 2.图解过程 3.代码实例 3.1 main.js 3.1 App.vue 3.2 School.vue 3.3 Student.v ...
- Vue学习(2)---v-指令和组件
Vue中的指令 Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute) 一个v-bind的例子 <div id="app" v-bind ...
- 38.VUE学习之-全局组件和局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue学习--自定义全局vue组件
文档目录: |--components |-loading(组件文件夹) |-loading.vue (loading组件核心) |-index.js //配置导出组件,并且install 主要配置到 ...
- vue学习笔记（1）—— 组件化实现todoList
一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...
- Vue系列之 => 全局，私有过滤器
私有过滤器也称局部过滤器 <script> // 全局过滤器 Vue.filter("datatime",function(timestr){ var tm = new ...
- vue中创建全局单文件组件/命令
1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...
- Vue学习计划基础笔记(六) - 组件基础
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...
随机推荐
- IE float 双边距
IE 浮动元素的双边距
- l获取list 的长度,EL表达式获取list的长度,EL表达式获取list大小
在jsp页面中不能通过${list.size}取列表长度,而是 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" pref ...
- nexus pip proxy config
nexus pip proxy config config for linux touch config touch ~/.pip/pip.conf content [global] index-ur ...
- IE与标准浏览器对事件处理的区别？（监听、阻止冒泡、阻止默认等）
谷歌 IE:监听:addEventListener attachEvent--------要在事件名称前面加on解绑:removeEventListener detachEvent--- ...
- UNIX网络编程卷1 - >环境搭建（ubuntu16.04）
学习unp网络编程,树上的例子均存在#include“unp.h”,故需要对环境进行配置. 1.到资源页下载www.unpbook.com 2.解压并将unpv13e移动到相应的文件夹下 (因为我 ...
- 【CSP-S膜你考】我们的可可西里
我们的可可西里 题面 转眼到了2008年的6月9日,盼望已久的高考结束了.我们踏上了向西的旅程(本来是想写西去之路,可是考虑不太妥当).可可西里,多么诱人的名词,充满了奇幻的色彩和自然的淳朴.从可可西 ...
- Spring Boot 知识笔记（整合Mybatis续-补充增删改查）
续上篇,补充数据库增删改查的其他场景. 一.Mapper中添加其他场景操作 package net.Eleven.demo.Mapper; import net.Eleven.demo.domain. ...
- 【技术博客】Postman接口测试教程 - 环境、附加验证、文件上传测试
Postman接口测试教程 - 环境.附加验证.文件上传测试 v1.0 作者:ZBW 前言 继利用Postman和Jmeter进行接口性能测试之后,我们发现Postman作为一款入门容易的工具,其内置 ...
- 【技术博客】nginx服务器的https协议实现
在本学期软件工程的Alpha和Beta阶段,我们的服务器部署都是使用基础的http协议,http在网络路由间的信息转发都为明文,这对我们网站的账户密码登录来说很不安全,因此在Gamma阶段我们实现了h ...
- 2-3-4树（jdk8的TreeMap的红黑树）
2-3树:插入变成2个节点正常插,变成3个节点就要提升中间节点和分裂子节点,满足:要么没有子节点,要么2个子节点,要么3个子节点. 2-3-4树:插入变成2个不动,插入变成3个不动,插入变成4个提升原 ...