浅谈vue中的$含义及其用法($xxx引用的位置)

news2024/11/18 12:38:21

看了各个帖子的描述,还是未能参透$在vue中所想发挥的本意,将一些一知半解的理解摘抄下来,顺带附上自己常见的用法,以加深理解和记忆。

摘抄

这些只是Vue的命名规则,为了区分普通变量属性,避免我们自己声明或者添加自定义属性导致覆盖

$event 是 vue 提供的传递实践的参数。

$是在vue中所有实例中都可用的一个简单约定,这样做会避免和已被定义的数据,方法,计算属性产生冲突。

$是在vue中所有实例中都可用的一个简单约定,这样做会避免和已被定义的数据,方法,计算属性产生冲突。
另一个好问题!如果你写成:
Vue.prototype.appName = ‘My App’;
那么你希望下面的代码输出什么呢?
new Vue({
data: {
// 啊哦,appName 是一个我们定义的实例属性名!
appName: ‘The name of some other app’
},
beforeCreate: function () {
console.log(this.appName)
},
created: function () {
console.log(this.appName)
}
})
日志中会先出现 “My App”,然后出现 “The name of some other app”,
因为 this.appName 在实例被创建之后被 data 覆写了。
我们通过 $ 为实例属性设置作用域来避免这种事情发生。
你还可以根据你的喜好使用自己的约定,诸如 $_appName 或 ΩappName,
来避免和插件或未来的插件相冲突。

这里附上一个消息弹窗功能的外部链接:this.$toast() 了解一下?

结合这个案例可以更直观和形象的理解vue中的$,当时初看这篇文章对我受益匪浅,有时间也会另起一篇文章来讲对这个案例自己的一些理解与拓展


运用

很多初学者不知道项目中的$xxx是哪来的,具体有啥用,这里就来带大家顺藤摸瓜。(顺带一提像i18n国际化里的 $t或其他一些专有的 $event在项目中是找不到的,这是某些引用库自己的专有写法)
在这里插入图片描述
例如项目中用到的这个 $dic和 $dimension,我们就全局搜索Vue.prototype. $dicVue.prototype.$dimension,果不其然在main.js里:
在这里插入图片描述
在这里插入图片描述
继续顺藤摸瓜找到dimension.js,就可以看到 $dimension挂载的内容和方法了


感觉还是写的有些模糊,等自己理解深一层后再回来更新这篇文章吧
THX

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409522.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端开发一枚,入职前自学的感觉不难,为什么工作起来很吃力?

前言 我是软件工程专业,学前端之前,学过 C/C、Java、PHP、.net 成绩还不错基本都是90多分。感觉自己干后端也不吃力。实验室里面的项目都是前后都写。最爱 PHP,本以为以后就走上PHP后端工程师的道路了。 由于项目需要的原因,后来…

关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现

📂文章目录​​二、📚网站介绍​​​​三、🔗网站效果​​​​▶️1.视频演示​​​​🧩 2.图片演示​​​​四、💒 网站代码​​​​🧱HTML结构代码​​​​🏠CSS样式代码​​​​五、&#x1…

Vue中实现自定义excel下载

最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能。 实现下载有两种方式,一种是后端生成一个excel,放在服务器指定目录下,然后前端直接去后端拿。第二种是后端传给前端一个json的list,前端用…

vue 中使用自定义字体

