devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘_vue中?:什么意思

作者：小小林熬夜学编程 | 2024-03-20 12:35:18

赞

踩

vue中?:什么意思

背景

刚刚学vue没多久，经常分不清情况什么时候用什么符号：

“:” 是指令 “v-bind”的缩写

“.”是修饰符

“@”是指令“v-on”的缩写 ，它用于监听 DOM 事件

“#”是v-slot的缩写；

 "{{}}"  插值语法

 "$" ：Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ 。

简写

Vue中有很多的指令，且形式都是 v-xxx。

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写

 1  “:” 是指令 “v-bind”的缩写  

<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx 同样要写 js 表达式，可以直接读取到 data 中的所有属性

如果属性没有加v-bind指令，那么属性中""里的值就是普通字符串，如果加了v-bind指令，就会把""里的值解析为JS表达式

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>模板语法</title>
  6.     <!-- 引入Vue -->
  7.     <script type="text/javascript" src="../js/vue.js"></script>
  8.   </head>
  9.   <body>
  10.  
  11.     <div id="root">
  12.       <h2>插值语法</h2>
  13.       <h4>你好，{{ name }}</h4>
  14.       <hr />
  15.       <h2>指令语法</h2>
  16.       <a v-bind:href="tencent.url.toUpperCase()" x="hello">点我去看{{ tencent.name }}1</a>
  17.       <a :href="tencent.url" x="hello">点我去看{{ tencent.name }}2</a>
  18.     </div>
  19.   </body>
  20.  
  21.   <script type="text/javascript">
  22.     Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  23.  
  24.     new Vue({
  25.       el: '#root',
  26.       data: {
  27.         name: 'jack',
  28.         tencent: {
  29.           name: '开端',
  30.           url: 'https://www.baidu.com',
  31.         }
  32.       }
  33.     })
  34.   </script>
  35. </html>

 冒号":"  （v-bind) 区分与v-model

Vue中有2种数据绑定的方式

  • 单向绑定v-bind数据只能从 data 流向页面
  • 双向绑定v-model数据不仅能从 data 流向页面，还可以从页面流向 data

备注

  • 双向绑定一般都应用在表单类元素上，如 <input> <select> <textarea> 等
  • v-model:value可以简写为v-model，因为v-model默认收集的就是value值

2  @ 符号示例：

  • v-on 给标签绑定事件, 一般是点击事件绑定： (v-on:click="clickFn") 其简写：
  1. <template>
  2.  <div class="all-sort-list2" @click="goSearch"/>
  3. </template>
  4. <script>
  5.  
  6. export default{
  7. data(){
  8.         }
  9. methods:{
  10.         goSearch(){
  11.             console.log('gosearch methods.')
  12.             }
  13.     }
  14. }
  15.  
  16.  
  17. </script>
  18.

没有参数,回调函数参数e

有参数,就用$event占位,在回调中e接收。

在@click后面还可以加扩展参数：事件修饰符

@click.prevent 阻止浏览器默认行为(@click.prevent="clickFn")
@click.stop 阻止冒泡(@click.stop="clickFn")

@click.once 事件只触发一次（常用）

@click.capture：使用事件的捕获模式

@click.self：只有event.target是当前操作的元素时才触发事件。

@click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件

@click.passive 事件的默认行为立即执行，无需等待事件回调执行完毕 

.passive 和 .prevent 不能一起使用 .prevent 将会被忽略

 
@  用在按键上：按键修饰符
.enter 回车(@keyup.enter="keyupFn")
.esc (@keyup.esc="keyupFn")

3 “#”是v-slot的缩写；

什么是插槽？ Slot  与，v-slot
 在vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。

从 vue@2.6.x 开始，Vue 为具名和范围插槽引入了一个全新的语法，v-slot 指令。目的就是想统一 slot 和 slot-scope 语法，使代码更加规范和清晰。既然有新的语法上位，很明显，slot 和 scope-slot 也将会在 vue@3.0.x 中彻底的跟我们说拜拜了。而从 vue@2.6.0 开始，官方推荐我们使用 v-slot 来替代后两者。

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

  1. <template >
  2.   <template #header>
  3.     <h1>Here might be a page title</h1>
  4.   </template>
  5.  
  6.   <p>A paragraph for the main content.</p>
  7.   <p>And another one.</p>
  8.  
  9.   <template #footer>
  10.     <p>Here's some contact info</p>
  11.   </template>
  12. </template>

slot呢， 有点像我们考试卷子上留空的横线________, 让你任意的把答案填写上。 

4 插值语法：{{}} 

功能：用于解析标签体内容

：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域

  1. <h3 class="fl">{{ list.name }}</h3>
  2. <script>
  3.  
  4. export default{
  5. data(){
  6. list:{
  7.     name:'Test'
  8.     }
  9.    }
  10.   }
  11. </script>

5 $:符号的理解

1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ ，以便与用户定义的属性区分开来；$ mount是 Vuex 源码中挂载到 Vue 根实例上去的

2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义； 

3）在事件总线中，添加全局总线是$bus, 用$on $emit $off方法去绑定、触发和解绑事件

  • $bus

下面是在vue2项目程序主入口main.js运行时，一开始就加入$bus的写法示例：

  1. new Vue({
  2.     store: store, //组件会包含：$store
  3.     router: router, //路由组件，自动产生2个属性：$route: 一般用于获取路由信息, $router：用于编程式导航配置[push|replace]
  4.     render: h => h(App),
  5.     beforeCreate() {
  6.         Vue.prototype.$bus = this// 全局事件总线，万能：一般用于兄弟组件通信,安装全局事件总线，$bus 就是当前应用的 vm
  7.     },
  8. }).$mount('#app')
  • $event
    • $event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event
    • 在原生事件中，$event是事件对象 可以点出来属性 
    • 在原生事件中，$event是事件对象，在自定义事件中，$event是传递过来的数据（参数）
    • 在自定义事件中，$event是传递过来的数据
    • $event 这个名字是固定，是不能可以修改。

 |--- 原生vue里的$event例子

 4）templeta里面动态绑定的事件，默认情况是传递的参数$event

  1. <template>
  2. <button @click="getData($event)">按钮</button>
  3. </template>
  4.  
  5. <script>
  6. export default {
  7. name:'',
  8. methods:{
  9.  getData = (e) => {
  10.             console.log(e)
  11.         }
  12. }
  13.   
  14. }
  15. </script>

自定义事件使用$event

这里$event是Child子组件传递过来的8900这个参数值。

<button @click="$emit('update:money',8900)">花钱</button>
  1. <template>
  2.   <div> SyncTest
  3.     <h2>不使用修饰符sync</h2>
  4.     <!--    :money props传参-->
  5.     <!--    update:money 是自定义事件的名字，-->
  6.     <Child :money="money" @update:money="money=$event"></Child>
  7.   </div>
  8. </template>
  9.  
  10. <script>
  11. import Child from "@/pages/Communication/SyncTest/Child";
  12.  
  13. export default {
  14.   name: "SyncTest",
  15.   components: {Child,},
  16.   data() {
  17.     return {
  18.       money: 9000,
  19.     }
  20.   },
  21. }
  22. </script>
  23.  
  24. <style scoped>
  25.  
  26. </style>

补充：区别css对应的特殊符号的使用：

https://blog.csdn.net/LlanyW/article/details/128492530?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128492530%22%2C%22source%22%3A%22LlanyW%22%7Dicon-default.png?t=N7T8https://blog.csdn.net/LlanyW/article/details/128492530?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128492530%22%2C%22source%22%3A%22LlanyW%22%7D

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/273431?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号