首页 > 其他分享> > 前端面试题(四)7.9

前端面试题(四)7.9

2021-07-11 15:03:10 作者：互联网

目录标题

Vue 的filters的作用是什么？

简单介绍一下

简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从[‘abc’,‘abd’,‘ade’]数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。

首先，过滤器可在new Vue实例前注册全局的，也可以在组件上写局部。

全局过滤器：

Vue.filter('globalFilter', function (value) {
  return value + "!!!"
})

组件过滤器（局部）：

filters:{
    componentFilter:function(value){
          return value + "!!!"
    }
  },

上面有种写法有个需要注意的问题：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的

下面我们来讲一下过滤器的使用方法

使用方式

在双花括号插值

{{ 'ok' | globalFilter }}

在v-bind表达式中使用

<div v-bind:data="'ok' | globalFilter" ></div>

参数写法

{{ message | filterA | filterB }}
上述代码中，message是作为参数传给filterA 函数，而filterA 函数的返回值作为参数传给filterB函数，最终结果显示是由filterB返回的。

<div>{{ '2018' | filterA | filterB }}</div>

filters: {
  filterA: function(value) {
    return value + '年'
  },
  filterB: function(value) {
    return value + '那年你很美！'
  }
}

结果：

2018年那年你很美！

{{ message | filterA('arg1', arg2) }}
上述代码中，filterA的第一个参数是message，依次是‘arg1’,arg2

<div>{{ '2018' | filterA('07', '17') }}</div>

filters: {
  filterA: function(value, arg1, arg2) {
    return value + '-' + arg1 + '-' + arg2
  }
}

结果：

2018-07-17

{{ ‘a’,‘b’ | filterB }}
上述代码表示’a’和’b’分别作为参数传给filterB

<div>{{ 'Hello', 'World'| filterB }}</div>

filters: {
  filterB: function(value, value1) {
    return value + '' + value2
  }
}

结果：

Hello World

借鉴文章出处

Vue 的props的作用是什么

前言

官方文档：
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中.

也就是props是子组件访问父组件数据的唯一接口。
详细一点解释就是：
一个组件可以直接在模板里面渲染data里面的数据（双大括号）。
子组件不能直接在模板里面渲染父元素的数据。
如果子组件想要引用父元素的数据，那么就在prop里面声明一个变量（比如a），这个变量就可以引用父元素的数据。然后在模板里渲染这个变量（前面的a），这时候渲染出来的就是父元素里面的数据。

基本用法

<!--父组件-->
<template>
  <div>
      <hello-world2 :good = "good"></hello-world2> //向子组件传值
  </div>
</template>

<script>
  import helloWorld2 from "./HelloWorld2"  //引用子组件页面

  export default {
    name: "HelloWorld3",
    data() {
      return {
        good: "我是从hello word3传递过来的"
      }
    },
    components: {
      'hello-world2': helloWorld2   //注册子组件
    },
  }
</script>

<!--子组件-->
<template>
    <div>{{good}}</div>
</template>

<script>
  export default {
    props: ['good'], //通过props获取父组件传递过来的值
    data: function () {
      return {}
    },
    methods: {}
  }
</script>

总结： 父组件通过v-bind向子组件传值，子组件通过props来获取父组件传递过来的值，被引用的就是子组件

补充：kebab-case

camelCase vs. kebab-case：js中用驼峰式命名，在html中替换成短横线分隔式命名

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>
 
<script>
    Vue.component('child', {
        // 在 JavaScript 中使用 camelCase
        props: ['myMessage'],
        template: '<span>{{ myMessage }}</span>'
    })
</script>

单向数据流： props是单向绑定的

父组件的属性变化时，将传导给子组件，但是反过来不会。
每次父组件更新时，子组件的所有 props 都会更新为最新值。
不要在子组件内部改变 props。如果你这么做了，Vue 会在控制台给出警告。
在两种情况下，我们很容易忍不住想去修改 props 中数据：

Props 作为初始值传入后，子组件想把它当作局部数据来用；
Props 作为原始数据传入，由子组件处理成其它数据输出。

对这两种情况，正确的应对方式是：
定义一个局部变量，并用 prop 的值初始化它：

props: ['initialCounter'],
    data: function () {
      return { counter: this.initialCounter }
    }

