当前位置：首页 > news >正文

Vue框架学习篇(五)

news 2025/7/6 11:45:11

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 引入外部组件,并给其取名

//这里的相对地址的是以当前html文件为基准的，组件名称不要和标签名冲突了哦
var 组件名=httpVueLoader(组件相对路径地址);

d 注册组件

//这里的组件名和c步骤的组件名是同一个
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><!-- ①引入外部vue组件必须要的js文件--><script src="../js/httpVueLoader.js"></script>
</head>
<body><div id="app"><tou></tou><div>这里是中间部分的内容</div></div><script>//②引入外部vue组件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 使用方法

//在.vue文件的script标签里面写如下代码
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><!-- ①引入外部vue组件必须要的js文件--><script src="../js/httpVueLoader.js"></script>
</head>
<body><div id="app"><tou></tou><div>测试绑定事件</div></div><script>//②引入外部vue组件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><!-- ①引入外部vue组件必须要的js文件--><script src="../js/httpVueLoader.js"></script>
</head>
<body><div id="app"><div>测试绑定事件</div><wei :r="className1" :m="className2"></wei></div><script>//②引入外部vue组件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() {//el,data部分没有用//获取el这个对象console.log('beforeCreate----EL元素'+this.$el+'数据:'+this.age);},created() {//date methods都有了,最早可以在这里面设置数据console.log('created---EL元素'+this.$el+'数据:'+this.age);},beforeMount() {console.log('beforeMount---EL元素'+this.$el+'数据:'+this.age);},mounted() {//数据初始话了也渲染上去了 el和data都有console.log('mounted--EL元素'+this.$el+'数据:'+this.age);//    console.log('EL元素'+this.$el);},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>