08: vue组件
1.1 初识组件
1、什么是组件
1. Html中有组件，是一段可以被复用的结构代码
2. Css中有组件，是一段可以被复用的样式
3. Js中有组件，是一段可以被复用的功能
4. Vue中也有组件，指的就是一个模块，是一个独立的，完整的（包含html，css，js等），可以直接拿来用的
2、使用组件分成三步
1、第一步 定义组件容器（定义自定义元素）
2、第二步 定义组件Vue.extend方法
1. 参数是组件对象，对象属性跟vue实例化时候传递的参数对象的属性是一样的，例如 data，methods，computed
2. 在vue实例化时候，data属性的属性值是一个对象，在组件中，data属性值是一个函数，返回值是一个对象
3. 组件中，可以通过template定义模板，通常模板写在一个根元素内
3、第三步 将组件注册到页面中 Vue.component
第一个参数表示容器元素的名称
第二个参数表示组件类
3、组件特性
1. 组件的实例化对象，跟vue实例化对象一样，因此，我们也可以将vue实例化对象看成组件
2. 组件间是独立的，因此数据要独立存储，方法要独立定义，彼此间不能共享。
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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>
</head>
<body>
<div id="app">
<Home></Home>
</div> <script src="vue.js"></script>
<script>
var Home = Vue.extend({
template:"<h1>I am h1!! 显示变量： {{msg}}</h1>",
data:function () {
return {
'msg':'I am msg'
}
}
}); Vue.component('home',Home); var app = new Vue({
el:'#app',
data:{}
})
</script>
</body>
</html>
最简单组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<h1 v-on:click="clickH1">{{msg}}</h1>
<!-- 第一步 定义容器元素 -->
<ickt></ickt>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 第二步 定义组件类
var Ickt = Vue.extend({
template: '<div><input type="text" v-model="msg" /><h1 v-on:click="clickH1">{{msg}}</h1></div>', // 定义模板
data: function() { // 绑定数据
return {
msg: 'ickt' // 返回值才是真正绑定的数据
}
},
methods: { // 定义方法
clickH1: function() {
console.log(222, this)
}
}
}); // 第三步 注册组件
Vue.component('ickt', Ickt); // vue实例化对象
var app = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: { // 定义方法
clickH1: function() {
console.log(111)
}
}
})
</script>
</body>
</html>
定义组件
1.2 父组件向子组件间的通信
1、组件间的通信说明
1. 组件间通信就是指组件之间是如何传递数据的
父组件：vue实例化对象
子组件：自定义组件
2. 组件的tempalte属性，除了可以是字符串，还可以是元素的id
3. 我们在页面中定义模板的时候，除了可以定义在script模板标签中，还可以定义在template模板中
父组件子组件：如果你在一个组件A里面，用到了另外一个组件B，那么B就是A的子组件，A就是B的父组件
2、父组件向子组件通信：分为以下两步
1. 第一步
1. 在组件容器元素上，定义自定义属性，属性值可以传递父组件中的数据
2. 如果属性使用了v-bind指令，属性值就是js环境
3. 如果属性没有使用v-bind指令，属性值就是字符串
<ickt demo="hello" v-bind:parent-msg="msg"></ickt> # hello 是字符串， msg是变量
2. 第二步
1. 在组件中定义props属性，属性值是数组，每一个成员代表组件容器元素上的一个属性
2. 作用：将属性作为变量，注册在子组件中，可以在子组件中使用（包括模板）
3. 注意: 如果属性名称，出现了-， 注册的变量要使用驼峰式命名法
3、例子说明
1. 在当页面中注册了子组件：Ickt，在子组件中是无法使用父组件中定义的数据 msg 的
2. 如果想要在子组件Ickt中使用父组件的 msg 变量，可以使用 <ickt v-bind:parent-msg="msg"></ickt>
3. 在子组件中 使用{{parent-msg}} 就可以访问父组件的msg变量了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<h1 @click="clickH1">vue:{{msg}}</h1> <!-- 1 容器 第一步 绑定属性 demo 没有使用v-bind所以是字符串 -->
<ickt demo="hello" v-bind:parentmsg="msg"></ickt>
</div>
<template id="tpl">
<div>
<input type="text" v-model="childMsg">
<h1 @click="clickChildH1">demo: {{childMsg}}</h1>
<h2>{{demo}}</h2> <!-- demo 是父组件中的字符串 -->
<h3>{{parentmsg}}</h3> <!-- parentmsg 是父组件中的变量 -->
</div>
</template>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 2 组件类
var Ickt = Vue.extend({ // 第二步 注册属性变量
props: ['demo', 'parentmsg'],
template: '#tpl',
data: function() { // 绑定数据
return {
childMsg: ''
}
},
methods: { // 绑定事件
clickChildH1: function() {
console.log(222)
}
}
}); // 3 注册
Vue.component('ickt', Ickt); // 创建vue实例化对象： 父组件 var app = new Vue({
el: '#app',
data: {
msg: ''
},
methods: { // 定义方法
clickH1: function() {
console.log(1111)
}
}
})
</script>
</body>
</html>
父组件向子组件通信
1.3 子组件向父组件通信
1、1.0中子组件向父组件通信分以下两步
1. 第一步：注册事件
在父组件的events属性中 注册消息，参数就是触发是传递的数据，作用域是组件实例化对象
2.第二步：触发事件
在子组件中，通过$dispatch方法触发消息
2、2.0中改变
1. 将$dispatch, $broadcast 移除了，新增了$emit, $on, $off
$emit发布消息
$on 注册消息： 参数就是$emit传递的数据，作用域就是组件实例化对象
$off 注销消息
2. 每一个组件相当于一个事件对象，只能在自身订阅，触发，以及发布
3. 注意：工作中，注册事件通常在组件生命周期方法中注册，例如created
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<h1 @click="clickH1">vue:{{msg}}</h1>
<!-- 1 容器 第一步 绑定属性 -->
<ickt demo="hello" v-bind:parent-msg="msg"></ickt>
</div>
<template id="tpl">
<div>
<input type="text" v-model="childMsg">
<h1 @click="clickChildH1">demo: {{childMsg}}</h1>
<h2>{{demo}}</h2>
<h3>{{parentMsg}}</h3>
</div>
</template>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 2 组件类
var Ickt = Vue.extend({
props: ['demo', 'parentMsg'], // 第二步 注册属性变量
template: '#tpl',
data: function() { // 绑定数据
return {
childMsg: ''
}
},
methods: { // 绑定事件
clickChildH1: function() {
this.$parent.$emit('icktmsg', 'hello', 'everyone') //2、触发消息
}
}
});
// 3 注册
Vue.component('ickt', Ickt); var app = new Vue({ // 创建vue实例化对象： 父组件
el: '#app',
data: {
msg: ''
},
methods: { // 定义方法
clickH1: function() {
this.$on('icktmsg', function() { //1、注册消息
console.log(arguments, this)
})
}
}
})
</script>
</body>
</html>
子组件向父组件通信
1.4 组件的生命周期
1、说明
1. Vue将组件看成是一个有生命的个体，跟人一样，定义了各个阶段，
2. 组件的生命周期：组件的创建过程
3. 组件生命周期钩子函数：当组件处在某个阶段，要执行某个方法，来通知我们，组件进入某个阶段，这个方法就是组件生命周期的钩子函数
4. 组件的创建过程：这些方法在组件中直接定义，会按照顺序执行，没有参数，作用域都是组件实例化对象
2、组件生命周期中依次执行的八个钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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>
</head>
<body>
<div id="app">
<Home></Home>
</div> <script src="vue.js"></script>
<script>
var Home = Vue.extend({
template:"<h1>I am h1!! 显示变量： {{msg}}</h1>",
data:function () {
return {
'msg':'I am msg'
}
}, // 方法1：组件实例被创建，组件属性计算之前，如data属性等
beforeCreate: function () {
console.log(111, this, arguments)
}, // 方法2：组件实例创建完成，属性已经绑定，但DOM还未生成，$el 属性还不存在
created: function () {
console.log(222, this, arguments)
}, // 方法3：模板编译/挂载之前
beforeMount: function () {
console.log(333, this, arguments)
}, // 方法4：模板编译/挂载之后（不保证组件已在document中）
mounted: function () {
console.log(444, this, arguments)
}, // 方法5：组件更新之前
beforeUpdate: function () {
console.log(555, this, arguments)
}, // 方法6：组件更新之后
updated: function () {
console.log(666, this, arguments)
}, // 方法9：组件销毁前调用
beforeDestory: function () {
console.log(777, this, arguments)
}, // 方法10：主键销毁后调用
destoryed: function () {
console.log(888, this, arguments)
}, // 方法7：组件被激活时调用（用的少）
// activated: function() {
// console.log(777, this, arguments)
// }, // 方法8：组件被移除时调用（用的少）
// deactivated: function () {
// console.log(888, this, arguments)
// }, }); Vue.component('home',Home); var app = new Vue({
el:'#app',
data:{
'isShow':true,
}
})
</script>
</body>
</html>
组件中八个钩子函数执行顺序
3、图片展示
4、组件生命周期 常用的两个过程
1）created： 实例已经创建完成，并且已经进行数据观测和事件配置
2）mounted：模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
msg:'welcome to itany'
},
methods:{
update(){
this.msg='欢迎来到南京网博！';
},
destroy(){
// this.$destroy();
vm.$destroy();
}
},
beforeCreate(){
alert('组件实例刚刚创建，还未进行数据观测和事件配置');
},
created(){ //常用！！！
alert('实例已经创建完成，并且已经进行数据观测和事件配置');
},
beforeMount(){
alert('模板编译之前，还没挂载');
},
mounted(){ //常用！！！
alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
},
beforeUpdate(){
alert('组件更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
});
}
</script>
</head>
<body>
<div id="itany">
{{msg}}
<br> <button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button>
</div>
</body>
</html>
生命周期执行顺序
08: vue组件的更多相关文章
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
随机推荐
- [xdoj] 1310 DSKer的卡牌游戏
http://acm.xidian.edu.cn/problem.php?id=1310 1. 这道题可以类比括号匹配,YY和yy是两组可以匹配的信号,当然要注意逻辑是否正确,一开始进行括号匹配算法的 ...
- maven的下载，安装配置以及build一个java web项目
一.下载 下载地址:http://maven.apache.org/download.cgi 二.安装 下载完成后,解压,进入到bin目录: 三.环境变量配置 复制bin目录下的文件的路径(如:xxx ...
- XXE攻击学习
环境:lAMP simplexml_load_string.php代码内容 <?php $data = file_get_contents('php://input'); $xml = simp ...
- sourceInsight工具移除不掉项目 source Insight Add and Remove Project Files
问题描述: sourceInsight创建的项目,有时候会遇到Remove Project 报错,移除不成功的情况. 解决办法: 进入到sourceinsight的安装目录.删除掉保存的工程文件信息即 ...
- beego 初体验 - 环境搭建
首先,安装go运行时和beego beego,在git bash 运行命令: go get github.com/beego/bee go get github.com/astaxie/beego g ...
- CentOS双机中Docker下安装Mysql并配置互为主从模式
CentOS双机中Docker下安装Mysql并配置互为主从模式 目录 1.搜索镜像... 1 2.拉取镜像... 1 3.绑定端口: 1 4.配置文件(修改/etc/mysql/my.cnf文件): ...
- jquery ajax 中各个事件执行顺序
jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...
- mysql每天弹出窗口检测更新关闭方式...
右击计算机-->管理-->系统工具-->任务计划程序-->MySQL<如下图>,选中右键删除或者禁用即可... 更新分界线--------------------- ...
- flask 使用Flask-WTF处理表单
使用Flask-WTF处理表单 扩展Flask-WTF继承了WTFforms,使用它可以在flask中更方便的使用WTForms.Flask-WTF将表单数据解析.CSRF保护.文件上传等功能与Fla ...
- LDA模型了解及相关知识
什么是LDA? LDA是基于贝叶斯模型的,涉及到贝叶斯模型离不开“先验分布”,“数据(似然)”和"后验分布"三块.贝叶斯相关知识:先验分布 + 数据(似然)= 后验分布. 贝叶斯模 ...