定义一个计算属性，处理 prop 的值并返回：

props: ['size'],
    computed: {
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    }

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

举个例子：

<div id="app3">
        <my-component :object='object'></my-component>
    </div>
    <script src="http://vuejs.org/js/vue.min.js"></script>
    <script>
        //
        var mycom = Vue.component('my-component', {
            //添加一个input改变子组件的childOject，那么父元素的object也会被改变，但是Vue没有报错！
            template: '<p>{{ object.name }} is {{ object.age }} years old.<br><input v-model="childObject.name" type="text"></p>',
            props: ['object','school'],
            data: function () {
                // 子组件的childObject 和 父组件的object 指向同一个对象
                return {
                    childObject: this.object
                }
            }
        });
        var app3 = new Vue({
            el: '#app3',
            data: {
                object:{
                    name: 'Xueying',
                    age: '21',
                },
                school:'SCUT',
            },
        })
    </script>

props验证

可以为prop指定验证规则，如果传入的数据不符合要求，Vue会发出警告。
具体验证规则见官方文档：Prop验证规则

$parent

$parent 也可以用来访问父组件的数据。

而且子组件可以通过$parent 来直接修改父组件的数据，不会报错！

可以使用props的时候，尽量使用props显式地传递数据（可以很清楚很快速地看出子组件引用了父组件的哪些数据）。

另外在一方面，直接在子组件中修改父组件的数据是很糟糕的做法，props单向数据流就没有这种顾虑了。

借鉴文章出处

Vue 中$emit 的作用是什么

前言

父组件可以使用 props 把数据传给子组件。
子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

例子

子组件：

<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
      }
    }
  }
</script>

父组件：

<template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityname;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

点击之前的数据

在这里插入图片描述

点击之后的数据

在这里插入图片描述

借鉴文章出处

axios 如何定义全局变量错误处理

使用过哪些elementui组件

ElementUI介绍

 <!‐‐ 引入ElementUI样式 ‐‐>
<link rel="stylesheet" href="https://unpkg.com/element‐ui/lib/themechalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!‐‐ 引入ElementUI组件库 ‐‐>
<script src="https://unpkg.com/element‐ui/lib/index.js"></script>

常用组件

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：
-<el‐container>：外层容器。当子元素中包含 <el‐header> 或 <el‐footer> 时，全部子元素会垂直上下排列，否则会水平左右排列
-<el‐header>：顶栏容器

<el‐aside>：侧边栏容器
<el‐main>：主要区域容器
<el‐footer>：底栏容器

<body>
  <div id="app">
    <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>
  <style>
    .el-header,
    .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: left;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 590px;
    }
  </style>
</body>
<script>
  new Vue({
    el: '#app'
  });
</script>

Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

<el-dropdown split-button size="small" trigger="click">
    个人中心
    <el-dropdown-menu>
        <el-dropdown-item>退出系统</el-dropdown-item>
        <el-dropdown-item divided>修改密码</el-dropdown-item>
        <el-dropdown-item divided>联系管理员</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

<el-dropdown split-butto> 下拉按钮
<el-dropdown-menu> 下拉菜单
<el-dropdown-item> 下拉项
divided 分隔

NavMenu 导航菜单

为网站提供导航功能的菜单。

<el-menu>
    <el-submenu index="1">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
        </template>
        <el-menu-item>选项1</el-menu-item>
        <el-menu-item>选项2</el-menu-item>
        <el-menu-item>选项3</el-menu-item>
    </el-submenu>
    <el-submenu index="2">
        <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </template>
        <el-menu-item>选项1</el-menu-item>
        <el-menu-item>选项2</el-menu-item>
        <el-menu-item>选项3</el-menu-item>
    </el-submenu>
</el-menu>

<el-menu>:导航菜单
<el-submenu index="1">:导航按钮
<template slot="title">标题和名称
<i class="el-icon-menu">图标
<span slot="title">导航二</span>:导航标题
<el-menu-item>导航项

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

<el-table :data="tableData" stripe>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" align="center">
        <!--
        slot-scope：作用域插槽，可以获取表格数据
        scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是
        固定写法
        -->
        <template slot-scope="scope">
            <el-button type="primary" size="mini"
                       @click="handleUpdate(scope.row)">编辑
            </el-button>
            <el-button type="danger" size="mini"
                       @click="handleDelete(scope.row)">删除
            </el-button>
        </template>
    </el-table-column>
