Vue常见简写 “:“ , “@“ , “#“ :帮助刚入行的伙伴快速看懂代码 |
您所在的位置:网站首页 › rm是什么职业的缩写 › Vue常见简写 “:“ , “@“ , “#“ :帮助刚入行的伙伴快速看懂代码 |
提示:本文仅仅是对Vue中比较常见的简写进行总结,适合刚入行有时看不懂代码的朋友. 目录 文章目录 前言 一、 : 是什么? 1. : 是什么意思? 2.怎么使用 : ? 二、@ 是什么? 1. @ 是什么意思? 2.怎么使用 @ ? 三、# 是什么? 1. # 是什么意思? 2.怎么使用 # ? 总结 前言刚刚入行,最可怕的无疑是看不懂代码,尤其是突然出现的lambda表达式以及各种简写,今天我就来归总一下在Vue.js中常见的一些简写 一、 : 是什么? 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也可以动态绑定多个值,例如一个对象 data() { return { objectOfAttrs: { id: 'container', class: 'wrapper' } } }或者一个数组 import { tableData } from "./data"; const columns: TableColumnList = [ { label: "日期", prop: "date" }, { label: "姓名", prop: "name" }, { label: "地址", prop: "address" } ]; 二、@ 是什么? 1. @ 是什么意思?示例: @click="add" 其中这个@其实就是v-on的简写形式,实际开发中也非常常见,接下来说一下@的意义和使用 首先了解一下v-on,如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令.例如通过用户的点击,去调用该点击事件的方法来改变属性的值. 2.怎么使用 @ ?如下例子,页面中会有两个按钮,一个上面标注[+],一个上面标注[-],当用户点击[+]按钮时,会调用后面的add方法,方法中对属性counter进行+1操作. {{counter}} + - const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add() { this.counter++ }, sub() { this.counter-- } }, })也可以在按钮点击事件上传入参数,如: @ click="adds(3)" {{counter}} + const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { adds(n) { this.counter+n } }, }) 三、# 是什么? 1. # 是什么意思?示例: template #header 其中这个#其实就是v-slot的简写形式,实际开发中也非常常见,接下来说一下#的意义和使用 首先了解一下v-slot,v-slot是具名插槽所使用的指令,意思就是将这部分模版片段传入子组件对应名字的插槽中,如果不太了解什么插槽,请查看Vue.js中文文档.插槽 Slots | Vue.js 2.怎么使用 # ?如下代码,向传递插槽内容 Here might be a page titleA paragraph for the main content. And another one. Here's some contact info 在组件中使用slot+name具名插槽 元素中的内容全部被传递到相应的插槽,最终渲染出的HTML为: Here might be a page titleA paragraph for the main content. And another one. Here's some contact info
总结 提示:以上就是今天要讲的内容,本文仅仅是作为初学者对Vue不太了解,无法读懂一些简写代码的知识补充,讲解的也是比较基础并且常用的一些简写.如依旧不太了解,请去Vue.js官方中文文档继续学习. |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |