广西龙网

  1. 首页 > 生活知识 > 潮科技 > >

汝州|前端人必备的Vue小技巧|建议收藏

律师汝州

汝州|前端人必备的Vue小技巧|建议收藏
那么 ， 下面小编就为大家总结了一些前端人在工作中会常用到的Vue小技巧 ， 建议收藏哦~
一、把 prop 限制为类型列表
当你在 prop 定义中需要使用到 validator 选项时 ， 可以将 prop 限制为一组特定的值：


export default {
name: 'Image'
  props: {src: {
type: String

style: {
type: String
validator: s => ['square' 'rounded'
.includes(s)


;
复制代码
这个 validator 函数接受一个 prop ， 返回 true 或 false 。 当你需要比布尔值允许的更多选项时 ， 也可以使用它 。 按钮类型或警报类型（信息、成功、危险、警告）是一些比较常见的用途 。
二、使用引号观察嵌套值
只需使用引号就可以轻松地直接查看嵌套值 ， 这对于处理深度嵌套的对象非常有用 。

watch {
  '$route.query.id'() {
    // ...
  

三、require.context()
如页面需要导入多个组件 ， 可以直接利用require.context写成下面这样 ， 来避免原始写法中出现大量重复代码的情况 。


const path = require('path')
const files = require.context('@/components/home' false /\\.vue$/)
const modules = {
files.keys().forEach(key => {
const name = path.basename(key '.vue')
modules[name
= files(key).default || files(key)
)
components:modules
四、 模板标签的另一种用途
该template标签可以在模板内的任何地方使用 ， 以更好地组织代码 。 我们可以用它来简化v-if逻辑 ， 有时v-for也是 。 我们可以使用template标签对元素进行分组 ， 并将他们提升v-if到template标签本身：

<template>
  <div class=\"card\">
    <img src=https://mparticle.uc.cn/"imgPath\" />
    <h3>
      {{ title 
    </h3>
    <template v-if=\"expanded\">
      <h4>
        {{ subheading 
      </h4>
      <div class=\"card-content\">
        <slot/>
      </div>
      <SocialShare/>
    </template>
  </div>
</template>
五、多文件单文件组件
这是 SFC 的一个鲜为人知的功能 ， 如果你需要共享样式、文档或其他任何内容 ， 可以像使用常规 HTML 文件一样导入文件 ， 这会很方便 ， 也非常适合那些超长组件文件 。

<!-- \"single\" 文件组件 -->
<template src=https://mparticle.uc.cn/"./template.html\"></template>
<script src=https://mparticle.uc.cn/"./script.js\"></script>
<style scoped src=https://mparticle.uc.cn/"./styles.css\"></style>
六、检测元素外部（或内部）的点击
有时我们需要检测点击是发生在特定元素el的_内部_还是_外部_ 。 这个时候我们通常会使用到下面这个方法：

window.addEventListener('mousedown' e => {


上一篇：短视频|安全快讯 | 云盾智慧发布三款新品 全方位保障Web应用安全

下一篇：编程|78亿人预约Mate50，网友P图“嘲讽”的背后，是对网络现状的不满