快速入门Vue（二）

小蔡coding
90 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

2.4 组件（重点）

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

image-20220410231714806

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

全局组件

所有实例都能用全局组件。

<div id="app">
    <runoob></runoob>
</div>

<script>
    // 注册
    Vue.component('runoob', {
        template: '<h1>自定义组件!</h1>'
    })
    // 创建根实例
    new Vue({
        el: '#app'
    })
</script>

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

<body>
    <div id="app">
        <runoob></runoob>
    </div>

    <script>
        var Child = {
            template: '<h1>自定义组件!</h1>'
        }

        // 创建根实例
        new Vue({
            el: '#app',
            components: {
                // <runoob> 将只在父模板可用
                'runoob': Child
            }
        })
    </script>
</body>

但是我们还可以把它写进js文件，然后其他项目引入后也可以使用这个组件

image-20220411090537485

2.5 生命周期

生命周期就是Vue从创建到销毁的过程

钩子方法的定义：通过一个方法来干涉另一个方法的行为 这个对于快速入门，简单了解即可 我们的主要目的是后端开发

img

2.6 Vue路由

高级版的超链接

很类似我们计算机网络中的路由这个概念，目的地址和下一跳对吧

其实学到后面会发现很多知识都是有共性的，很多概念都是互通的，所以加强理解吧！

==router-link制作导航==

router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。Vue.js 路由需要复制到文件夹中

==路由出口==

路由匹配到的组件将渲染在这里

<router-view></router-view>

引入js文件

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

==对代码的详细解析，写在注释里了记得仔细看注释==

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

<body>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<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 src="vuejs/vue.min.js"></script>
    <script src="vuejs/vue-router.js"></script>
    <script>

        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        //自定义了三个组件分别是Welocame，Student，Teacher。其只的template是固定写法
        const Welcome = { template: '<div>欢迎</div>' }
        const Student = { template: '<div>student list</div>' }
        const Teacher = { template: '<div>teacher list</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 20
        })

        new Vue({
            el: '#app',
            router
        })
    </script>
</body>

</html>

后面我们做前后端分离项目的时候，这种场景会经常出现。我们要定义路由，指定跳转页面。那时候就是简单的按照模板的顺序对着改改即可

avatar
文章
阅读
粉丝