笔记

问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <counter :num="count" @incr="add" @decr="reduce"></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //定义局部组件
    const counter = {//声明自定义组件并设置其名称
        template:`<div>
                      <button @click="handleAdd">+</button>
                      <button @click="handleReduce">-</button>
                      <h1>NUM:{{ num }}</h1>
                </div>`,//自定义组件
        props:['num'],  //子组件接收title属性
        methods: {
            handleAdd(){
                this.$emit('incr');
            },
            handleReduce(){
                this.$emit("decr");
            }
        }
    };
    const app = new Vue({//(1)声明父级标签
        el:"#app",  //element ,vue 作用的标签
        data:{
            count: 0,//id为app的标签对应的数据
        },
        components:{//声明组件，在id为app的组件当中声明子组件，其子组件为introduce
            counter
        },
        methods:{
            add(){
                this.count++;
            },
            reduce(){
                this.count--;
            }
        }
    });
</script>
</body>
</html>

在这个代码中的NUM：{{ num }} 所表达的意思是什么呢？

答：是prop动作的一个属性参数

路由：当我们想要实现一个跳转的功能，我们可以通过路由来实现。

路由的格式：

import * as VueRouter from 'vue-router'

//注释；通常路由的路径是以一个对象的形式来进行跳转的。所以我们先定义一个变量来存放路径的对象。
const RoutesList = [
  {
    path: '路径名',
    component: () => import('项目目录的view下面的视图组件。'),
    hidden: false //这是设置这个路径在项目初始化后的状态。是一个不可见的，只有访问后才可见。
    children: [
        {
            path: '路径名',
            component: () => import('项目目录的view下面的视图组件。'),
            hidden: false //这是设置这个路径在项目初始化后的状态，是一个不可见的，只有访问后才可见。  
        },
        …… 可以多个对象【路径】。 
    ]
  },
  …… 同理，这里也是可以多个对象【路径】。
]

使用方法；

在定义好上面的路径后，就可以将它注入到vue-router中了，然后把router抛出去，让其他文件可以访问。

随后，我们可以在其他的vue文件中导入router了。

然后开发请求。

根据官方文档来开发。

记录：

路由一次会记录一次。再次点击时会在此基础上进入深层的地址

路由跳转的方式

通过this.store.**方式来将后端返回的值传递到后台的首页。
随后弹出。

跳转的代码是通过router-link来实现。该代码是一个a标签的封装后的代码。其本质就是一个a标签。

我们可以在router实例文件中将其中的子组件的路径给添加上name的属性。

然后通过这个属性来进行路径匹配跳转，

路由传递参数的方式有两种：query 和 params。这两种的传递参数的方法的最大区别是，query所传递的参数是不会随着界面刷新而丢失。相反的params则是不同。但在某些场景中，params确是最好的选择，比如但登录成功后的提示。这些只需要我们在登录成功后提示一次就不用提示了。要想在提示则需再次登录才能够实现。

路由的带参数跳转

要实现带参数跳转，

要实现带参数跳转，我们可以有很多方法，有通过跳转时，通过params 和 query 来实现，有通过vuex插件库来存放登录状态，让子组件读取到并打印出来

生命周期

重点知识：生命周期的了解和使用

在vue项目中，生命周期至关重要，如果不了解生命周期这个概念，你在往后的开发中，将会受到很大的阻力。

不同组件的生命周期是不同的，项目本身是有全部的生命周期，当我们在初始中我们是可以通生命周期的钩子来执行某些操作。如一些初始化之类的。

Vue 插件：

Axios 、element-UI、js-cookie、normalize、vue-router、Vuex

4.3 KiB Raw Blame History

笔记

路由跳转的方式

路由的带参数跳转

生命周期

4.3 KiB

Raw Blame History