# Vue生命周期总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的生命周期</title>
<!-- Vue的生命周期:Vue实例由创造到消亡的过程 Vue生命周期钩子:也是Vue声明周期函数,伴随Vue的生命周期自动触发的,不需要人为手动触发 生命周期的三个阶段 1、初始化阶段 2、运行阶段 3、销毁阶段 -->
</head>
<body>
<div id="app">
<h2 id="h1">{{msg}}</h2>
<input type="text" id="h2" v-model="msg">
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script> let app = new Vue({ el:"#app" , data:{ msg:"vue的生命周期" }, methods:{}, computed:{}, /*初始化阶段函数*/ beforeCreate(){ //执行此方法的时候,我么的Vue实例中初始化了其内部的生命周期的钩子函数,和内部事件! console.log("beforeCreate :"+this.msg); //不能获取到 }, created(){ //执行此方法的时候,我们的Vue实例当中除了上述内容,又额外注入了data、methods、computed等属性的注入和校验工作 console.log("created :"+this.msg); //能获取到 }, beforeMount(){ //执行此方法的时候,我们的el指向的的html还是一个模板,并没有数据的渲染(有组件渲染组件,没组件渲染绑定的el) console.log("beforeMount :"+document.getElementById("h1").innerText); }, mounted(){ //执行该方法时候,我们的Vue会创建虚拟DOM进行数据渲染 console.log("mounted :"+document.getElementById("h1").innerText); }, /*运行阶段的函数*/ beforeUpdate(){ //运行阶段第一个函数,此时我们vue实例当中的data属性发生改变,但是页面数据还没改变 console.log("beforeUpdate data:"+this.msg); //能获取到 console.log("beforeUpdate view:"+document.getElementById("h1").innerText); }, updated(){ //执行此方法的时候data属性和页面中的数据全部完成改变 console.log("updated data:"+this.msg); console.log("updated view:"+document.getElementById("h1").innerText); }, /*销毁阶段的函数*/ beforeDestroy(){ //执行这个函数的时候,所有数据都是存在的,还未执行销毁 (测试需要借助浏览器执行app.$destroy()) console.log("=======beforeDestroy:开始销毁======="); }, destroyed(){ console.log("destroyed:全部销毁"); } }) </script>
组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不同业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。
//1.开发全局组件
Vue.component('login',{
template:'<div><h1>用户登录</h1></div>'
});
//2.使用全局组件 在Vue实例范围内
<login></login>
# 注意:
- 1.Vue.component用来开发全局组件 参数1: 组件的名称 参数2: 组件配置{} template:''用来书写组件的html代码 template中必须有且只有一个root元素
- 2.使用时需要在Vue的作用范围内根据组件名使用全局组件
- 3.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用
//局部组件登录模板声明
let login ={ //具体局部组件名称
template:'<div><h2>用户登录</h2></div>'
};
const app = new Vue({
el: "#app",
data: {},
methods: {},
components:{ //用来注册局部组件
login:login //注册局部组件
}
});
//局部组件使用 在Vue实例范围内
<login></login>
//1.声明局部组件模板 template 标签 注意:在Vue实例作用范围外声明
<template id="loginTemplate">
<h1>用户登录</h1>
</template>
//2.定义变量用来保存模板配置对象
let login ={ //具体局部组件名称
template:'#loginTemplate' //使用自定义template标签选择器即可
};
//3.注册组件
const app = new Vue({
el: "#app",
data: {},
methods: {},
components:{ //用来注册局部组件
login:login //注册局部组件
}
});
//4.局部组件使用 在Vue实例范围内
<login></login>
作用:props用来给组件传递相应静态数据或者是动态数据的
//1.声明组件模板配置对象
let login = {
template:"<div><h1>欢迎:{{ userName }} 年龄:{{ age }}</h1></div>",
props:['userName','age'] //props作用 用来接收使用组件时通过组件标签传递的数据
}
//2.注册组件
const app = new Vue({
el: "#app",
data: {},
methods: {},
components:{
login //组件注册
}
});
//3.通过组件完成数据传递
<login user-name="小陈" age="23"></login>
# 总结:
1.使用组件时可以在组件上定义多个属性以及对应数据
2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值
//1.声明组件模板对象
const login = {
template:'<div><h2>欢迎: {{ name }} 年龄:{{ age }}</h2></div>',
props:['name','age']
}
//2.注册局部组件
const app = new Vue({
el: "#app",
data: {
username:"小陈陈",
age:23
},
methods: {},
components:{
login //注册组件
}
});
//3.使用组件
<login :name="username" :age="age"></login> //使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化
//组件声明的配置对象
const login = {
template:'<div><h1>{{ msg }} 百知教育</h1><ul><li v-for="item,index in lists">{{ index }}{{ item }}</li></ul></div>',
data(){ //使用data函数方式定义组件的数据 在templatehtml代码中通过插值表达式直接获取
return {
msg:"hello",
lists:['java','spring','springboot']
}//组件自己内部数据
}
}
const login={
template:'<div><input type="button" value="点我触发组件中事件" @click="change"></div>',
data(){
return {
name:'小陈'
};
},
methods:{
change(){
alert(this.name)
alert('触发事件');
}
}
}
# 总结
1.组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可
2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例
在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用
//1.声明组件
const login = {
template:"<div><h1>百知教育 {{ uname }}</h1> <input type='button' value='点我' @click='change'></div>",
data(){
return {
uname:this.name
}
},
props:['name'],
methods:{
change(){
//调用vue实例中函数
this.$emit('aaa'); //调用组件传递过来的其他函数时需要使用 this.$emit('函数名调用')
}
}
}
//2.注册组件
const app = new Vue({
el: "#app",
data: {
username:"小陈"
},
methods: {
findAll(){ //一个事件函数 将这个函数传递给子组件
alert('Vue 实例中定义函数');
}
},
components:{
login,//组件的注册
}
});
//3.使用组件
<login @find="findAll"></login> //=====> 在组件内部使用 this.$emit('find')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-vue组件中的事件传递</title>
<!-- 插槽slot的作用 : 扩展现有的组件让组件变得更加的灵活,类似我们的usb接口一样! 1:具名插槽:<slot name="aa"></slot> 2:默认插槽:<slot></slot> -->
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<login></login>
<hr>
<login><span slot="bb">欢迎进入我的网站</span></login>
<hr>
<login><span slot="aa">欢迎进入我的网站 {{msg}}</span></login> <!--会将span放入指定的插槽-->
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script> const login = { template:`<div><slot name="aa"></slot> <h3>用户登陆</h3> <slot name="bb"> </slot></div>` , /* 此处的插槽就类似一个占位符,不传参不显示 为每个插槽赋予名字! * */ data(){ return{ } }, methods: { } } ; const app = new Vue({ el:"#app" , data:{ msg:"插槽的使用(Slot)" , counter : 0 , }, methods:{ } , components:{ login, //局部组件 } }) </script>
路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> //vue 路由js
一定注意的是我们的vue-router依赖于vue,要在vue引入之后引入!!!
//声明组件模板
const login = {
template:'<h1>登录</h1>'
};
const register = {
template:'<h1>注册</h1>'
};
//创建路由对象
const router = new VueRouter({
routes:[
{path:'/login',component:login}, //path: 路由的路径 component:路径对应的组件
{path:'/register',component:register}
]
});
const app = new Vue({
el: "#app",
data: {
username:"小陈",
},
methods: {},
router:router //设置路由对象
});
<!--显示路由的组件-->
<router-view></router-view>
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>
作用:用来替换我们在切换路由时使用a标签切换路由
好处:就是可以自动给路由路径加入#不需要手动加入
<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="/register" tag="button">点我注册</router-link>
# 总结:
1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签
作用:用来在第一次进入界面是显示一个默认的组件
//创建路由规则对象
const router = new VueRouter({
routes:[ //配置路由规则
{path:'/',redirect:"/login"}, //推荐使用: 访问根路由默认会重定向到login
{path:'/login',component:login},
{path:'/reg',component:register},
{path:'*',component:notfound}, //这个路由是*过滤所有的路由请求,可以放在任何位置,如果是/*一定要放在最后面,
// {path:'/',component:login} ,可以但是不推荐!!!
] ,
});
<router-link to="/login?id=21&name=zhangsan">我要登录</router-link>
const login = {
template:'<h1>用户登录</h1>',
data(){return {}},
methods:{},
created(){
console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name);
}
};
<router-link to="/register/24/张三">我要注册</router-link>
var router = new VueRouter({
routes:[
{path:'/register/:id/:name',component:register} //定义路径中获取对应参数
]
});
const register = {
template:'<h1>用户注册{{ $route.params.name }}</h1>',
created(){
console.log("注册组件中id: "+this.$route.params.id+this.$route.params.name);
}
};
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品添加</router-link>
<router-link to="/product/edit">商品编辑</router-link>
<router-view></router-view>
</div>
</template>
//声明组件模板
const product={
template:'#product'
};
const add = {
template:'<h4>商品添加</h4>'
};
const edit = {
template:'<h4>商品编辑</h4>'
};
const router = new VueRouter({
routes:[
{
path:'/product',
component:product,
children:[
{path:'add',component: add},
{path:'edit',component: edit},
]
},
]
});
const app = new Vue({
el: "#app",
data: {},
methods: {},
router,//定义路由对象
});
<router-link to="/product">商品管理</router-link>
<router-view></router-view>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/m0_46571920/article/details/121351361
内容来源于网络,如有侵权,请联系作者删除!