vue @用法

最新推荐文章于 2025-07-26 10:10:42 发布
原创 最新推荐文章于 2025-07-26 10:10:42 发布 · 1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细解析了Vue.js框架中两个核心指令的使用方法：v-bind用于绑定变量或函数返回值，而v-on则用于绑定事件处理函数，执行相应的业务逻辑。了解这些指令能帮助开发者更高效地进行前端开发。

“:” 是指令 “v-bind”的缩写
可以绑定一个变量或者有返回值的函数

“@”是指令“v-on”的缩写
绑定一个函数，执行业务逻辑

长安start
关注
Vue实战：轻松掌握输入框@功能实现技巧
weixin_45734165的博客
07-15 971
但是如果我们点击了成员列表的某一项，此时输入框已经失焦了，虽然我们可以获取选择的成员并插入，如果只是简单的字符串追加的话，光标会在下次输入时默认定位到开头；我们需要在用户输入@的时候弹出成员列表，因此需要监听用户的输入，然后在用户选择成员后需要关闭。其实到这里就基本实现了@功能，但是还有一个问题，当输入框失焦时回调了父组件的blurFunc方法，导致成员列表关闭了，但是数据还没有拿到。实现成员列表的方式比较简单，其实就是一个列表，一个简单的v-for循环就可以搞定，点击时将当前选择的成员项回调给父组件。
vue实现@人员功能(atSomeone)
weixin_44696379的博客
05-16 3277
实现@人员功能
vue 输入框@人功能组件，支持复制粘贴
不会做饭的程序员的博客
05-07 2901
vue 输入框@人功能组件，支持复制粘贴，多端通用
Vue PC端@功能实现
qq_38211205的博客
04-22 3778
一：前言 近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~ 二：思路 我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。 三：需求拆解 按住shift + @ 的时候，弹出人员选择器 人员选择器要跟随光标的位置出现
【Vue】中“:”、“.”、“@”、“#”
热门推荐
欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
05-16 1万+
“:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写，“#”是v-slot的缩写；“.”是修饰符。
Vue》》@ 用法
最新发布
Kaizen的博客
07-26 369
【代码】Vue》》@ 用法。
vue中引入路径@的用法
zszcc的博客
09-14 6497
一、Vue文件中引用路径的介绍 1、路径 ./ ./当前文件同级目录 2、路径 …/ …/当前文件上一级目录 3、@符号 @ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录，避免易错的相对路径。 二、Vue中使用 1. vue.config.js配置文件中使用 chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('s
vue @ : 的用法
baidu_23263735的博客
10-23 8774
“:” 是指令 “v-bind”的缩写 可以绑定一个变量或者有返回值的函数 “@”是指令“v-on”的缩写 绑定一个函数，执行业务逻辑
vue中引入路径@的用法及说明
weixin_42508745的博客
01-30 2065
引用 https://blog.csdn.net/weixin_44836531/article/details/131061927。
vue中引入路径@的用法，@实际上=/src目录
zz2230633069的博客
10-20 6392
一、Vue文件中引用路径的介绍 1、路径 ./ ./当前文件同级目录 2、路径 …/ …/当前文件上一级目录 3、@符号 @ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录（是固定的），避免易错的相对路径。 二、Vue中使用 1. vue.config.js配置文件中使用 chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', res
node.js及npm、vue等js类框架中@的用法
細水、長流√的专栏
09-10 1798
首先，“@”是一个符号，电子信箱中意义为“at”，即“某用户”在“某服务器”。好了，关于在前端nodejs中相关项目中经常出现的@符号就总结到此，还有哪些小编不知道的用法，还请博友在下面留言补充，以完善知识，利于学习之用。二、在npm中，与“/”相结合，置于包的名字前，表示该包的范围，即指示该包属于某个用户或组织，是该用户或组织提供的私有或公有包。三、node.js中，符合ES6标准的import命令中出现的@， 如。四、Vue的元素标签中，@”是指令“v-on”的缩写。
vue import文件时@用法详解以及使用@后支持文件快速定位
wfly blog
10-23 4684
如图所示，引入PropsDemo.vue组件的时候，可以使用下列两种方法，而没有使用./或者../这种相对路径的写法 import PropsDemo from '@/components/common/test/PropsDemo' import PropsDemo from '@testCp/PropsDemo' 具体实现方法：找到webpack.base.conf.js配置文件...
Vue ts 中的@watch,@ prop的用法
jjw_zyfx的博客
05-25 1789
完整的请看下边这个GitHub中的 https://github.com/kaorun343/vue-property-decorator#Prop https://blog.csdn.net/MCQq123321/article/details/84100961
Vue入门--@用法
路飞的博客
09-06 571
1. 效果 先做个简易版本 因为简易版本不需要做图。长的跟下面一样... 2. 实现 css #wrap { height: 50vh; width: 50vw; display: flex; flex-direction: column; } #header { dis...
Message compilation error: Invalid token inplaceholder vue-18n使用特殊字符报错
letnewworld的博客
12-18 2445
正确使用方法，用 { ‘@’ } 把特殊字符括起来。
vue中的@用法的代码jsconfig.json
weixin_52312684的博客
03-21 369
{ "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": { "@/*" :["src/*"] } }, "exclude": [ "node_modules" ] } ...
react router @4 和 vue路由 详解(二)react-router @4用法
denggen20020210的博客
12-06 176
完整版：https://www.cnblogs.com/yangyangxxb/p/10066650.html 2、react-router @4用法 　　a、大概目录 　　 不需要像vue那样麻烦的用到一个单独的文件夹，react只需要在index.js中部分配置即可 　　b、准备工作 　　　 yarn add react-rou...
vue-cli: @开头的事件修饰符 的用法
Xu190131的博客
05-20 330
一. 事件修饰符 点击子组件, 也会认为点击了父组件, 即冒泡行为 <template> <div> <h1>事件修饰符</h1> <div @click="fatherClick"> 父级 <div @click="subClick1">子级1</div> <!-- 阻止冒泡修饰符, 会阻止父级事件 --> <div @click.sto
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值