Vue（生命周期、组件、路由）

最新推荐文章于 2022-09-07 16:44:27 发布
最新推荐文章于 2022-09-07 16:44:27 发布
阅读量252 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44861621/article/details/108181140
版权

Vue的整个生命周期主要有下图的八个红色框的部分

生命周期

vue的生命周期可以分为三个阶段

1.创建阶段 beforecreate() created() beforeMount() mounted()
2.运行阶段 beforeUpdate() updated()
3.销毁阶段 beforeDestory() destory()

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>vue生命周期函数</title>
</head>

<body>
  <div id="app">
    <span id="sp"> {{ msg }} </span>
    <input type="button" value="改变data的值" @click="changeData">
  </div>
  <!-- 引入Vue  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        msg: "hello Vue.js!",
      },
      methods: {
        changeData() {
          // this.msg = "Vue.js niubility!";
          this.msg = Math.random();
        }
      },
      // ====================初始化阶段====================
      // 1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定
      //和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
      beforeCreate() {
        console.log("beforeCreate: " + this.msg);
      },
      // 2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
      created() {
        console.log("created:" + this.msg);
      },
      // 3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
      beforeMount() {
        console.log("beforeMount: " + document.getElementById("sp").innerText);
      },
      // 4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
      mounted() {
        console.log("Mounted: " + document.getElementById("sp").innerText);
      },
      // ====================运行阶段====================
      // 5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅
      //是Vue实例中data数据变化页面显示的依然是原始数据
      beforeUpdate() {
        console.log("beforeUpdate-vue: " + this.msg);
        console.log("beforeUpdate-dom: " + document.getElementById("sp").innerText);
      },
      // 6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 
      // 页面中数据已经和data中数据一致
      updated() {
        console.log("updated-vue: " + this.msg);
        console.log("updated-dom: " + document.getElementById("sp").innerText);
      },
      // ====================销毁阶段====================
      // 7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
      beforeDestory() { },
      // 8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
      destoryed() { }
    });
  </script>
</body>

</html>

组件

组件的作用

减少vue实例对象中的代码量，可以根据不同功能来划分不同的组件，然后通过不同组件来完成页面的布局。便于开发管理和日常维护。

组件的使用
<body>
    <div id="app">
        <zzz></zzz>
    </div>

    <script>
    	//全局组件:可以在任意的vue实例范围内使用
        //组件的创建，参数1：组件的名称；
        //参数2：组件的配置对象 template: 用来书写组件的html代码(必须只存在一个容器)
        Vue.component('zzz', {
            template: '<div> <p> 这是一个组件 </p> </div>'
        })
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        })
    </script>
</body>
局部组件
<body>
    <div id="app">
        <zzz></zzz>
    </div>


    <template id="zj">
        <h1>这是组件</h1>
    </template>

    <script>
        //局部组件
        let zzz = {
            template: '#zj'
        }

        var app = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
                zzz: zzz
            }

        })
    </script>
</body>
props

作用：用来给组件传递静态或动态数据的。

  • 接收静态数据可以直接在组件中添加属性，然后在props中定义就可以使用
  • 接收动态数据则可以使用v-bind（简写:）来和data中的数据进行绑定达到接收动态数据的效果
  • 定义自己的数据：可以在组件内部使用类似data(){ return { myname: '李5', myage: this.age } }来定义组件自己的数据
<body>
<div id="app">
<local></local>
<local-data name="张三" age="23"></local-data>
<local-vue-data :name="username" :age="age"></local-vue-data>
<mydata :name="username" :age="age"></mydata>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const local = {
        template: '<div><h1>局部组件</h1></div>'
    };

    const localData = {
        template:'<div><h1>局部组件传值:姓名{{name}} 年龄：{{age}}</h1></div>',
        props:['name','age']
    }

    const localVueData = {
        template:'<div><h1>局部组件传递vue对象中的值:姓名{{name}} 年龄：{{age}}</h1></div>',
        props:['name','age']
    }

    const mydata = {
        template:'<div><h1>局部组件传递vue对象中的值:姓名{{myname}} 年龄：{{myage}}</h1></div>',
        //定义自己的数据
        data(){
            return {
                myname: '李5',
                myage: this.age
            }
        },
        props:['name','age']
    }
   
    var app = new Vue({
        el: "#app",
        data: {
            username:"李四",
            age:"24"
        },
        methods: {
        },

        components:{
            local,
            localData,
            localVueData,
            mydata
        }

    })
