Vue常见简写 “:“ , “@“ , “#“

最新推荐文章于 2024-06-30 22:08:25 发布

海蓝树

最新推荐文章于 2024-06-30 22:08:25 发布

阅读量2k

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xwnxwn/article/details/137464185

版权

一、 : 是什么？
1. : 是什么意思?

示例：:data="tableData"

其中这个 : 其实是v-bind的简写形式,实际开发中非常常见,所以首先先来说一下这个 : 的意义和使用.

首先需要了解一下v-bind,v-bind指令指示Vue将元素的id属性与组件的tabalData属性保持一致.如果绑定的值为null或undefined,那么该属性将从渲染的元素上移除.通常想要响应式的绑定一个属性,都会选择v-bind.

而 : 就是v-bind的简写形式,可能看起来和一般的HTML属性长得不太一样,但它的确是合法合规的属性绑定字符,并且所有支持Vue的浏览器都可正常解析它.并且,它不会出现在最终渲染的Dom中,相信在你深入了解过它后,会喜欢这种写法的.
2.怎么使用 : ?

最常见的应该就是 : disabled 通常用来判断是否禁用,当isButtonDisabled为true或空字符串时表示禁用,当isButtonDisabled为false时,表示不禁用

其中 : 表示v-bind,表示disabled该boolean类型判断与isButtonDisabled该boolean类型属性进行绑定,isButtonDisabled属性的boolean值等于disabled的boolean值.

<button :disabled="isButtonDisabled">Button</button>

也可以动态绑定多个值,例如一个对象

    data() {
      return {
        objectOfAttrs: {
          id: 'container',
          class: 'wrapper'
        }
      }
    }



    <div v-bind="objectOfAttrs"></div>

或者一个数组

二、@ 是什么？
1. @ 是什么意思?

示例: @click="add"

其中这个@其实就是v-on的简写形式,实际开发中也非常常见,接下来说一下@的意义和使用

首先了解一下v-on,如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令.例如通过用户的点击,去调用该点击事件的方法来改变属性的值.
2.怎么使用 @ ?

如下例子,页面中会有两个按钮,一个上面标注[+],一个上面标注[-],当用户点击[+]按钮时,会调用后面的add方法,方法中对属性counter进行+1操作.

    <body>
      <div id="app">
        <h2>{{counter}}</h2>
        <button @click="add">+</button>
        <button @click="sub">-</button>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            counter: 0
          },
          methods: {
            add() {
              this.counter++
            },
            sub() {
              this.counter--
            }
          },
        })
      </script>
    </body>

也可以在按钮点击事件上传入参数,如: @ click="adds(3)"

    <body>
      <div id="app">
        <h2>{{counter}}</h2>
        <button @click="adds(3)">+</button>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            counter: 0
          },
          methods: {
            adds(n) {
              this.counter+n
            }
          },
        })
      </script>
    </body>

三、# 是什么？
1. # 是什么意思?

示例: template #header

其中这个#其实就是v-slot的简写形式,实际开发中也非常常见,接下来说一下#的意义和使用

首先了解一下v-slot,v-slot是具名插槽所使用的指令,意思就是将这部分模版片段传入子组件对应名字的插槽中,如果不太了解什么插槽,请查看Vue.js中文文档.插槽 Slots | Vue.js
2.怎么使用 # ?

如下代码,向<BaseLayout>传递插槽内容

<BaseLayout>
      <template #header>
        <h1>Here might be a page title</h1>
      </template>

      
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>

      <template #footer>
        <p>Here's some contact info</p>
      </template>
    </BaseLayout>

在组件中使用slot+name具名插槽

<template>元素中的内容全部被传递到相应的插槽,最终渲染出的HTML为:

    <div class="container">
      <header>
        <h1>Here might be a page title</h1>
      </header>
      <main>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </main>
      <footer>
        <p>Here's some contact info</p>
      </footer>
    </div>

总结

提示：以上就是今天要讲的内容,本文仅仅是作为初学者对Vue不太了解,无法读懂一些简写代码的知识补充,讲解的也是比较基础并且常用的一些简写.如依旧不太了解,请去Vue.js官方中文文档继续学习.

海蓝树

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Vue常见简写 “:“ , “@“ , “#“

首先需要了解一下v-bind,v-bind指令指示Vue将元素的id属性与组件的tabalData属性保持一致.如果绑定的值为null或undefined,那么该属性将从渲染的元素上移除.通常想要响应式的绑定一个属性,都会选择v-bind.而 : 就是v-bind的简写形式,可能看起来和一般的HTML属性长得不太一样,但它的确是合法合规的属性绑定字符,并且所有支持Vue的浏览器都可正常解析它.并且,它不会出现在最终渲染的Dom中,相信在你深入了解过它后,会喜欢这种写法的.label: "日期",
复制链接

扫一扫