0
0

Vue+Element基础介绍

Vue:是一套构建【用户界面】的渐进式前端框架，只关注视图层，很方面与其他库或已有的项目整合。通过API来实现【响应数据的绑定】和【组合的视图组件】

视图：负责页面的渲染，主要由HTML+CSS构成

脚本：负责业务数据模型以及数据的处理逻辑

Vue核心对象：每一个Vue程序都是从一个Vue核心对象开始的

let vm = new Vue({

​ 选项列表；

});

选项列表：

el:用于接收获取到页面的【元素】，根据常用的选择器获取

data:用于保存当前的Vue对象的数据。在视图中声明的变量需要再此处赋值

methods:定义方法。方法可以直接通过对象名调用，this代表当前Vue对象

数据绑定：{{变量名}}，在data里面给数据赋值

<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:"硕计2班"
        },
        methods:{
            study(){
                alert(this.name+"正在"+this.classRoom+"学习");
            },
        }
    });

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

    //定义修改班级的方法
    function update(){
        vm.classRoom = "计161";
    }

</script>

Vue的常用指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app1">
    <!-- v-text -->
    <span v-text="msg"></span><br>
    <span>{{msg}}</span>

    <!--v-html，就是innerHTML-->
    <div v-html="htmltag"></div>

    <!--v-show：根据表达式之真假值，切换元素的 display CSS 属性。-->
    <div v-show="isShow">我是可以看见的div，使用v-show</div>

    <!--条件判断-->
    <div v-if="Math.random()>0.5">
        大于0.5
    </div>
    <div v-else>
        小于0.5
    </div>

    <!--for循环-->
    循环数组：
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
    循环数组：
    <ul>
        <li v-for="(item,index) in arr">{{index}}:{{item}}</li>
    </ul>
    循环对象：
    <ul>
        <li v-for="(val,key) in obj">{{key}}:{{val}}</li>
    </ul>
    循环对象：
    <ul>
        <li v-for="(val,key,index) in obj">{{index}}:{{key}}:{{val}}</li>
    </ul>
    循环字符串：
    <ul>
        <li v-for="(val,index) in str">{{index}}:{{val}}</li>
    </ul>
    循环数字：
    <ul>
        <li v-for="(val,index) in num">{{index}}:{{val}}</li>
    </ul>

    <!--v-on：绑定事件监听器。事件类型由参数指定。-->
    <input type="button" value="测试" v-on:click="func()" />

    <!--v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。-->
    <img v-bind:src="imgsrc" v-bind:style="imgcss" />
    <br>

    <!--v-model：在表单控件或者组件上创建双向绑定-->
    <input type="text" v-model="inputtxt"  />
    <span>您在文本框中输入的内容是：{{inputtxt}}</span>

    <!--v-pre：【跳过】这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译-->
    <span v-pre>{{ msg }}</span>

    <div v-cloak>
        {{ msg }}
    </div>

    <span v-once>This will never change: {{msg}}</span>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    /*
v-text：功能和{{msg}}相似，更新元素的文本内容。如果要更新部分文本内容，需要使用 {{ msg }} 插值。
v-html：更新元素的 innerHTML
v-show：根据表达式之真假值，切换元素的 display CSS 属性。
v-if：根据表达式的值的真假条件渲染元素
v-else：表示否则
v-else-if：
v-for：可以循环数组，对象，字符串，数字，
v-on：绑定事件监听器。事件类型由参数指定。
v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。
v-model：在表单控件或者组件上创建双向绑定
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
*/

    let v1 = new Vue({
        el:"#app1",
        data:{
            msg:"hello vue",
            htmltag:"<p style='background-color:red'>我是一个红色的段落</p>",
            isShow:true,
            arr:[12,23,34],
            obj:{
                name:"张三",
                age:12,
                sex:"男"
            },
            str:"hello",
            num:15,
            imgsrc:"img/3.jpg",
            imgcss:{"width":"120px","height":"80px"},
            inputtxt:""

        },
        methods:{
            func:function(){
                alert('点击了按钮');
            }
        }
    });

</script>
</html>

Element:【网站快速成型】工具，是饿了么公司前端开发团队提供的一套【基于Vue的网站组件库】。使用Element必须要有Vue，组件：组成网页的部件，例如超链接，按钮，图片…

官网：https://element.eleme.cn/#/zh-CN