</el-table>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }]
        },
        methods: {
            handleUpdate(row) {
                alert(row.date);
            },
            handleDelete(row) {
                alert(row.date);
            }
        }
    });
</script>

<el-table :data="tableData" stripe>:表格\数据绑定对象\样式
<el-table-column prop="date" label="日期">:表格行\数据绑定对象属性\表头
align="center":居中
slot-scope：作用域插槽，可以获取表格数据
scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">按钮\类型\大小\事件绑定

Pagination 分页

当数据量过多时，使用分页分解数据。

<!--
current-change：内置的事件，当前页码改变时会触发，可以获取到改变之后的页码
-->
<el-pagination
        @current-change="handleCurrentChange"
        current-page="5"
        page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="305">
</el-pagination>
<script>
    new Vue({
        el: '#app',
        methods: {
            handleCurrentChange(page) {
                alert(page);
            }
        }
    });
</script>

<el-pagination>分页

@current-change="handleCurrentChange"内置的事件，当前页码改变时会触发，可以获取到改变之后的页码
current-page="5"当前页码
page-size="10"显示页码总数
layout="total, prev, pager, next, jumper"需要显示的分页组件
:total="305"总数据条数

Message 消息提示

常用于主动操作后的反馈提示。

<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
<script>
    new Vue({
        el: '#app',
        methods: {
            open1() {
                this.$message('这是一条消息提示');
            },
            open2() {
                this.$message({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success'
                });
            },
            open3() {
                this.$message({
                    message: '警告哦，这是一条警告消息',
                    type: 'warning'
                });
            },
            open4() {
                this.$message.error('错了哦，这是一条错误消息');
            }
        }
    })
</script>

this.$message触发钩子

message提示内容
type: 'success'提示类型

this.$message.error("")异常警告和内容

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

<h3>基础的、简洁的标签页</h3>
<!--
通过value属性来指定当前选中的标签页
-->
<el-tabs value="first">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<h3>选项卡样式的标签页</h3>
<el-tabs value="first" type="card">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<h3>卡片化的标签页</h3>
<el-tabs value="first" type="border-card">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<script>
    new Vue({
        el: '#app'
    })
</script>

<el-tabs value="first">选项卡\默认选择项
<el-tab-pane label="用户管理" name="first">选项\显示名\标识name
1.2.8 Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

<div id="app">
    <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>
<script>
    new Vue({
        el: "#app",
        data: {
            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) => {
                   alert(valid)
            });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >:表单/绑定数据模板/绑定校验
<el-form-item label="活动名称" prop="name">表单项\显示内容\数据模板属性绑定
<el-input v-model="ruleForm.name">表单输入框/数据绑定

<el-select v-model="ruleForm.region" placeholder="请选择活动区域">:下拉框/数据绑定/提示

<el-option label="区域一" value="shanghai"></el-option>:下拉项/数据项

ref绑定校验信息

借鉴文章出处

表格如何实现分页加载

vue实现简单的分页功能

变量：

步骤1：计算页数

 data() {
    return {
      // 假设这是后台传来的数据来源
      data: [],
      // 所有页面的数据
      totalPage: [],
      // 每页显示数量
      pageSize: 5,
      // 共几页
      pageNum: 1,
      // 当前显示的数据
      dataShow: "",
      // 默认当前显示第一页
      currentPage: 0
    };
  },

步骤二：根据页数对数据分组，并存进每一页

    // 这里简单模拟一下后台传过来的数据
    for (let i = 0; i < 601; i++) {
      this.data.push({ name: "liu" ,look:"very handsome"});
    }
    // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
    this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;

步骤三：设置默认显示页，上一页下一页，只需要切换当前页面的索引值就行了

   for (let i = 0; i < this.pageNum; i++) {
      // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
      // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
      this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))
    }
   // 获取到数据后显示第一页内容
    this.dataShow = this.totalPage[this.currentPage];

借鉴文章出处

表单验证如何实现

最简单的表单验证

