怎么区分 vue中的@和:缩写

  • 原创
  • |
  • 浏览：11591
  • |
  • 更新：
  • 怎么区分 vue中的@和:缩写1
  • 怎么区分 vue中的@和:缩写2
  • 怎么区分 vue中的@和:缩写3
  • 怎么区分 vue中的@和:缩写4
分步阅读

在 vue script 中经常看到@符号和元素属性前的：，如@click，:visible.sync，有的属性带：，有的属性不带，会让初学者困惑，我们怎么准确理解这些符号的含义呢？

工具/原料

  • macbookair
  • macoscatalina
  • HbuildX3.2

方法/步骤

  1. 1

    vue 中@的第一种用法：@作为 v-on指令的缩写，为了简化程序的写法，尤其适用于大中型项目，能减少不少重复劳动。

    怎么区分 vue中的@和:缩写
  2. 2

    vue 中@的第二种用法：@作为模块路径的别名，如 src 所在目录路径就可以用@别名来简化书写，使得import 导入模块时能简化模块路径的长度。如：import {userList} from "@/api/api"; @就等价于/src 目录的相对路径，这样的别名定义在webpack.base.conf.js中的alias项。

    怎么区分 vue中的@和:缩写
    怎么区分 vue中的@和:缩写
  3. 2
    此文章未经许可获取自百度经验
  4. 3

    vue组件属性中的：写法。：其实是 v-bind 指令 的缩写，二者是等价关系，：缩写可以减少重复写 v-bind 的麻烦，尤其适用于大中型vue 前端项目。

    怎么区分 vue中的@和:缩写
    END

注意事项

  • @作为目录路径别名时需要加/使用，如@/api/api
  • @作为v-on 指令的缩写使用时，@代替了 v-on:整个部分，就不带：使用了，如：@click.native
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部