08: vue组件
1.1 初识组件
一、什么是组件javascript
1. Html中有组件，是一段能够被复用的结构代码css
2. Css中有组件，是一段能够被复用的样式html
3. Js中有组件，是一段能够被复用的功能vue
4. Vue中也有组件，指的就是一个模块，是一个独立的，完整的（包含html，css，js等），能够直接拿来用的java
二、使用组件分红三步数组
一、第一步 定义组件容器（定义自定义元素）app
二、第二步 定义组件Vue.extend方法ide
1. 参数是组件对象，对象属性跟vue实例化时候传递的参数对象的属性是同样的，例如 data，methods，computed
2. 在vue实例化时候，data属性的属性值是一个对象，在组件中，data属性值是一个函数，返回值是一个对象
3. 组件中，能够经过template定义模板，一般模板写在一个根元素内函数
三、第三步 将组件注册到页面中 Vue.componentui
第一个参数表示容器元素的名称
第二个参数表示组件类
三、组件特性
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. 组件间通讯就是指组件之间是如何传递数据的
父组件：vue实例化对象
子组件：自定义组件
2. 组件的tempalte属性，除了能够是字符串，还能够是元素的id
3. 咱们在页面中定义模板的时候，除了能够定义在script模板标签中，还能够定义在template模板中
父组件子组件：若是你在一个组件A里面，用到了另一个组件B，那么B就是A的子组件，A就是B的父组件
二、父组件向子组件通讯：分为如下两步
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. 注意: 若是属性名称，出现了-， 注册的变量要使用驼峰式命名法
三、例子说明
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.0中子组件向父组件通讯分如下两步
1. 第一步：注册事件
在父组件的events属性中 注册消息，参数就是触发是传递的数据，做用域是组件实例化对象
2.第二步：触发事件
在子组件中，经过$dispatch方法触发消息
二、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') //二、触发消息 } } }); // 3 注册 Vue.component('ickt', Ickt); var app = new Vue({ // 建立vue实例化对象： 父组件 el: '#app', data: { msg: '' }, methods: { // 定义方法 clickH1: function() { this.$on('icktmsg', function() { //一、注册消息 console.log(arguments, this) }) } } }) </script> </body> </html>
1.4 组件的生命周期
一、说明
1. Vue将组件当作是一个有生命的个体，跟人同样，定义了各个阶段，
2. 组件的生命周期：组件的建立过程
3. 组件生命周期钩子函数：当组件处在某个阶段，要执行某个方法，来通知咱们，组件进入某个阶段，这个方法就是组件生命周期的钩子函数
4. 组件的建立过程：这些方法在组件中直接定义，会按照顺序执行，没有参数，做用域都是组件实例化对象
二、组件生命周期中依次执行的八个钩子函数
<!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>
三、图片展现
四、组件生命周期 经常使用的两个过程
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>
- 1. 08.form组件
- 2. Vue学习第二天：08如何触发组件的更新
- 3. vue组件build failed,vue组件命名
- 4. 【 Vue 】—— Vue 组件化
- 5. Vue组件--利用axios和组件
- 6. Vue-组件嵌套之——父组件向子组件传值
- 7. vue-组件嵌套之——父组件向子组件传值
- 8. Vue组件-动态组件
- 9. vue组件---组件注册
- 10. python-08-元组
- 更多相关文章...
- • ASP AdRotator 组件 - ASP 教程
- • ASP Content Linking 组件 - ASP 教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • IntelliJ IDEA安装代码格式化插件
-
每一个你不满意的现在，都有一个你没有努力的曾经。