5.17笔记

最新推荐文章于 2024-10-18 17:51:23 发布

小十三_lemon

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量155

点赞数

分类专栏：基础文章标签： vue javascript

本文链接：https://blog.csdn.net/user0213/article/details/106183838

版权

基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue组件

<body>
    <div id="app">
        <a href="" @click.prevent="botton">注册</a>
        <a href="" @click.prevent="botton">登录</a>
        <ssn v-if="msg"></ssn>
        <ssnn v-else="msg"></login>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('ssn',{
            template:`
                <h1>注册页面</h1>
                `
        })
        Vue.component('ssnn',{
            template:`
                <h1>登录页面</h1>
                `
        })
        new Vue({
            el:"#app",
            data:{
                msg:true
            },
            methods:{
                botton(){
                    this.flag=!this.flag;
                }
            }
        })
    </script>

vue生命周期

钩子函数
作用：钩子函数贯穿vue实例的整个过程，让用户给vue实例的不同阶段提供了添加代码的机会。
1、beforeCreate: 创建实例对象之前执行
2、 created 创建实例对象之后执行
3、beforeMount: 页面挂在成功之前
4、 mounted 页面挂在成功之后执行
5、beforeUpdate 组件更新之前执行
6、 update 组件更新之后执行
7、 beforeDestroy 实例销毁之前执行
8、destroyed 实例销毁完毕执行

vue官网图例 在这里插入图片描述

<body>
    <div id="app">
        {{ssn}}
        <button @click="ssn">点击</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
     var vm= new Vue({
            el:"#app",
            data:{
                ssn:"zhangsan"
            },
            methods:{
                chg(){
                    this.$data.msg="lisi"
                }
            },
            beforeCreate(){
                alert('实例创建之前执行');
                console.log('实例创建之前执行');
            },
            created(){
                alert('实例创建之后执行');
                console.log('实例创建之后执行');
                console.log(this.$data.msg);
            },
            beforeMount(){
                alert('页面挂载之前执行');
                console.log('页面挂载之前执行');
            },
            mounted(){
                alert('页面挂在之后执行')
                console.log('页面挂在之后执行')
            },
            beforeUpdate(){
                alert('更新执行要执行的')
                console.log('更新执行要执行的')
            },
            updated(){
                alert('跟新之后要执行的')
                console.log('跟新之后要执行的')
            },
            beforeDestroy(){
                console.log('实例销毁之前');
                console.log(this.$data.msg);
                console.log(vm)
            },
            destroyed(){
                console.log('实例销毁之后');
                console.log(this.$data.msg);
                console.log(vm)
            }
        })
    </script>
</body>