在官方文档中，尤大已经提供了一个表单验证的示例，这个示例让我想起给某银行做自动化工具时的情景，因为这两者都是采用MVVM的思想，所以，理解起来是非常容易的，即：通过一个列表来存储错误信息，而这个错误信息会绑定到视图层，所以，验证的过程其实就是向这个列表里添加错误信息的过程。我们一起来看这个例子：

<div>
    <h2>你好，请登录</h2>
    <div>
        <form id="loginFrom">
            <div>
                <label>邮箱</label>
                <input type="text" class="form-control" id="inputEmail3" placeholder="Email" v-model="email">
                </div>
            </div>
            <div>
                <label>密码</label>
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password" v-model="password">
            </div>
            <div>
               <button type="button" class="btn btn-default login" v-on:click="login()">登录</button>
            </div>
            <div v-if="errorList.length > 0">
                <div class="alert alert-danger" role="alert">{{errorList.join(';')}}</div>
            </div>
        </form>
    </div>
</div>
<script>
var vm = new Vue({
    el: '#loginFrom',
    data: {
        email: "",
        password: "",
        errorList: []
    },
    methods: {
        validate: function () {
            this.errorList = []
            if (this.email == '') {
                this.errorList.push('请输入邮箱');
            } else {
                var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if (!reg.test(this.email)) {
                    this.errorList.push('请输入有效的邮箱');
                }
            }
            if (this.password == '') {
                this.errorList.push('请输入密码');
            } else {
                if (this.password.length < 6) {
                    this.errorList.push('密码长度不得少于6位');
                }
            }

            return this.errorList.length <= 0;
        },
        login: function () {
            if (this.validate()) {
                alert('登录成功');
            }
        }
    }
});
</script>

为了排除无关内容对大家的影响，写这个例子的时候，博主排除了一切复杂的HTML结构和CSS样式，经过简单润色以后，这个例子的效果展示如下，果然GUI满足了人们颜控的一面，可让这个世界高速运行的是CLI，Bootstrap是博主这种“全栈工程师”的最爱之一。这种验证方式简直是人类本能的反应，可这恰好是最糟糕的一个例子，因为这个代码完全没法复用，可以想象得到，如果再继续增加针对密码强度，譬如大小写、数字等等的验证，这个代码会混乱成什么样子，所以，这是最简单的表单验证，同样是最糟糕的表单验证。

借鉴文章出处

function 和箭头函数的区别是什么

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

没有自己的 this，无法调用 call，apply。
没有 prototype 属性，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

function newFunc(father, ...rest) {
  var result = {};
  result.__proto__ = father.prototype;
  var result2 = father.apply(result, rest);
  if (
    (typeof result2 === 'object' || typeof result2 === 'function') &&
    result2 !== null
  ) {
    return result2;
  }
  return result;
}

Vue 组件封装怎么做

v-model 怎么实现

插槽使用

父子组件的使用

一个管理系统有不同权限用户，怎么实现

标签：面试题,Vue,data,前端,props,组件,message,7.9,数据
来源： https://blog.csdn.net/qq_41853417/article/details/118612691

前端面试题(四)7.9

目录标题

Vue 的filters的作用是什么？

简单介绍一下

下面我们来讲一下过滤器的使用方法

使用方式

参数写法

Vue 的props的作用是什么

前言

基本用法

补充：kebab-case

单向数据流： props是单向绑定的

props验证

$parent

Vue 中$emit 的作用是什么

前言

例子

子组件：

父组件：

点击之前的数据

点击之后的数据

axios 如何定义全局变量错误处理

使用过哪些elementui组件

ElementUI介绍

常用组件

Container 布局容器

Dropdown 下拉菜单

NavMenu 导航菜单

Table 表格

Pagination 分页

Message 消息提示

Tabs 标签页

表格如何实现分页加载

vue实现简单的分页功能

变量：

步骤1：计算页数

步骤二：根据页数对数据分组，并存进每一页

步骤三：设置默认显示页，上一页下一页，只需要切换当前页面的索引值就行了

表单验证如何实现

最简单的表单验证

function 和 箭头函数 的区别是什么

Vue 组件封装怎么做

v-model 怎么实现

插槽 使用

父子组件 的使用

一个管理系统有不同权限用户，怎么实现

function 和箭头函数的区别是什么

插槽使用

父子组件的使用