管理系统的实现_01

最新推荐文章于 2024-05-20 10:06:54 发布

TZ丶旭哥

最新推荐文章于 2024-05-20 10:06:54 发布

阅读量183

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_53721382/article/details/130313784

版权

从0实现管理系统专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

技术介绍
vue介绍及使用

技术介绍

在这里插入图片描述

vue介绍及使用

在这里插入图片描述

vue 入门案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue第一个入门实例</title>
</head>

<body>
<div id="app">
    <!--插值表达式 {{}}  vue实例中的 data下数据可以用-->
    {{msg}}
    <h3>用户名： {{username}}</h3>
</div>

<div id="box">
    <!--因为 vue实例不在 box 下起作用  所以插值表达式没用 -->
    {{msg}}
</div>

</body>

<!-- 1 引入vue.js （官网下载的） -->
<script src="js/vue.js"></script>
<!-- 必须写成两个script标签才起作用 -->
<script>
    // 2 实例化vue对象  const 用来定义对象
    const app = new Vue({
        el: "#app",  // element 用来给vue实例 定义一个作用范围
        data: {
            // 用来给vue实例 提供数据的
            msg: "hello vue",
            username: "root"
        }
    });
</script>

</html>

vue基础语法

v-text （替换标签里的内容）

在这里插入图片描述

v-on (绑定事件，可以简化为@)

在这里插入图片描述

v-bind (绑定属性，可以简化为 :属性名)

在这里插入图片描述

v-for （对对象（键值对形式）进行遍历数组也是一种对象）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>

<div id="app">
    <!--访问对象-->
    <span>{{user.name}} ------  {{user.age}}</span>
    <br>
    <!--用v-for访问对象  注意小括号  value和 key index 的位置-->
    <span v-for="(value,key,index) in user">{{index}} --- {{key}} --- {{value}}<br></span>
    <br>
    <!--访问数组  注意小括号 a和index的位置-->
    <span v-for="(a,index) in arr">{{index}} --- {{a}}<br></span>
    <br>
    <!--访问数组对象-->
    <ul>
        <li v-for="(o,index) in users">
            {{o.name}} --- {{o.age}}
        </li>
    </ul>

</div>

</body>

<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {name: "xuge", age: 22},  //对象 用 {} 定义
            arr: ["张三", "李四", "王五"],    //数组 用 [] 定义
            users: [
                {name: "xuge", age: 22},    //数组中存对象 用[{},{}] 定义
                {name: "zuo", age: 21}
            ]
        },
        methods: {}
    });
</script>

</html>

v-model （作用于标签元素的值和 vue实例对象的data数据保持一致）

在这里插入图片描述

vue生命周期

在这里插入图片描述

vue组件的使用

全局组件

在这里插入图片描述

局部组件（步骤1 2 3 4）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
</head>
<body>

<div id="app">
    <!--4.在Vue实例范围之内使用-->
    <login></login>
    <register></register>
</div>

<!--2.在Vue的作用域之外定义模板文件（里面可以写 html css javascript）-->
<template id="login">
    <div>
        <h3>登录模块组件</h3>
    </div>
</template>

<template id="register">
    <div>
        <h3>注册模块组件</h3>
    </div>
</template>

</body>

<script src="js/vue.js"></script>

<script>

    // 1. 自定义组件
    let login = {
        template: "#login"
    };

    let register = {
        template: "#register"
    }

    const app = new Vue({
        el: "#app",
        data: {},
        // 3.在Vue实例中 注册组件
        components: {
            login,
            register
        }
    });

</script>

</html>

路由的介绍及使用（组件之间的跳转）

去官网下载Vue Router（我使用的是3.x版本）

官网地址 https://v3.router.vuejs.org/zh/installation.html

在这里插入图片描述

案例（点击超链接跳转到相应路由）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的使用</title>
</head>
<body>

<div id="app">
    <!--5. 在vue实例的范围内使用 router-view  -->
    <a href="#/login">点击进行路由跳转</a>
    <div>
    <!--router-view 是显示路由界面的  必须有-->
        <router-view></router-view>
    </div>
</div>

<!--2. 在vue实例的作用域范围之外 定义模板-->
<template id="login">
    <div style="width: 600px ; border: 2px solid red">
        <h3>登录组件</h3>
    </div>
</template>


</body>
<!--vue 和 vue-router  顺序不能反 -->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    // 1. 注册组件
    let login = {
        template: "#login"
    }

    // 3. 自定义路由规则
    const router = new VueRouter({
        routers: [
            // path 路由的路径   component 路由对应的组件
            {name: "登录页面", path: "/login", component: login}
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {},
        // 4. 注册路由  设置路由对象
        router,
    });

</script>

</html>