1. 组件系统是将一个大型的界面切分成一个一个更小的可控单元。
  2. 组件是可复用的,可维护的。
  3. 组件具有强大的封装性,易于使用。
  4. 大型应用中,组件与组件之间交互是可以解耦操作的。
  • 全局组件的使用
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app">
<my-header></my-header>
</div> <script>
//全局组建的定义
Vue.component("my-header", {
template: '<h1>全局组件</h1>'
});
var app = new Vue({
el: '#app',
});
</script> </body> </html>
  • 局部组件的使用
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app">
<my-header></my-header>
</div> <script>
//局部组件定义
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<h1>局部组件</h1>'
}
}
});
</script> </body> </html>
  • 组件数据的特点
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app">
<my-header></my-header>
<my-header></my-header>
<br>
<my-header1></my-header1>
<my-header1></my-header1>
</div> <script>
//组件数据之间不共享,Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数
//组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行,这样就不会影响其它组件,通过下面两个例子可以看出
var data = {
count: 0
};
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue!!!"
},
components: {
'my-header': {
template: '<h1 v-on:click="changeCount">{{count}}</h1>',
data: function() {
return data;
},
methods: {
changeCount: function() {
this.count++;
}
}
},
'my-header1': {
template: '<div v-on:click="changeCount1">{{count}}</div>',
data: function() {
return {
count: 0
};
},
methods: {
changeCount1: function() {
this.count++;
}
}
}
}
});
</script> </body> </html>
  • Vue实例与组件之间的关系

Vue组件其实是一个可扩展的Vue实例。

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app">
{{message}}
</div> <script>
//Vue组件其实是一个可扩展的Vue实例,Vue实例也可以看成是一个组件
// var app = new Vue({
// el: '#app',
// template: '<h1>app应用</h1>'
// });
//使用继承实现Vue组件
var myComponent = Vue.extend({
data: function() {
return {
message: "Hello Vue@@@"
}
}
});
var vm = new myComponent({
el: '#app'
});
</script> </body> </html>
  • Vue组件的模版方式
  1. \
  2. `
  3. <template id="xxx"></template>
  4. <script type="text/x-template"></script>
  5. .vue 单文件
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app">
<my-header></my-header>
<my-header-1></my-header-1>
<my-header-2></my-header-2>
<my-header-3></my-header-3>
</div> <template id="temp">
<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>
</template>
<script type="text/x-template" id="temp1">
<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>
</script>
<script>
//Vue模版添加方式
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<div>\
<p>\
<ul>\
<li>1</li>\
<li>2</li>\
<li>3</li>\
</ul>\
</p>\
</div>',
data: function() {
return {
message: "第一项"
}
}
},
'my-header-1': {
template: `<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>`,
},
'my-header-2': {
template: '#temp'
},
'my-header-3': {
template: '#temp1'
} }
});
</script> </body> </html>
  • Vue父组件向子组件通信(props)
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app">
<!-- 数据在组件中 -->
<my-header></my-header>
<!-- 父组件向子组件传递数据 -->
<my-header-1 :list="temp_2_list"></my-header-1>
<!-- 父组件向子组件传递数据不给值 -->
<my-header-1></my-header-1> </div>
<!-- 数据在组件中的模版 -->
<template id="temp-1">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</template>
<!-- 父组件向子组件传递数据的模版 -->
<template id="temp-2">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<my-nav :itemlist = "list"></my-nav>
</div>
</template>
<!-- 子组件向子组件传递数据的模版 -->
<template id="temp-3">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in itemlist">{{item}}</li>
</ul>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//数据在自己组件中的实例
'my-header': {
template: '#temp-1',
data: function() {
return {
list: ["1", "2", "3"],
message: "组件中的数据"
};
}
},
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
//子组件的子组件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子组件中的子组件"
};
},
props: ["itemlist"]
}
}
}
}
});
</script> </body> </html>
  • 子组件向父组件通信(EmitEvents)
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app">
<my-header-1 :list="temp_2_list"></my-header-1> </div>
<!-- 父组件向子组件传递数据的模版 -->
<template id="temp-2">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<my-nav :itemlist = "list" v-on:change-events="getChildContent"></my-nav>
</div>
</template>
<!-- 子组件向子组件传递数据的模版 -->
<template id="temp-3">
<div>
<h1>{{message}}</h1>
<ul>
<li v-for="item in itemlist" v-on:click="getContent">{{item}}</li>
</ul>
</div>
</template> <script>
//子组件向父组件传递数据,是发布订阅模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
getChildContent: function(str) {
debugger
alert(str);
}
},
//子组件的子组件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子组件中的子组件"
};
},
props: ["itemlist"],
methods: {
getContent: function(ev) {
// console.log(this);
// console.log(ev.target.innerHTML);
this.$emit("change-events", ev.target.innerHTML);
}
}
}
}
}
}
});
</script> </body> </html>
  • Vue非父子组件的通信
  1. 空实例与自定义事件
    1. $emit
    2. $on
  2. Vuex状态管理
    1. state
    2. mutation
    3. commit

  空实例与自定义事件的使用(适用于小型项目)

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head> <body>
<div id="app">
<my-header-1></my-header-1>
<my-header-2></my-header-2> </div> <script>
//非父子组件通信 //1.0 使用空实例进行非父子组件通信
//定义空实例
//创建步骤是:
//1、首先定义一个空实例
//2、需要给被传递数据的A组件使用$emit绑定自定义事件,并将A组件的数据发布给B组件
//3、使用$on订阅A组件发布过来的数据,从而获取数据
var busVm = new Vue();
var vm = new Vue({
el: '#app',
components: {
//组件B
'my-header-1': {
template: `<h1>{{message}}</h1>`,
data: function() {
return {
message: "非父子组件通信"
};
},
mounted() {
//使用bind(this)修正this
busVm.$on("changeEnvents", function(param) {
this.message = param;
}.bind(this));
},
},
//组件A
'my-header-2': {
template: `<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>`,
data: function() {
return {
list: ["第一项", "第二项", "第三项"]
};
},
methods: {
getContent: function(ev) {
busVm.$emit("changeEnvents", ev.target.innerHTML);
}
}
}
}
});
</script> </body> </html>

 Vuex状态管理 

  • Vue组件内容分发
    • 单<slot>标签使用
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head> <body>
<div id="app">
<my-header-1>
<h1>我是标题</h1>
</my-header-1> <my-header-1>
<my-header-2></my-header-2>
</my-header-1> </div> <script>
//单插槽<slot></slot>
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div>我是头部:<slot></slot></div>`, },
'my-header-2': {
template: `<h1>我是标题</h1>`,
}
}
});
</script> </body> </html>
    • 多<slot>标签使用
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head> <body>
<div id="app"> <my-header-1>
<button slot="left">←</button>
<button slot="right">→</button>
</my-header-1> </div> <script> //多插槽的使用,则使用name属性来指定要插入的位置
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div><slot name="left"></slot> 我是头部:<slot name="right"></slot></div>`,
},
'my-header-2': {
template: `<h1>我是标题</h1>`,
}
}
});
</script> </body> </html>
    • <slot>默认值
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head> <body>
<div id="app"> <my-header-1>
<button slot="left">←</button>
<button slot="right">→</button>
</my-header-1> </div> <script>
//多插槽的使用,则使用name属性来指定要插入的位置
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div><slot name="left"></slot> 我是头部:<slot name="right"><button slot="right">+</button></slot></div>`,
},
'my-header-2': {
template: `<h1>我是标题</h1>`,
}
}
});
</script> </body> </html>
  • Vue组件开发流程
    1. 编写基础HTML和CSS
    2. 提取组件
    3. 数据传输
    4. 内容分发
    5. 添加事件和方法
  • Vue中DOM操作(使用$refs)
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app">
<my-header-1 :list="temp_2_list"></my-header-1> </div>
<!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作,使用this.$refs.row获取添加特性的DOM元素 -->
<template id="temp-2">
<div>
<h1>{{message}}</h1>
<ul >
<li v-for="item in list" v-on:click="updateStyle" style="color:blue" ref="row">{{item}}</li>
</ul> </div>
</template> <script>
//子组件向父组件传递数据,是发布订阅模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
updateStyle: function(ev) {
ev.target.style.color = 'red';
// this.$refs.row.style.color = 'red';
console.log(this.$refs.row);
this.$refs.row.forEach(element => {
console.log(element);
element.style.color = 'red';
});
}
}
}
}
});
</script>
</body>
</html>

