Vue学习入门

于 2024-10-15 14:47:36 发布
阅读量795 收藏 18
点赞数 16
CC 4.0 BY-SA版权
文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nnbn00/article/details/142954055

Vue(入门)

Vue是一个基于MVVM模型的前端js框架。

常用指令

v-bind:为HTML标签绑定属性值，如设置href，css样式等

v-model:在表单元素上创建双向数据绑定

v-on:为HTML标签绑定事件

v-if、v-else-if、v-else:条件性的渲染某元素，判断为true时渲染 v-show:根据条件展示某元素，区别在于切换的是display属性的值

v-for:列表渲染，遍历容器的元素或者对象的属性值

学习测试代码：

​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_快速入门</title>
    <script src="js/vue.js">
    </script>
</head>
​
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
​
            </tr>
            <tr v-for="(user, index) in users">
                <th>{{index+1}}</th>
                <th>{{user.name}}</th>
                <th>{{user.age}}</th>
                <th><span v-if="user.gender==0">女</span><span v-else>男</span></th>
                <th>{{user.score}}</th>
                <th><span v-if="user.score>=85">优秀</span>
                    <span v-else-if="user.score<85&&user.score>=60">良好</span>
                    <span style="color: red;" v-else>不及格</span>
                </th>
            </tr>
        </table>
    </div>
​
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "hello Vue",
            age: 20,
            users: [{
                name: "xiaoming",
                age: 20,
                gender: 1,
                score: 78
            }, {
                name: "xiaozhang",
                age: 20,
                gender: 0,
                score: 60
            }, {
                name: "xiaohong",
                age: 10,
                gender: 1,
                score: 89
            }, {
                name: "xiaosui",
                age: 25,
                gender: 0,
                score: 49
            }
            ]
​
​
​
        },
        methods: {
            handl: function () {
                alert("你点我一下了")
            }
        },
        mounted() {
            alert("挂载完成")
        }
    })
</script>
</html>

生命周期

mounted:挂载完成(其他方法自学)，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

Vue Router

  • Vue Router 是Vue的官方路由

Axios

1.引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

2.使用Axios发送请求，并获取相应结果

请求方式别名：

  • axios.get(url[,config])

  • axios.delete(url [,config])

  • axios.post(url[,data[,config]])

  • axios.put(url[,data[,cofig ]])

Vue项目中使用Axios：

  • 在项目目录中安装axios：npm install axios;

  • 需要使用axios,导入axios:import axios from 'axios';

前端开发的工程化

模块化组件化规范化自动化

vue-cil脚手架

YAPI：前后端接口管理平台

Vue

项目创建

  • 图形化界面 vue ui(推荐使用)

  • 命令行：vue create vue-project01

目录结构

  • node_modules整个项目的依赖包

  • public 存放项目的静态文件

  • src 存放项目的源代码（使用最多）

assets 静态资源

components 可用的组件

router 路由配置

views 视图组件

App.vue入口页面

main.js 入口js文件

  • packagejson 模块基本信息，项目开发所需要模块，版本信息

  • vue.config.js 保存vue配置的文件夹，如代理，端口的配置等

项目启动

  • 图形化界面

  • 命令行：npm run serve

Vue项目开发流程

  • 默认首页 index.html

  • 入口文件 main.js

  • Vue 的组件文件以.vue结尾，每个组件由三个部分组成：<template>、<script>、<style>。

Element

  • 是饿了么研发的，一套为开发者设计师和产品经理准备的基于Vue2.0的桌面端组件库。（cv程序员）

  • 快速入门：安装组件库 npm install element-ui@2.15.3

  • 引入组件库 import ElementUI from 'element-ui';

根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载

  • 页面原型

运用Element组件完成页面开发

左侧组件代码：

<el-aside width="230px" style=" border: 1px solid #eee;">
                        <el-menu :default-openeds="['1', '3']">
                            <el-submenu index="1">
                                <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                                <el-menu-item index="1-1">
                                    <router-link to="/dept">部门管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="1-2">
                                    <router-link to="/emp">员工管理</router-link>
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
​

中部表单查询代码：

<el-form :inline="true" :model="serchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="serchForm.name" placeholder="请输入员工姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="serchForm.gender" placeholder="请选择">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="入职日期">
                            <el-date-picker v-model="serchForm.entrydate" type="daterange" range separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>

中下部表格传输数据代码:

                  <el-table :data="tableData" border>
                        <el-table-column prop="name" label="姓名" width="120">
                        </el-table-column>
                        <el-table-column  label="图像" width="180">
                            <template slot-scope="scope">
                                    <img :src="scope.row.image" width="100px" height="70px">
                                </template>
                        </el-table-column>
                        <el-table-column  label="性别" width="120">
                            <template slot-scope="scope">
                                {{scope.row.gender==1?"男":"女"}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="job" label="职位" width="180">
                        </el-table-column>
                        <el-table-column prop="entrydate" label="入职时间" width="180">
                        </el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="120">
                        </el-table-column>
                        <el-table-column label="操作">
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="primary" size="mini">删除</el-button>
                        </el-table-column>
​
​
                    </el-table>

底部分页条代码：

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                        layout="sizes,prev, pager, next,jumper" :total="1000"></el-pagination>

script部分代码：

<script>
import axios from 'axios';
export default {
    data() {
        return {
            tableData: [],
            serchForm: {
                name: "",
                gender: "",
                entrydate: []
​
            }
        }
    },
    methods: {
        onSubmit() {
            alert("查询数据")
        },
        handleSizeChange() {
            alert("换页")
        },
        handleCurrentChange() {
            alert("换页")
        }
    },
    mounted() {
        //发送异步请求
        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
            this.tableData = result.data.data;
​
        });
    }
