Vue_03 vue的生命周期、组件、插槽Slot、路由Router

admin • • 前端

1. Vue 生命周期

Vue 实例生命周期 ===> java 对象生命周期(初始化阶段 运行阶段 销毁阶段) 生命周期钩子 ====> 生命周期函数

Vue实例从创建到销毁过程中自动触发一些列函数 ====> Vue生命周期函数(钩子)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rs1zGZMQ-1637031370374)(Vue实战.assets/lifecycle.png)]

Vue生命周期总结

# 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>

2. Vue中组件(component)

2.1 组件作用

组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不同业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。

2.2 组件使用

2.2.1 全局组件注册

说明:全局组件注册给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.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用

2.2.2 局部组件注册

说明:通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加

  • 第一种开发方式
//局部组件登录模板声明
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>

2.3 Prop的使用

作用:props用来给组件传递相应静态数据或者是动态数据的

2.3.1 通过在组件上声明静态数据传递给组件内部

//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数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值

2.3.2 通过在组件上声明动态数据传递给组件内部

//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属性发生变化,组件内部数据跟着变化

2.3.3 prop的单向数据流

单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

  • 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

  • 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—摘自官网

2.4 组件中定义数据和事件使用

1. 组件中定义属于组件的数据
//组件声明的配置对象
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']
    }//组件自己内部数据
  }
}
2.组件中事件定义
 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 指向的是当前组件的实例

2.5 向子组件中传递事件并在子组件中调用该事件

在子组件中调用传递过来的相关事件必须使用 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')

2.Vue中插槽Slot

插槽可以看作一个占位符，减少了我们组件的使用，增强组件的复用

<!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>

3.Vue中路由 (Vue Router)

3.1 路由

路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

3.2 作用

用来在vue中实现组件之间的动态切换

3.3 使用路由

  1. 引入路由
    <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引入之后引入!!!

  2. 创建组件对象
    //声明组件模板
const login = {
  template:'<h1>登录</h1>'
};

const register = {
  template:'<h1>注册</h1>'
};
  3. 定义路由对象的规则
     //创建路由对象
const router = new VueRouter({
  routes:[
    {path:'/login',component:login},   //path: 路由的路径  component:路径对应的组件
    {path:'/register',component:register}
  ]
});
  4. 将路由对象注册到vue实例
    const app = new Vue({
  el: "#app",
  data: {
    username:"小陈",
  },
  methods: {},
  router:router   //设置路由对象
});
  5. 在页面中显示路由的组件
    <!--显示路由的组件-->
<router-view></router-view>
  6. 根据连接切换路由
    <a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

3.4 router-link使用

作用:用来替换我们在切换路由时使用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渲染成指定的标签

3.5 默认路由

作用:用来在第一次进入界面是显示一个默认的组件

    //创建路由规则对象
    const router = new VueRouter({
       routes:[   //配置路由规则
           {path:'/',redirect:"/login"},  //推荐使用: 访问根路由默认会重定向到login
           {path:'/login',component:login},
           {path:'/reg',component:register},
           {path:'*',component:notfound},  //这个路由是*过滤所有的路由请求,可以放在任何位置,如果是/*一定要放在最后面,
          // {path:'/',component:login} ,可以但是不推荐!!!

       ]  ,
    });

13.6 路由中参数传递

  • 第一种方式传递参数 传统方式

  1. 通过?号形式拼接参数

     <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

  2. 组件中获取参数

    const login = {
  template:'<h1>用户登录</h1>',
  data(){return {}},
  methods:{},
  created(){
    console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name);
  }
};
  • 第二种方式传递参数 restful

  1. 通过使用路径方式传递参数

    <router-link to="/register/24/张三">我要注册</router-link>
var router = new VueRouter({
  routes:[
    {path:'/register/:id/:name',component:register}   //定义路径中获取对应参数
  ]
});

  2. 组件中获取参数

    const register = {
  template:'<h1>用户注册{{ $route.params.name }}</h1>',
  created(){
    console.log("注册组件中id:   "+this.$route.params.id+this.$route.params.name);
  }
};

13.7 嵌套路由

  1. 声明最外层和内层路由
    <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>'
};
  2. 创建路由对象含有嵌套路由
    const router = new VueRouter({
        routes:[
            {
                path:'/product',
                component:product,
                children:[
                    {path:'add',component: add},
                    {path:'edit',component: edit},
                ]
            },
        ]
    });
  3. 注册路由对象
    const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    router,//定义路由对象
});

  4. 测试路由

    <router-link to="/product">商品管理</router-link>
<router-view></router-view>
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>