Vue框架学习篇(五)
1 组件
1.1 组件的基本使用
1.1.1 基本流程
a 引入外部vue组件必须要的js文件
<script src="../js/httpVueLoader.js"></script>
b 创建.vue文件
<template><!--公共模板内容--></template><script><!--事件绑定的书写位置--></script><style><!--样式文件的书写位置-->
</style>
c 引入外部组件,并给其取名
var 组件名=httpVueLoader(组件相对路径地址);
d 注册组件
Vue.component('key值(使用时的标签名)',组件名)
1.1.2 示例代码
a header.vue代码
<template><header><h3>组件基本功能测试</h3></header></template><script></script><style>header{color:red;border:1px solid blue;}
</style>
b 页面代码
<!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.0"><title>组件的基本使用</title><script src="../js/vue.js"></script><script src="../js/httpVueLoader.js"></script>
</head>
<body><div id="app"><tou></tou><div>这里是中间部分的内容</div></div><script>var tou=httpVueLoader("../vue/header.vue");Vue.component('tou',tou);new Vue({el:"#app",})</script>
</body>
</html>
1.1.3 运行效果
1.2 组件的绑定事件
1.2.1 使用方法
module.exports={methods:{方法名(){}}
}
1.2.2 示例代码
a bangding.vue文件
<template><header><button @click="t()">点击触发弹窗效果</button></header></template><script>module.exports={methods:{t(){alert('测试组件中事件的绑定');}}}</script><style>header{color:red;border:1px solid blue;}
</style>
b 页面文件
<!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.0"><title>测试绑定事件</title><script src="../js/vue.js"></script><script src="../js/httpVueLoader.js"></script>
</head>
<body><div id="app"><tou></tou><div>测试绑定事件</div></div><script>var tou=httpVueLoader("../vue/bangding.vue");Vue.component('tou',tou);new Vue({el:"#app",})</script>
</body>
</html>
1.2.3 运行截图
1.3 父组件往子组件传值
1.3.1 使用方法
//① 在.vue文件里面写入如下代码
module.exports={props:[传递参数名1,传递参数名2...传递参数名n],
}
//②在vue文件中使用,是通过{{传递参数名}} 来使用(templates标签里面)
//③在页面文件中,通过:传递参数名="data里面的数据所对应的key值"的方式进行传值(可以联想到之前的:title)
<组件所使用的标签名 :参数名字="数据所对应的key"></组件所使用的标签名>
1.3.2 示例代码
a transmitValue.vue文件
<template><footer><h3>得到外部传入的参数 {{r}}-----{{m}}</h3></footer>
</template>
<script>module.exports={props:['r','m'],}
</script>
<style> footer{color:orangered;border:1px solid blue;}
</style>
b 页面文件
<!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.0"><title>测试绑定事件</title><script src="../js/vue.js"></script><script src="../js/httpVueLoader.js"></script>
</head>
<body><div id="app"><div>测试绑定事件</div><wei :r="className1" :m="className2"></wei></div><script>var wei=httpVueLoader("../vue/transmitValue.vue");Vue.component('wei',wei);new Vue({el:"#app",data:{className1:'HTML',className2:'JAVA',}})</script>
</body>
</html>
1.3.3 运行截图
2 Vue的生命周期
2.1 创建
2.1.1 组件实例创建之初
a 对应的方法
beforeCreate() {
}
b 表现形式
el元素不存在,data和methods里面的数据还没有初始化
2.1.2 组件实例已经完全创建
a 对应的方法
created() {
}
b 表现形式
el元素不存在
data和methods里面的数据已经初始化好了
2.2 挂载
2.2.1 挂载前
a 对应的方法
beforeMount() {},
b 表现形式
el元素存在,data和methods里面的数据已经有数据了
模板在内存中已经编译好了,但尚未挂载到页面中
2.2.2 挂载后
a 对应的方法
mounted() {
}
b 表现形式
el元素存在,data和methods里面的数据已经有数据了
页面已经被渲染成功了,此时进入运行状态
一般在这个方法里面写异步提交
2.3 修改
2.3.1 修改前
a 对应的方法
beforeUpdate() {},
b 表现形式
组件数据更新前使用
页面数据为旧,但得到的data数据是最新的
2.3.2 修改后
a 对应的方法
updated() {
}
b 表现形式
组件数据更新以后,页面和data数据都是最新的(已经同步完成)
2.4 销毁
2.4.1 销毁前
a 对应的方法
beforeDestroy() {}
b 表现形式
组件销毁前调用,vue实例从运行阶段进入到销毁阶段
但此时vue实例上的所有东西都是可以用的
2.4.2 销毁后
a 对应的方法
destroyed() {
}
b 表现形式
组件销毁后调用,vue实例上的所有东西都不可以用了
2.5 测试
2.5,1 测试代码
<!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.0"><script src="../js/vue.js"></script><title>Vue的生命周期</title>
</head>
<body><div id="app">年龄{{age}}<button @click="age=30">修改年龄</button></div><script>var v=new Vue({el:'#app',data:{age:20},beforeCreate() {console.log('beforeCreate----EL元素'+this.$el+'数据:'+this.age);},created() {console.log('created---EL元素'+this.$el+'数据:'+this.age);},beforeMount() {console.log('beforeMount---EL元素'+this.$el+'数据:'+this.age);},mounted() {console.log('mounted--EL元素'+this.$el+'数据:'+this.age);},beforeUpdate() {console.log('beforeUpdae--EL元素'+this.$el+'数据:'+this.age);},updated() {console.log('updated--EL元素'+this.$el+'数据:'+this.age);},beforeDestroy() {console.log('beforeDestory--EL元素'+this.$el+'数据:'+this.age);},destroyed() {console.log('destroyed--EL元素'+this.$el+'数据:'+this.age);},})</script>
</body>
</html>
2.5.2 运行截图
a 初次进入页面时
b 变更age值后
