2024年Web前端最全vue脚手架基础demo1_vue的div标签中使用vh，作为前端程序员应该怎样去规划自己的学习路线

本文链接：https://blog.csdn.net/2401_84434086/article/details/138452704

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

<template>
       <div id="show">
       <p>
            编号:<input type="text" v-model="id" class="form-control" placeholder="请输入id" /> 诗名:
            <input type="text" v-model="name" class="form-control" placeholder="请输入诗名" /> 作者:
            <input type="text" v-model="worker" class="form-control" placeholder="请输入作者" /><br/> 经典词:
            <input type="text" v-model="famous" class="form-control" placeholder="请输入经典词" />
            <button v-on:click="addInfo" class="btn btn-primary">提交</button>
        </p>
        <hr/>
        <p><input type="text" v-model="SelectKey" placeholder="请输入搜索内容" /></p>
        <hr/>
        <table class="table table-hover table-bordered" style="text-align: center">
            <tr class="info">
                <td>编号</td>
                <td>诗名</td>
                <td>作者</td>
                <td>名句</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in newlist" :key="item">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.worker}}</td>
                <td><pre>{{item.famous}}</pre></td>
                <td><button v-on:click="del(index)" class="btn btn-primary">删除</button></td>
            </tr>
        </table>
        </div>
</template>

<script>
export default {
    name:"demo1",
    data:function(){
        return {
                list: [{
                    id: 1,
                    name: "将进酒",
                    worker: "李白",
                    famous: "烹羊宰牛且为乐，会须一饮三百杯！"
                }, {
                    id: 2,
                    name: "长恨歌",
                    worker: "白居易",
                    famous: "回眸一笑百媚生，六宫粉黛无颜色。"
                }, {
                    id: 3,
                    name: "永遇乐",
                    worker: "辛弃疾",
                    famous: "想当年，金戈铁马，气吞万里如虎。"
                }, ],
                SelectKey: "",
                id: 0,
                name: "",
                worker: "",
                famous: ""
            }
    },
            computed: {
                newlist: function() {
                    //复制一个this的分身
                    var _this = this;
                    return _this.list.filter(function(item) {
                        console.log(item);
                        return item.famous.indexOf(_this.SelectKey) != -1;
                    });
                }
            },
            methods: {
                addInfo: function() {
                    this.list.push({
                        id: this.id,
                        name: this.name,
                        worker: this.worker,
                        famous: this.famous
                    });
                },
                del: function(index) {
                    if (confirm("是否删除此条信息?")) {
                        this.list.splice(index, 1);
                    }
                }
            }
}
</script>

bootstrap常用样式

常用样式：

table

【table-striped】【table-bordered】【table-hover】【table-condensed】

form

【form-control】【btn-primary】【btn-warning】【btn-danger】【disabled】【btn-block】

【nav nav-pills水平ul】【nav-stacked垂直ul】【active选中】【badge徽章】

pre

【pre-scrollable滚动条】

template原型

demo1【template的声明以及使用】

<!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>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            overflow: hidden;
        }
        
        .myh {
            background-color: #2E6EC2;
            color: white;
            font-size: 3rem;
            height: 10vh;
        }
        
        .myc {
            background-color: #F8F1DC;
            font-size: 5rem;
            height: 85vh;
            text-align: center;
            line-height: 85vh;
        }
        
        .myf {
            background-color: #2E6EC2;
            font-size: 2rem;
            height: 5vh;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 自定义组件名称·一定要是小写字母 -->
        <myheader></myheader>
        <mycontent></mycontent>
        <myfooter></myfooter>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //创建模板
        var myh = Vue.extend({
            template: "<div class='myh'>后台管理系统</div>"
        });
        var myc = Vue.extend({
            template: "<div class='myc'>后台管理中心内容</div>"
        });
        var myf = Vue.extend({
            template: "<div class='myf'>版权所有：项目开发组</div>"
        });
        //绑定组件
        Vue.component("myheader", myh);
        Vue.component("mycontent", myc);
        Vue.component("myfooter", myf);
        //加载vue
        new Vue({
            el: "#app"
        })
    </script>
</body>

</html>

demo2(自定义组件名称)

<!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>软件1804班三好学生表</h1>
        <!-- 自定义组件 -->
        <threegoodstudent :newlist="list"></threegoodstudent>
    </div>
    <template id="good3">
        <ul>
            <li v-for="item in newlist">{{item}}</li>
        </ul>
    </template>
    <!-- 环境 -->
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: ["闫春娜", "牛龙珠", "王笑涵", "刘梓佳", "董新颖", "魏慧娟", "李鑫焱", "王航", "柴尚涛", "刘世龙"]
            },
            components: {
                "threegoodstudent": {
                    props: ["newlist"],
                    template: "#good3"
                }
            }
        })
    </script>
</body>

</html>

demo3(自定义组件传参)

<!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>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>

<body>
    <div id="app">
        <h1>脑筋急转弯！</h1>
        <!-- 自定义组件 -->
        <menus :newlist="list"></menus>
    </div>
    <template id="showlist">
        <table class="table table-hover table-border">
            <tr class="info">
                <td>编号</td>
                <td>问题</td>
                <td>提示</td>
                <td>答案</td>
            </tr>
            <tr v-for="item in newlist">
                <td>{{item.id}}</td>
                <td>{{item.question}}</td>
                <td>{{item.title}}</td>
                <td>{{item.answer}}</td>
            </tr>
        </table>
    </template>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    question: "蚂蚁牙齿的颜色",
                    title: "与歌曲有关",
                    answer: "o-zone中唱的，蚂蚁牙黑，蚂蚁牙红"
                }, {
                    id: 2,
                    question: "为什么寒假比暑假短",
                    title: "物理因素",
                    answer: "热胀冷缩"
                }, {
                    id: 3,
                    question: "最残忍的歌词",
                    title: "爱",
                    answer: "把你的心我的心串一串"
                }]
            },
            components: {
                "menus": {
                    props: ["newlist"],
                    template: "#showlist"
                }
            }
        })
    </script>
</body>

</html>

demo4(子父组件传参)

<!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>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>

<body>
    <div id="app">
        <!-- 外层 -->
        <h1>好孩子亲子系统</h1>
        <!-- 父层 -->
        <fu-temp :showlist="list"></fu-temp>
    </div>
    <!-- 父类的模板 -->
    <template id="fu">
        <div>
            简介：<input type="text" v-model="SelectKey" placeholder="请输入搜索关键字"/>
            <hr/>
            <zi-temp :newlist="filterlist"></zi-temp>
        </div>
    </template>
    <!-- 子类的模板 -->
    <template id="zi">
        <div>
            <table class="table table-border table-hover" style="text-align: center">
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>家长</td>
                    <td>简介</td>
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。



也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

### 面试准备

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。