关于VUE和Element

最新推荐文章于 2023-06-10 11:15:17 发布

chénJH.

最新推荐文章于 2023-06-10 11:15:17 发布

阅读量456

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_54636735/article/details/114496902

版权

1.vue是什么? 有什么特点?
是一套构建用户界面的渐进式前端框架
易用,性能高,灵活
2.入门
(1).引入vue.js文件
(2).编写入门程序主要有两个部分
视图:页面渲染由HTML+css组成
脚本;负责业务数据模型以及逻辑处理
(3).Vue核心对象
let vm = new Vue({
三个核心选项:
el:用于接管获取到页面中的元素(通常通过id)
data:保存vue对象中的数据,在视图中声明变量需要在此处赋值
methods:用于定义方法,方法可以通过对象名调用,this代表当前VUE对象
});
数据绑定:{{变量名}}
3.入门案例

		<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
    <div>姓名：{{name}}</div>
    <div>班级：{{classRoom}}</div>
    <button onclick="hi()">打招呼</button>
    <button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
        el:"#div",
        data:{
            name:"张三",
            classRoom:"黑马程序员"
        },
        methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });

    //定义打招呼方法
    function hi(){
        vm.study();
    }

    //定义修改班级
    function update(){
        vm.classRoom = "传智播客";
    }
</script>
</html>

视图中定义变量和单击事件方法,引入vue.js文件后,创建vue对象,通过el:获取视图id属性,接管视图,并用data选项赋值
4.常用指令
是带有v-前缀的特殊指令
在这里插入图片描述

(1)v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
<div id="div">
    <div>{{msg}}</div>
    <div v-html="msg"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<a href='http://www.baidu.com'>百度一下</a>"
        }
    });
</script>
</html>

(2).绑定属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="div">
    <a v-bind:href="url">百度一下</a>
    <br>
    <a :href="url">百度一下</a>
    <br>
    <div :class="cls">我是div</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

(3).条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <div id="div1" v-if="num % 3 == 0">div1</div>
    <div id="div2" v-else-if="num % 3 == 1">div2</div>
    <div id="div3" v-else>div3</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:2,
        }
    });
</script>
</html>

(4).事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"黑马程序员"
        },
        methods:{
            change(){
                this.name = "传智播客"
            }
        }
    });
</script>
</html>

5.表单绑定 v-model:在表单元素上创建双向数据绑定
更新data数据,页面数据也会更新,更新页面,表单也会改变
MVVM模型:是MVC模型的改进版
在这里插入图片描述

前端页面中,JS对象表示model,页面表示View,两者做到了最大限度的分离
将来Model和View关联起来就是VIewModel,就是桥梁,ViewModel负责把Model的数据同步到View显示出来,还能负责吧View修改的数据同步回Model
6.Element介绍
网站快速成型工具,
要使用可上Element官网,CV大发即可
7.入门案例
(1).引入Element核心js文件
(2).引入Vue核心js文件
(3).引入Element样式文件
缺一不可,Element核心文件依赖于Vue.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
<button>我是按钮</button>
<br>
<div id="div">
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br>
    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <br>
    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    <br>
    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>

(2).基础布局
(3).容器布局
(4).表单组件
(5).表单组件
(6).表格组件

8.综合案例

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header {
            background-color: #545c64;
        }

        .header-img {
            width: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="div">
    <el-container>
        <!--        头部-->
        <el-header class="el-header">
            <el-container>
                <div>
                    <el-image src="img/export.png" class="header-img"></el-image>
                </div>
                <el-menu
                        :default-active="activeIndex2"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="white"
                        active-text-color="#ffd04b"
                        style="margin-left: auto;">
                    <el-menu-item index="1">处理中心</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">我的工作台</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3"><a href="学生列表_综合案例.html" target="_self">首页</a></el-menu-item>
                </el-menu>
            </el-container>
        </el-header>
<!-- 侧边栏区域-->
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-menu"></i>学工部</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
                                <el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
                            <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item>
                        </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-menu"></i>咨询部</template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
                                <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
                                <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-menu"></i>教研部</template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1"><i class="el-icon-help"></i>已有学生管理</el-menu-item>
                            <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发学生管理</el-menu-item>
                            <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
               </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!--主区域部分-->
                </el-header>
                <el-main>
                    <b style="color: red;font-size: 20px">学生列表</b>
                    <div style="float: right">
                        <el-button type="primary">添加学生</el-button>
                    </div>
                    <el-table :data="tableData">
                        <el-table-column prop="date" label="日期" width="140">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="120">
                        </el-table-column>
                        <el-table-column prop="address" label="地址">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="180">
                            <el-button type="warning">编辑</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data:{
            tableData:[
                {
                    date:"2088-08-08",
                    name:"张三",
                    address:"北京市昌平区"
                },{
                    date:"2088-08-08",
                    name:"李四",
                    address:"北京市昌平区"
                },{
                    date:"2088-08-08",
                    name:"王五",
                    address:"北京市昌平区"
                }
            ]
        }
    });
</script>
</html>

chénJH.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于VUE和Element

1.vue是什么? 有什么特点?是一套构建用户界面的渐进式前端框架易用,性能高,灵活2.入门(1).引入vue.js文件(2).编写入门程序主要有两个部分视图:页面渲染由HTML+css组成脚本;负责业务数据模型以及逻辑处理(3).Vue核心对象let vm = new Vue({三个核心选项:el:用于接管获取到页面中的元素(通常通过id)data:保存vue对象中的数据,在视图中声明变量需要在此处赋值methods:用于定义方法,方法可以通过对象名调用,this代表当前VUE
复制链接

扫一扫