0927vue，嵌套传参，监听，生命周期

小俊会编码

已于 2022-09-28 08:48:05 修改

阅读量83

点赞数

分类专栏：框架文章标签： vue.js

于 2022-09-27 10:10:19 首次发布

本文链接：https://blog.csdn.net/qq_60555957/article/details/127066329

版权

框架专栏收录该内容

29 篇文章 1 订阅

订阅专栏

本文介绍了Vue.js中路由参数的传递，包括普通传参和嵌套传参的方式。同时，详细讲解了计算属性的普通实现，以及如何使用watch进行数据监听，利用watch实现对数据变化的响应。此外，还探讨了路由监听的用法以及组件的生命周期，帮助开发者更深入地掌握Vue应用的构建技巧。

摘要由CSDN通过智能技术生成

1.路由传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<!--网页-->
<div id="app">
    <router-link to="/js?name=czj&age=22" tag="button">军事</router-link>
    <router-link to="/ty/czj/18" tag="button">体育</router-link>
    <hr>
    <router-view></router-view>
</div>
<!---->
<template id="js">
    <div>
        <p>军事{{this.$route.query.name}}</p>
    </div>
</template>
<template id="ty">
    <div>
        <p>体育{{this.$route.query.name}}</p>
    </div>
</template>
<!--脚本-->
<script>
    //定义路由组件
    const js={
        template: '#js',
        created: function (){   //生命周期方法
            console.log(this.$route);
            console.log(this.$route.query.name);
            console.log(this.$route.query.age);
        }
    }
    const ty={
        template: '#ty',
        created: function (){
            console.log(this.$route);
            console.log(this.$route.params.name);
            console.log(this.$route.params.age);
        }
    }
    //定义路由规则
    const routes=[
        {path: '/js',component:js},     //参数存于$route.query中
        {path: '/ty/:name/:age',component:ty}  //参数存于$route.params中
    ]
    //创建路由实例
    const router = new VueRouter({
        routes:routes
    })
    //vue对象控制对应网页
    var vue = new Vue({
        el: '#app',
        router: router,
        data: {  //定义网页使用的参数
            name: '张麻子'
        }
    })
    //1.const定义的变量不可以修改
    //2.var定义的变量可以修改,如果不初始化则会输出undefine,不会报错
    //3.let是块级作用域,在函数内部用let定义变量,对函数外无影响
</script>
</body>
</html>

2.路由嵌套传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
<!--网页-->
<div id="app">
    <!--7.vue对象控制的对应网页-->
    <router-link to="/one" tag="button">页面one</router-link>
    <router-link to="/two" tag="button">页面two</router-link>
    <hr>
    <!--8.路由的出口，路由匹配的组件将会渲染在这里-->
    <router-view></router-view>
</div>
<!--1.定义的模板one-->
<template id="one">
    <div>
        <p>你好,这是one</p>
        <router-link to="/onesub1" tag="button">页面oneSub1</router-link>
        <router-link to="/onesub2" tag="button">页面oneSub2</router-link>
        <hr>
        <!--9.路由的出口，路由匹配的组件将会渲染在这里-->
        <router-view></router-view>
    </div>
</template>
<!--2.定义one下面的两个子模板-->
<template id="onesub1">
    <div>
        <p>这是one的子页面1</p>
    </div>
</template>
<template id="onesub2">
    <div>
        <p>这是one的子页面2</p>
    </div>
</template>
<!--1.定义的模板two-->
<template id="two">
    <div>
        <p>你好,这是two</p>
    </div>
</template>
<!--脚本-->
<script>

    /*3.定义两个子组件*/
    const onesub1 = {
        template: "#onesub1"
    }
    const onesub2 = {
        template: "#onesub2"
    }

    /*4.定义组件one*/
    const one = {
        template: '#one',
        components: {
            onesub1: onesub1,
            onesub2: onesub2,
        }
    }
    /*4.定义组件*/
    const two = {
        template: '#two'
    }


    /*5.定义路由规则*/
    const routes = [
        {
            path: '/one',
            component: one,
            children: [/*这里说明了下面是一级的子路由，也就是嵌套路由*/
                {path: '/onesub1', component: onesub1},
                {path: '/onesub2', component: onesub2},
            ]
        },
        {
            path: '/two', component: two
        }
    ]

    /* const routes = [
         {
             path: '/',
             components: {
                 name1: one,
                 name2: two
             }
         }
     ]*/

    /*6.创建路由实例*/
    const router = new VueRouter({
        routes: routes
    })

    //vue对象控制对应网页
    var vue = new Vue({
        el: '#app',
        router: router,
        data: {  //定义网页使用的参数
            name: '张麻子'
        }
    })