引入三个文件，复制对应网站的代码，还有要创建vue核心对象
<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>

模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</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>
    
    <!--可以有CSS样式控制-->
</head>
<body>
<div id="div">
    <!--此处是网页布局复制的内容-->  
</div>
</body>
<script>
    /*有些需要复制规则数据啥的*/
    new Vue({
        el:"#div"
    })
</script>
</html>

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</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>

布局方式

基础布局：将页面分成最多24个部分，自由切分。每行分成多少列

第一个span=24，那么就是整个一行，也就是一列，第二个是两个span=12，将一行分为两列，三个span=8.....以此类推
<el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
    <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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,.el-footer{
            background-color: #d18e66;
            color: #333;
            text-align: center;
            height: 100px;
        }
        .el-aside{
            background-color: #55e658;
            color: #333;
            text-align: center;
            height: 580px;
        }
        .el-main{
            background-color: #5fb1f3;
            color: #333;
            text-align: center;
            height: 520px;
        }
    </style>
</head>
<body>
<div id="div">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>

表单组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
<div id="div">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data() {
            return {
                ruleForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>
</html>

表格组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
<div id="div">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    })
</script>
</html>

顶部导航栏组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<div id="div">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <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 index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>

侧边导航栏组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
<div id="div">
    <el-col :span="6">
        <h5>自定义颜色</h5>
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航一</span>
                </template>
                <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                    <el-menu-item index="1-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="1-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
            </el-menu-item>
        </el-menu>
    </el-col>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>

综合案例：学生列表

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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;
        }
    </style>
</head>

<body>
<div id="div">
    <!--头部-->
    <el-container>
        <el-header class="el-header">
            <el-container>
                <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: 730px; 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-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-table>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            tableData: [
                {
                    date: "2021-1-1",
                    name: "张三",
                    address: "合肥市肥东县"
                },
                {
                    date: "2021-1-2",
                    name: "李四",
                    address: "合肥市肥东县"
                },
                {
                    date: "2021-1-3",
                    name: "王五",
                    address: "合肥市肥东县"
                }
            ]
        }
    });
</script>

</html>

Vue高级使用

自定义组件：

定义格式：

Vue.component(组件名称，{

​ props:组件的属性,

​ data:组件的数据函数,

​ template:组件解析的标签模板

})

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

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

<body>
<div id="div">
    <my-button>自定义按钮</my-button>
</div>
</body>
<script>
    Vue.component("my-button", {
        //属性
        props: ["style"],
        //数据函数
        data: function () {
            return {
                msg: "自定义按钮"
            }
        },
        //解析标签模板
        template: "<button style='color:red'>{{msg}}</button>"
    });

    new Vue({
        el: "#div"
    });

</script>

</html>

Vue异步操作：在Vue发送异步请求，本质上还是AJAX。可以使用axios这个插件简化操作

使用步骤：引入axios核心js文件，调用axios对象的方法发起异步请求和处理响应数据

常用方法：

get(请求的资源路径和请求的参数)：发起GET 请求

post(请求的资源路径，请求的参数)：发起POST 请求

then(response):请求成功后的回调函数，通过response获取响应的数据

catch（error）：请求失败后的回调函数，通过error获取错误信息

servlet：

package com.lcl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/testServlet")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        String name = req.getParameter("name");
        System.out.println(name);

        resp.getWriter().write("请求成功");
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

测试页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="div">
    {{name}}
    <button @click="send()">发送请求</button>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            name: "张三"
        },
        methods: {
            send() {
                //GET方式
               /* axios.get("testServlet?name=" + this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })*/
                //POST方式
                axios.post("testServlet","name="+this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });
</script>
</html>

vue02没完成，登陆页面样式卡住了

标签： vue.js 前端框架 前端
本文转载自: https://blog.csdn.net/qq_40658986/article/details/125594341
版权归原作者 starry_sea0309 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Vue+Element基础介绍”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

在Ubuntu中自动挂载SMB/CIFS共享

【在Linux世界中追寻伟大的One Piece】Reactor反应堆模式

如果大家想在win7上使用pycharm，就不能使用2019.3之后的版本（内附下载不同pycharm版本的链接）

如何使用vscode进行代码格式化设置

史上最简单open-webui安装方式!!!

前端文件预览整合（一）

mysql 您要的日期查询都在这

文章导航