1.先下载字体 2.在新建的font.css文件中加入下面代码引入字体 font-face { font-family: MSYH; src: url(阿里巴巴普惠体 L.ttf); font-weight: normal; font-style: normal; } font-face { font-family: HY; src: url(汉仪天宇风行体W.ttf); font-weight: normal; f…

React Hooks概述及常用的Hooks介绍

React Hooks概述及常用的Hooks介绍1 为什么会有Hooks2 Hooks的含义3 Hooks的用法3.1 useState():状态钩子3.2 useEffect():副作用钩子3.3 useCallback():记忆函数3.4 useMemo():记忆组件3.5 useRef():保存引用值3.6 us…

【Fiddler Everywhere】史上最强抓包工具(安装 修改教程)

一、Fiddler简介 Fiddler Everywhere 是啥? 从名称上来看,就大概能猜出它的寓意,官方也通过一段话,解释了Fiddler Everywhere的作用: Fiddler Everywhere is a web debugging proxy for any browser, any application, any proc…

WEB核心【请求转发(阶段重点)】第六章

目录 1:请求转发【阶段重点】 1.1:语法格式及转发使用 1.2:request域对象 1.3:小结:请求转发间做数据传递 1.4:请求转发访问受保护目录 1:请求转发【阶段重点】 1.1:语法格式及转发使用 格式:forward:/要跳转的程序或者页面…

移动端适配方案总结

目录一、背景介绍1.1 为什么要进行移动端适配1.2 移动端适配方案二、rem方案2.1 什么是rem2.2 怎么根据屏幕尺寸设置根元素html的font-size2.3 postcss-pxtorem三、viewport方案3.1 什么是viewport方案3.2 postcss-px-to-viewport四、总结(如果只想看实现步骤可跳过…

《Vue.js前端开发实战》课后习题答案

《Vue.js前端开发实战》课后习题答案第一章一、 填空题二、 判断题三、 选择题四、 简答题五、 编程题第2章一、 填空题二、 判断题三、 选择题四、 简答题五、 编程题第3章一、 填空题二、 判断题三、 选择题四、 简答题五、 编程题第4章一、 填空题二、 判断题三、 选择题四、…

微信小程序 四种弹窗方式

微信小程序弹窗一、wx.showToast(Object object)二 、wx.showModal(Object object)三、wx.showLoading(Object object)四、wx.showActionSheet(Object object)五、官方文档一、wx.showToast(Object object) 显示消息提示框 wx.showToast({title: 内容, //提示的内容duration: …

uniapp web-view加载本地html

有个需求需要加载本地的html,用uniapp的官网demo和文档进行操作一直有问题,现在给大家排排雷: demo:https://hellouniapp.dcloud.net.cn/pages/component/web-view-local/web-view-local 文档:https://uniapp.dcloud.n…

scrollTop、clientHeight、 scrollHeight...学完真的理解了

在开发中我们常常会用到判断滚动条是否触底的逻辑。我一般都会在网上搜一段代码,这段代码有用到scrollTop、clientHeight、 scrollHeight 。接着我简单看一下好像理解了,再在项目里用一下好使了就没去深入研究相关概念。等下次用到了还是搜一下&#xff…

【Vue】图片拉近、全屏背景实战经验总结

文章目录1 图片拉近2 全屏背景2.1 background-attachment2.2 background-size2.3 display:flex;2.4 flex-direction2.5 100vh1 图片拉近 缘起是看到了下面的图片,我发现当鼠标悬浮的时候,发现他是可以拉近的,也就是图片的宽高不变&#xff0…

【学姐面试宝典】—— 前端基础篇Ⅱ(HTTP/HTML/浏览器)

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录Doctype 作用,严格模式与混杂模式如何区分&#x…

关于uni-app入门看完这篇就够了

关于uni-app的入门 前言 这是一篇关于uni-app入门的文章,也是我对uni-app的总结与归纳,刚开始的时候在这个平台上面找寻同类型的文章的时候发现讲的都很片面不怎么详细,所以就写了一篇关于基本入门的文章,全文总计 7500 字 预计…

Vue 清除Form表单校验信息 清除表单验证上次提示信息

问题描述 在Vue项目中使用Form组件进行表单验证,再次打开该表单时,上次的验证提示信息依然存在,业务场景要求再次打开该表单时清除验证提示信息和绑定的数据。 解决办法 在控制表单显隐的方法内加入以下代码即可实现: 1.使用…

react性能优化之memo的作用和memo的坑

前言 在react中,组件渲染的是最常有的事情。但是,有部分的渲染是不必要的,是可以避免的。 在react的一般规则中,只有父组件的某一个状态改变,父组件下面所有的子组件不论是否使用了该状态,都会进行重新渲…

[vue+element-ui] form中输入框无法输入问题的解决方法

目录 一.问题发现: 二.正确案例与错误原理: 三.问题解决 一.问题发现: 笔者在制作登录页面前端时使用elementuivue技术,发现输入框无法输入任何内容。 在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进…

谷歌浏览器插件HackBar安装方法(详细教程)

文章目录1.下载压缩包2.将压缩包添加至扩展程序3.修改配置文件4.功能说明1.下载压缩包 链接:https://pan.baidu.com/s/1XOKo_ILZv8PcJihoc8981A?pwd3ha8 提取码:3ha8 注意:下载即可,不用解压。 2.将压缩包添加至扩展程序 打开…

【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(中)-- 搜索建议

🤵‍♂️ 个人主页: 计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…