vue 中的@、@/和./的区别

本文详细介绍了Vue.js中事件绑定的使用方法,包括@符号作为v-on的简写,以及如何在标签内部添加事件绑定。文章强调了Vue实例中所有函数必须放置在methods对象中的重要性,否则将导致事件绑定失败。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

@:表示vue语法中v-on的简写;绑定事件的专用格式。当事件触发的时候,函数才会来调用。

使用格式,在标签内部添加v-on:事件名="事件"

注意:Vue实例中所有的函数必须放在methods对象中,否则利用v-on绑定的事件,系统会报找不到该事件的错误

@ /:表示 src目录下;

. /:表示当前目录下;

 

Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (65:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& 4:14-558 14:3-18:5 15:22-566 @ ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& @ ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue @ ./src lazy ^\.\/views.*$ namespace object @ ./src/utils/safe.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (7:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& 4:14-545 14:3-18:5 15:22-553 @ ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& @ ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/drawings/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/drawings/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/drawings/Index.vue @ ./src lazy ^\.\/views.*$ namespace object @ ./src/utils/safe.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src lazy ^\.\/views.*$ namespace object Module not found: Error: [CaseSensitivePathsPlugin] `D:\projects\subwaysoft-plus-bjzj-web\src\views\Index\supervise\singleProject\components\SupChek\taskProcessing\components\AllNumCheckDialog.js` does not match the corresponding path on disk `allNumCheckDialog.js`. WARNING Compiled with 11 warnings 16:27:36 warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'EXIT' was not found in '@/apis/basic/admin' warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'ROLE_USER_CODE' was not found in '@/apis/basic/admin' warning in ./src/views/public/SSOLogin.vue?vue&type=script&lang=js& "export 'SYSMENU_HALL_LIST' was not found in '@/apis/basic/admin' warning in ./src/views/public/SSOLogin.vue?vue&type=script&lang=js& "export 'SYSMENU_ONE_HALL_LIST' was not found in '@/apis/basic/admin' warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'UPDATE_PWD_BYSELF' was not found in '@/apis/basic/admin' warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'UPDATE_PWD_BYSELF' was not found in '@/apis/basic/admin' warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'USER_DETAIL' was not found in '@/apis/basic/admin' warning in ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/components/BaseInfo.vue?vue&type=style&index=0&id=5d017548&lang=less&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (13:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/components/BaseInfo.vue?vue&type=style&index=0&id=5d017548&lang=less&scoped=true& 4:14-592 14:3-18:5 15:22-600 @ ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/components/BaseInfo.vue?vue&type=style&index=0&id=5d017548&lang=less&scoped=true& @ ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/components/BaseInfo.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/FireDialog.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/FireDialog.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/FireDialog.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/components/SupChek/SupTaskProcessing.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/SupChek/SupTaskProcessing.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/SupChek/SupTaskProcessing.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/components/TabsProcess.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/TabsProcess.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/TabsProcess.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/Index.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (65:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& 4:14-558 14:3-18:5 15:22-566 @ ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& @ ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/workPlan/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/workPlan/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/workPlan/Index.vue @ ./src/views/Index/fireControl/business/layout/routeUrl.js @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/layout/right.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/layout/right.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/layout/right.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/Index.vue @ ./src/router/fireMain.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (7:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& 4:14-545 14:3-18:5 15:22-553 @ ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& @ ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/drawings/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/drawings/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/drawings/Index.vue @ ./src/views/Index/fireControl/business/layout/routeUrl.js @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/layout/right.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/layout/right.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/layout/right.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/Index.vue @ ./src/router/fireMain.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src lazy ^\.\/views.*$ namespace object Module not found: Error: [CaseSensitivePathsPlugin] `D:\projects\subwaysoft-plus-bjzj-web\src\views\Index\supervise\singleProject\components\SupChek\taskProcessing\components\AllNumCheckDialog.js` does not match the corresponding path on disk `allNumCheckDialog.js`.
最新发布
07-31
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值