</script>
</body>
</html>

3.计算普通写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="text" @keyup="change1" v-model="n1">+
  <input type="text" @keyup="change1" v-model="n2">=
  <input type="text" v-model="r">
</div>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
          n1:0,
          n2:0,
          r:0
        },
      methods:{
          change1() {
            this.r=parseInt(this.n1)+parseInt(this.n2)
          }
      }
    });
</script>
</body>
</html>

4.watch监听机制

通过案例，我们可以知道watch可以监听数据，可以拿到我们监听的路径，可以拿到我们所操作的东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="n1">+
    <input type="text" v-model="n2">=
    <input type="text" v-model="r">
</div>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            n1: 0,
            n2: 0,
            r: 0
        },
        methods: {
            /* change1() {
               this.r=parseInt(this.n1)+parseInt(this.n2)
             }*/
        },

        watch: {
            //监听
            n1: function (newValue, oldValue) {
                this.r = parseInt(this.n1) + parseInt(this.n2);
                console.log(newValue + "," + oldValue)
            },
            n2: function (newValue, oldValue) {
                this.r = parseInt(this.n1) + parseInt(this.n2);
                console.log(newValue + "," + oldValue)
            }
        }
    });
</script>
</body>
</html>

5.路由监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <!--需要用到路由，需要导入jar包-->
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--6.将定义好的路由在域里面显示-->
    <router-link to="/one" tag="button">一</router-link>
    <router-link to="/two" tag="button">二</router-link>
    <hr>
    <router-view></router-view>
</div>
<!--1.定义好要显示的两个模板-->
<template id="one">
    <div>
        <p>one</p>
    </div>
</template>
<template id="two">
    <div>
        <p>two</p>
    </div>
</template>
<script>
    /*2。定义好两个组件*/
    const one = {
        template: '#one'
    }
    const two = {
        template: '#two'
    }
    /*3.定义路由的路线*/
    const routes = [
        {path: '/one', component: one},
        {path: '/two', component: two}
    ]

    /*4.定义路由*/
    const router = new VueRouter({
        routes: routes
    })

    var vue = new Vue({
        el: "#app",
        /*5.将定义好的路由应用到组件上*/
        router: router,
        data: {},
        methods: {},
        /*7.监听路由的路径*/
        watch: {/*$route.path*/
            "$route.path": function f(newValue, oldValue) {
                console.log(newValue + "," + oldValue);
            }
        }
    });
</script>
</body>
</html>

6.生命周期

创建期间的生命周期方法
beforeCreate
created
beforeMount
mounted
运行期间的生命周期方法
beforeUpdate
update
销毁期间的生命周期方法
beforeDestory
destoryed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <!--
        创建期间的生命周期方法
        beforeCreate
        created
        beforeMount
        mounted
        运行期间的生命周期方法
        beforeUpdate
        update
        销毁期间的生命周期方法
        beforeDestory
        destoryed
    -->
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
</div>

<script>
    var vue = new Vue({
        el: "#app",
        beforeCreate:function (){
            //这里打印不出msg，因为还没有初始化好
            console.log(this.msg);
            console.log("beforeCreate:"+this.say());
        },
        created:function (){//1.data可操作
            //data和methods中的内容,已经初始化好
            console.log(this.msg);
            console.log("created:"+this.say());
        },
        beforeMount:function (){//2.data读到内存,还未放到页面中
            //页面的内容，已经生成html在内存中,但还没渲染到页面上
            console.log(document.querySelector("p").innerHTML);
            console.log(document.querySelector("p").innerText);
        },
        mounted:function (){//3.内存-->页面上
            //页面上的内容,数据已经渲染到页面上
            console.log(document.querySelector("p").innerHTML)
            console.log(document.querySelector("p").innerText)
        },
        data: {
            msg:"lj"
        },
        methods:{
            say(){
                return"say method";
            }
        }

    });
</script>
</body>
</html>