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值后
