小白学VUE——组件、生命周期、路由

最新推荐文章于 2024-06-16 18:31:13 发布

热爱旅行的小李同学

最新推荐文章于 2024-06-16 18:31:13 发布

阅读量281

点赞数 1

分类专栏：前端文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/m0_46275020/article/details/106071950

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小白学VUE——组件、生命周期、路由

文章目录

小白学VUE——组件、生命周期、路由

前言：

小白学习VUE参考了：vue官网：
https://cn.vuejs.org/

之前写的VUE入门篇： https://blog.csdn.net/m0_46275020/article/details/106055312

小白收藏了一些优质文章以便未来深入学习VUE作参考：

关于VUE生命果周期详细知识可以参考： https://segmentfault.com/a/1190000011381906
关于VUE组件详细知识可以参考：
https://cn.vuejs.org/v2/guide/components-registration.html
关于VUE路由详细知识可以参考：
https://www.jianshu.com/p/9a7d79249741
https://www.cnblogs.com/dengyao-blogs/p/11562257.html

VUE组件

可以用 Vue.component 创建组件
格式如下：

Vue.component('my-component-name', {
  // ... 选项 ...
})

局部组件

<body>
    <div id="app">
        <!-- 导入组件 -->
        <Navbar></Navbar>

    </div>



    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{},

           //定义vue使用的组件
           components: {
               //这个组件只能在这个文件有效
               //组件的名字
               'Navbar': {
                   //组件的内容
                   template: '<ul><li>首页</li><li>学员管理</li></ul>'
               }

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

效果：
在这里插入图片描述

全局组件

//定义全局组件
Vue.component('Navbar',{
    template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
)

使用:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <script src="components/Navbar.js"></script>
</head>

<body>
    <div id="app">

        <!-- 导入全局组件 -->
        <Navbar></Navbar>

    </div>

    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>

</html>

效果：
在这里插入图片描述

VUE生命周期

图片摘自官网
在这里插入图片描述
重点了解一下create和mounted
create 在页面渲染之前执行，mounted在页面渲染之后执行

<body>
    <div id="app">
        <p>hello vue</p>
    </div>

    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{},
           //在页面渲染之前执行
           created(){
               debugger//断点调试
                console.log("created...");
           },
           //在页面渲染之后执行
           mounted(){
               debugger
                console.log("mounted...")
           }
        });
    </script>
</body>

断点调试结果如图：
在这里插入图片描述

vue路由

路由使用步骤：
引入JS
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-router.min.js"></script>
</head>

<body>
    <div id="app">

        <h1>hello vue-router</h1>

        <p>
            <!-- 使用 router-link 组件来导航 -->
            <!-- 通过传入 to 属性指定链接 -->
            <!-- ruoter-line 默认会被渲染成一个a标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link> 
        </p>

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
        
    </div>

    <script>

        //1.定义路由组件，可以从其他文件import进来
        const Welcome = { template: '<div>欢迎</div>' }
        const Student = { template: '<div>学生列表</div>' }
        const Teacher = { template: '<div>教师列表</div>' }

        //2. 定义路由，每个路由映射一个组件
        const routes = [
            { path: '/', redirect: '/welcome' },//设置默认指向的路径
            { path: '/welcome', component: Welcome },//设置映射的组件
            { path: '/student', component: Student },
            { path: '/teacher', component: Teacher }
        ]

        //3.创建router路由实例，然后传routes配置
        const router = new VueRouter({
            routes // （缩写）相当于： routes: routes
        })

        // 4.创建和挂在根实例，从而让整个应用都有路由功能
        const app = new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>