​
​
​
}
</script>

style部分代码:

<style>
.el-header {
    background-color: #B3C0D1;
​
    text-align: center;
    line-height: 60px;
}
.el-aside {
    text-align: center;
    line-height: 200px;
}
</style>

Axios部分代码：//异步请求的数据传输给tableData然后赋值显示出来

 mounted() {
        //发送异步请求
        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
            this.tableData = result.data.data;
​
        });
    }

router部分代码：//router路由实现页面切换

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },//两页面实现切换
  {
    path: '/dept',
    name: 'dept',
​
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect: '/emp'//初始化页面路由
  }
]
                            <el-menu-item index="1-1">//页面代码内部实现路由切换
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">员工管理</router-link>
                            </el-menu-item>

DeptView（部门管理页面）全部代码：

<template>
    <div>
        <el-container >
            <el-header style="font-size:40px; ">tlias 智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">员工管理</router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
​
​
                <el-main>
                    <!-- 表格 -->
                    <el-table :data="tableData" border>
                        <el-table-column prop="name" label="名称" width="250"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="250"></el-table-column>
                        <el-table-column label="操作">
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
​
<script>
export default {
    data() {
        return {
            tableData: [{
                id: 1,
                name: "学工部",
                updatetime: "2010-01-01 12:00:00"
            }, {
                id: 2,
                name: "教研部",
                updatetime: "2010-01-01 12:00:00"
            }, {
                id: 3,
                name: "就业部",
                updatetime: "2010-01-01 12:00:00"
            }, {
                id: 4,
                name: "人事部",
                updatetime: "2010-01-01 12:00:00"
            }, {
                id: 5,
                name: "行政部",
                updatetime: "2010-01-01 12:00:00"
            }]
        }
    },
    methods: {
​
    }
}
</script>
​
<style>
.el-header {
    background-color: #B3C0D1;
​
    text-align: center;
    line-height: 60px;
}
​
.el-aside {
    text-align: center;
    line-height: 200px;
}
</style>

EmpView(员工管理页面)全部代码：

<template>
    <div>
        <el-container>
            <el-header style="font-size: 40px;">智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px" style=" border: 1px solid #eee;">
                        <el-menu :default-openeds="['1', '3']">
                            <el-submenu index="1">
                                <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                                <el-menu-item index="1-1">
                                    <router-link to="/dept">部门管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="1-2">
                                    <router-link to="/emp">员工管理</router-link>
                                </el-menu-item>
​
                            </el-submenu>
​
                        </el-menu>
                    </el-aside>
                <el-main>
                    <!-- 表单 -->
                    <el-form :inline="true" :model="serchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="serchForm.name" placeholder="请输入员工姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="serchForm.gender" placeholder="请选择">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item
                        <el-form-item label="入职日期">
                            <el-date-picker v-model="serchForm.entrydate" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
​
                        </el-form-item>
​
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 表格 -->
                    <el-table :data="tableData" border>
                        <el-table-column prop="name" label="姓名" width="120">
                        </el-table-column>
​
                        <el-table-column  label="图像" width="180">
                            <template slot-scope="scope">
                                    <img :src="scope.row.image" width="100px" height="70px">
                                </template>
                        </el-table-column>
                        <el-table-column  label="性别" width="120">
                            <template slot-scope="scope">
                                {{scope.row.gender==1?"男":"女"}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="job" label="职位" width="180">
                        </el-table-column>
                        <el-table-column prop="entrydate" label="入职时间" width="180">
                        </el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="120">
                        </el-table-column>
                        <el-table-column label="操作">
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="primary" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>
                    <br>
                    <!-- 分页条 -->
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                        layout="sizes,prev, pager, next,jumper" :total="1000"></el-pagination>
                </el-main>
            </el-container>
        </el-container>
​
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            tableData: [],
            serchForm: {
                name: "",
                gender: "",
                entrydate: []
​
            }
        }
    },
    methods: {
        onSubmit() {
            alert("查询数据")
        },
        handleSizeChange() {
            alert("换页")
        },
        handleCurrentChange() {
            alert("换页")
        }
    },
    mounted() {
        //发送异步请求
        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
            this.tableData = result.data.data;
​
        });
    }
}
</script>
<style>
.el-header {
    background-color: #B3C0D1;
​
    text-align: center;
    line-height: 60px;
}
​
.el-aside {
    text-align: center;
    line-height: 200px;
}
</style>

DeptView部门管理页面:

EmpView员工管理页面:

Axios异步请求数据网址：

https://mock.apifox.cn/m1/3128855-0-default/emp/list

页面：

Vue文件页面：

打包部署

Nginx是一款轻量型的Web服务器，占用少并发能力强

部署：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下。

启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口号。

注意：Nginx默认占用80端口号，如果80端口号被占用，可以在Nginx.conf中修改端口号。（netstat - ano|findStr 80）

访问：http://localhost:80

学习

B站黑马

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值