</script></body>

局部组件的事件

  1. 直接调用组件内的事件（将事件定义在methods中，正常调用）
  2. 调用vue中的事件（将事件定义在methods中，利用this.$emit('vuemethods')来调用vue中的事件）
    在这里插入图片描述
    1.组件内正常调用方法
    2.在组件内定义方法
    3.方法体内使用this.$emit('vuemethods')绑定vue中的事件
    4.在使用组件的地方将要绑定事件传入@vuemethods='changec' vuemethods和this.$emit('vuemethods')括号内的值一致，changec则是vue对象中定义的事件
    5.在vue对象中定义相应事件
<body>
<div id="app">
    <method @vuemethods='changec'></method>
</div>
<template id="method">
    <div>
        <button @click= "mychange">组件内的事件</button>
        <button @click= "vuemethod" >触发vue中的事件</button>
</div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const method = {
        template:"#method",
        methods:{
            mychange(){
                alert('组件内自己的事件')
            },
            vuemethod(){
                this.$emit('vuemethods')
            }
        }
    }
   
    var app = new Vue({
        el: "#app",
        data: {
            
        },
        methods: {
            changec() {
                alert("vue对象中的事件")
            } 
        },

        components:{
            method
        }

    })
</script>
</body>

路由

定义：根据请求的路径来按照一定的路由来进行转发，实现请求的统一管理

路由的使用
  1. 引入路由
```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
```
  1. 创建组件对象
```html
const login = {
        template: '<h1> 登陆 </h1>'
    };
    const reg = {
        template: '<h1> 注册 </h1>'
    };
```
  1. 创建路由对象规则
```html
//创建路由
        const routes = [{
            path: '/login',
            component: login
        }, {
            path: '/reg',
            component: reg
        }];

        const router = new VueRouter({
            routes: routes,
        });

```
  1. 将路由注册到vue实例中
```html
 var app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //注册路由
        router: router

    })
```
  1. 将路由显示到页面中
```html
<div id="app">
    <!-- 根据连接来切换路由 -->
    <a href="#/login">登陆</a>
    <a href="#/reg">注册</a>
    <router-view></router-view>
</div>
```
  1. 根据连接切换路由
```html
<div id="app">
    <!-- 根据连接来切换路由 -->
    <a href="#/login">登陆</a>
    <a href="#/reg">注册</a>
    <router-view></router-view>
</div>
```
  1. 默认路由
	//定义路由实例
        const router =new VueRouter({
            routes:[
                //默认路由
                //1.直接绑定（比较少用）
                // {path:"/",component:login},
                //2.重定向(常见)
                {path:'/',redirect:'login'},

                {path:'/login',component:login},
                {path:'/register',component:register}
            ]
        })
路由的参数传递
<body>
    <div id= "app">

        <!-- 1.利用a标签切换路由 -->
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>
        <!-- 2.利用router-link切换路由 tag 可以指定标签类型 -->
        <router-link to="/login?name=zhangsan&age=23" tag="button">登录</router-link>
        <router-link to="/register/张三/23" tag="button">注册</router-link>

        <router-view></router-view>
    </div>

    <template id = 'login'>
        <div>
            <h1>用户登录{{this.$route.query.name}}</h1>
        </div>
    </template>

    <template id = 'register'>
        <div>
            <h1>用户注册</h1>
        </div>
    </template>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/vue-router.js"></script>

    <script>

        //登录组件
        const login = {
            template:"#login",
            //获取路由传递的参数（？拼接的参数）
            created(){
                console.log('========================>'+this.$route.query.name)
            }
            
        }
        //注册组件
        const register = {
            template:"#register",
            //路由传递参数（restful风格）
            created(){
                console.log('========================>'+this.$route.params.name)
            }
        }
       
        //定义路由实例
        const router =new VueRouter({
            routes:[
                //默认路由
                //1.直接绑定（比较少用）
                // {path:"/",component:login},
                //2.重定向(常见)
                {
                    path:'/',
                    redirect:'login'
                },
                {
                    path:'/login',
                    component:login
                },
                {
                     //路由传递参数（restful风格）
                    path:'/register/:name/:age',
                    component:register
                }

            ]
        })

        const app = new Vue({
            el:'#app',
            data:{

            },
            methods:{

            },
            router:router
        })
    </script>