Vue组件的介绍与使用的更多相关文章

  1. Vue 组件&组件之间的通信 之组件的介绍

    什么是组件? 组件Component,可扩展HTML元素,封装可重用的代码.通俗的来说,组件将可重用的HTML元素封装成为标签方便复用: 组件的使用: 1.使用全局的方法Vue.extend创建构造器 ...

  2. Vue两种组件类型介绍:递归组件和动态组件

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...

  3. Vue组件介绍及开发

    一. 通过axios实现数据请求 1.json json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于 ...

  4. 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  5. 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  6. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  7. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  8. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  9. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

随机推荐

  1. 2、haproxy配置参数详解

    代理相关配置参数 内容参考自马哥教育 HAProxy官方文档 https://cbonte.github.io/haproxy-dconv/2.0/configuration.html URI Syn ...

  2. MapReduce编程:词频统计

    首先在项目的src文件中需要加入以下文件,log4j的内容为: log4j.rootLogger=INFO, stdout log4j.appender.stdout=org.apache.log4j ...

  3. Java使用Socket进行通信

    什么是Socket 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,可以 ...

  4. [poj P1475] Pushing Boxes

    [poj P1475] Pushing Boxes Time Limit: 2000MS   Memory Limit: 131072K   Special Judge Description Ima ...

  5. ansible的管理与剧本

    首先我们安装一个ansible. 在7版本,直接用yum安装就可以 yum -y install ansible 然后清空ansible的配置文件,在里面写入自己需要管理的服务器的ip和相应的登陆密码 ...

  6. oracle 导出某用户下的表

    exp test/test@orcl owner=test file=E:/all.dmp

  7. 响应式Web设计 H5和CSS3实战(第二版)随笔

    第一章 响应式设计基础 1.弹性布局 <meta name = "viewport" content = "width = device-width"&g ...

  8. Java 获取class method parameter name

    package org.rx.util; import org.objectweb.asm.*; import java.io.IOException; import java.io.InputStr ...

  9. wpf-x-指令元素

    1. x:Code 用于代码前置  可以吧 C#代码内嵌到前端里 2. x:XData 用于内嵌xml 文件

  10. 在myeclipse中maven项目关于ssh整合时通过pom.xml导入依赖是pom.xml头部会报错

    错误如下 ArtifactTransferException: Failure to transfer org.springframework:spring-jdbc:jar:3.0.5.RELEAS ...