</body>

嵌套路由

<body>
    <div id= "app">
        <router-view></router-view>
    </div>
    <template id= 'first'>
        <div>
            <h1>首页</h1>
            <router-link to='/login' tag='button'>登录</router-link>
        	<router-link to='/register' tag='button'>注册</router-link>
            <router-view></router-view>
        </div>
    </template>

    <template id = 'login'>
        <div>
            <h2>用户登录</h1>
        </div>
    </template>

    <template id = 'register'>
        <div>
            <h2>用户注册</h1>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/vue-router.js"></script>

    <script>

        const first = {
            template:'#first'
        }


        //登录组件
        const login = {
            template:"#login"
        }
        //注册组件
        const register = {
            template:"#register"
        }
       
        //定义路由实例
        const router =new VueRouter({
            routes:[
                
                {path:'/',redirect:'first'},

                {
                    path:'/first',
                    component: first,
                    children:[
                        {path:'/login',component:login},
                        {path:'/register',component:register}
                    ]
                }

               
            ]
        })

        const app = new Vue({
            el:'#app',
            data:{

            },
            methods:{

            },
            router:router
        })
    </script>

</body>
皮埃no
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue基础/生命周期/路由
ZQD的博客
09-25 642
文章目录Vue基础知识点：生命周期：过滤器路由 vue-router前端路由核心：ui-router：vue中： Vue基础知识点： 1:全局的代表Vue.的 2:实例的代表this.或者new Vue(). 3:选项代表new Vue()的参数或者export default里边的属性 生命周期： 生命周期函数就是vue实例在某个时间点会自动执行的函数 beforeCreate created...
vue生命周期的探索
11-30
根实例的加载相关的生命周期（beforeCreate、created、beforeMount、mounted） 组件实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted) 全局路由勾子(router.beforeEach) 组件路由勾子...
vue中的生命周期
IT12345666的博客
05-22 500
生命周期总览 1. beforeCreate 当前生命周期是在vue实例对象创建之前的状态，此时 data ， props， method 中的参数或者方法都不能使用 在beforeCreate中没有找到参数 XXX 的定义 beforeCreate(){ // 打印 props console.log(this.v1); // 打印 data console.log(this.v2); // 执行方法 this.show(); } 2.created 而在此状态，我们就可以去使用一些方法来使
Vue2.0生命周期（组件钩子函数与路由守卫）
weixin_34203832的博客
03-24 273
组件相关钩子函数： beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destoryed还有两个特殊的（使用keep-alive）：activated、deactivated（不详述）v2.5.0+新增： errorCaptured (暂...
vue-router 路由守卫（路由生命周期）
qq_41709082的博客
08-10 2428
vue-router 路由生命周期（路由守卫） 1.全局&路由 使用 beforeEach((to,from,next)=>{…}) 发生路由 跳转时 立即执行 router.beforeEach((to,from,next)=>{ console.log('跳转到',to); console.log('来源',from); console.log('全局前置路...
vue路由及路由的生命周期(面试常问)
于景波的技术博客
08-11 5165
基础配置如下： 效果： 添加用户和用户列表： 效果： 使用名字进行跳转时，有点问题： 修改： 一个路由可以对应两个组件，也就是多视图： 效果： 添加用户： 用户列表： 带参数路由： ...
Vue组件和Route的生命周期实例详解
08-28
Vue组件和Route的生命周期实例详解 Vue组件和Route的生命周期是Vue框架中两个非常重要的概念，它们之间有着紧密的联系。组件生命周期是指组件从创建到销毁的整个过程中所经历的各种阶段，而Route的生命周期则是指...
vue 生命周期函数
12-21
在Vue应用中，每个组件都有其特定的生命周期，生命周期函数是理解Vue工作原理的关键部分。本篇文章将深入探讨Vue组件的生命周期及其相关的知识点。 1. **Vue组件生命周期** Vue组件从创建到销毁的过程可以分为几个...
vue面试题答案和解析，生命周期，组件通信，路由，指令，响应式原理
05-10
1. Vue.js的生命周期有哪些？它们的作用是什么？ 2. Vue.js中的组件通信有哪些方式？它们的优缺点是什么？ 3. Vue.js中的路由有哪些模式？它们的区别是什么？ 4. Vue.js中的指令有哪些？它们的作用是什么？ 5. ...
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue教程——07 Vue生命周期和路由
Dormiveglia-flx的博客
12-23 1579
vue教程——08 Vue生命周期和路由一 vue生命周期二 vue路由 一 vue生命周期 大白话： beforeCreate( 创建前 )：此时vue刚实例化完，数据观测和事件配置还有被调用。此时组件的选项对象还未创建，el更没挂在。因此，这个时候无法访问methods， data， computed等上的方法和数据。 created ( 创建后 ）：在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el依然没有挂载。因此
vue传值生命周期
weixin_43971105的博客
09-07 1003
vue生命周期相关的坑
vue中路由vue-router的使用和生命周期
weixin_41891519的博客
02-18 3486
vue-router Vue Router 是vue.js官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。 vue-router的使用 1.在项目src文件夹下新建名为router的文件夹 2.在router文件夹下新建index.js 3.在main.js中配置使用 vue-router跳转传参 1.query 2.params 3.采用url传参 vue-...
组件传参+生命周期知识点
qq_67263268的博客
07-27 320
emit(事件名,事件值)发送一次事件,事件名(counterchange)和事件值(counter)是自定义的。$event固定写法,事件的值(counterchange事件的值,也是子组件$emit的第二个参数)父传给子的数组是只读的(做默认值,读取显示)每个组件从创建到销毁都会经历一系列的过程，第一步CounterCom.vue。CounterCom.vue组件中。说明并不是每个生命周期都需要使用。//01接收参数并定义默认值。//02使用参数num。App.vue文件中。...
快速了解 Vue 的各个生命周期函数
CjBkl的博客
06-29 620
Vue 一共有 8 个生命阶段，分别是创建前、创建后、加载前、加载后、更新前、更新后、销毁 前和销毁后，每个阶段对应了一个生命周期的钩子函数。 （1）beforeCreate 钩子函数，在实例初始化之后，在数据监听和事件配置之前触发。因此在 这个事件中我们是获取不到 data 数据的。 （2）created 钩子函数，在实例创建完成后触发，此时可以访问 data、methods 等属性。但 这个时候组件还没有被挂载到页面中去，所以这个时候访问不到 $el 属性。一般我们可以在这
vue监听路由参数变化
weixin_30640769的博客
04-25 676
问题来源：项目中突然发现同一路由参数变化页面中一系列的生命周期函数一动不动，这样我怎么渲染页面？难道让我刷新页面，对于这个小学二年级水平的操作，我表示拒绝。 解决办法：在vue项目中一说监听改变数据。应该第一时间想起watch,对，没错就是它，直接上代码。 代码如下： watch:{ $route(){ 　　　　//　例如：路由 从/user?id=1 改变成 /use...
vue路由传参方式的几种方式与获取参数详解
热门推荐
weixin_47013351的博客
04-17 2万+
一、声明式传参 1.params传参(显示参数) 在url中会显示出传参的值，刷新页面不会失去拿到的参数，使用该方式传值的时候，需要子路由提前配置好参数： //路由参数配置 const router = new VueRouter({ routes: [{ path: '/about/:id', component: User }] }) //声明式导航使用 <router-link to="/about/12">跳转</router-link>
路由传递参数的两种方式 [web前端][Vue框架]
m0_57001006的博客
06-06 680
前面的时候我们经常会看到导航栏中的输入地址后面加了一个? , 后面就是一些参数, 那么这里我们就来讲解我们如果通过路由来传递参数 小结: 我们的组件和Vue一样都是有声明周期的, 那么也就有相应的声明周期钩子函数, 我们在组件中created声明周期钩子函数中可以获取到路由传递过来的参数...
Vue学习总结——Vue2生命周期
qq_53008257的博客
04-26 2445
Vue2生命周期 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 vue中每一个组件都会创建一个vue实例，这个实例从出生到死亡，经历的过程如下（官网给出） 生命周期函数（也叫生命周期勾子），用于在Vue实例 创建的生命周期的不同阶段，执行业务逻辑 。Vue2有8个生命周期钩子，都是成对出现： 分别是
vue3 路由生命周期
最新发布
08-09
Vue 3 中的路由生命周期与 Vue 2 中的路由生命周期有所不同。在 Vue 3 中，Vue Router 的生命周期钩子函数被移除了，取而代之的是使用组合式 API 来处理路由相关的逻辑。 在使用 Vue 3 + Vue Router 时，你可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值