传说中 VUE 的“语法糖”到底是啥?
一、什么是语法糖?
语法糖也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法,在不影响功能的情况下,添加某种简单的语法也能实现效果,这种语法对计算机没有任何影响,但是对于程序员更方便,通常增加的语法糖能够增加程序员的可读性,减少出错的机会。
使用语法糖可以简化代码,更便于程序员开发。
二、VUE中语法糖有哪些?
1、最常见的语法糖 v-model
使用 v-model 可以实现数据双向绑定,但是如何实现的呢?
v-model 绑定数据之后,既绑定了数据,又添加了事件监听,这个事件就是 input 事件。
使用案例:
//语法糖写法
<input type="text" v-model="name" >//还原为以下实例
<input type="text" v-bind:value="name" v-on:input="name=$event.target.value">
输入的时候会触发 input 事件,input 事件会把当前值赋值给 value ,这就是 v-model 为什么可以实现双向绑定的原因。
2、v-bind 的语法糖
v-bind 用来添加动态属性的,常见的 src、href、class、style、title 等属性都可以通过 v-bind 添加动态属性值。
v-bind 的语法糖就是去掉 v-bind 替换成冒号 (:)
// 语法糖写法
<div :title="title"><img :src="url" alt=""><a :href="link">没有语法糖</a>
</div>// 没有语法糖
<div v-bind:title="title"><img v-bind:src="url" alt=""><a v-bind:href="link">没有语法糖</a>
</div>
3、v-on 的语法糖
v-on 绑定事件监听器的,v-on 的语法糖,就是简写成@ 。
情况1:如果方法不传参时,可以不加小括号。
<button @click="btn">语法糖</button><button v-on:click="btn">无语法糖</button>//需要注意的是,如果方法本身有一个参数,会默认将原生的事件event参数传递进来
methods:{btn( event ){console.log( 'event' , event )}
}
情况2:如果需要传递参数时,又同时需要 event 参数。
<button @click="btn( '点击事件' , $event )">语法糖</button>//需要注意的是,$event 事件拿到浏览器事件对象
methods:{btn( type, event ){console.log( 'type' , type ) //点击事件console.log( 'event' , event )}
}
4、修饰符
修饰符是以半角句号 . 指明的特殊后缀。v-on 后面的修饰符,也是语法糖。
示例:链接添加点击事件,点击之后不希望跳转。
//语法糖
<a href="http://www.baidu.com" @click.prevent="go">百度</a>//普通写法
<a href="http://www.baidu.com" v-on:click="go">百度</a>
methods:{go(e){e.preventDefault();console.log('阻止链接跳转')}
}
prevent 修饰符是阻止默认事件。还有 submit 同样也适用。
<form @submit.prevent="onSubmit"></form>
下列是常见的修饰符,与上边 .prevent 使用相同。
- .stop 用来阻止事件冒泡。
- .once 事件只触发一次。
- .self 事件只在自身触发,不能从内部触发。
- .enter | .tab | .delete | .esc ..... 键盘修饰符
- .ctr | .alt | .shift | .meta 系统修饰符
5、动态css
使用 v-bind 可以通过 style 或 class, 可以添加动态样式。
//点击 你好,实现文字红黑之间切换
<h1 @click=" changeColor = !changeColor " :style="{color:changeColor?'red':'black'}">你好
</h1>data:{changeColor:false
}
6、注册组件语法糖
所谓的注册组件语法糖是指省去组件构造器的定义,直接将组件构造器对象传入注册组件函数里,这样会减少 CPU 的调度以及内存的分配。
全局组件使用:
//全局组件语法糖写法
Vue.component('my-component' , template:`<div>组件内容</div>`)/* 全局组件注册 */
//组件使用
<my-component></my-component>
//注册组件
const myComponent = Vue.extend({template:`<div><h2>VUkeh</h2> </div>`
})
Vue.component('myComponent', myComponent)
局部组件使用:
//全局组件语法糖写法
components:{'my-component':{template:`<div>组件内容</div>`}
}/* 局部组件注册 */
//注册组件
const myComponent = Vue.extend({template:`<div><h2>VUkeh</h2> </div>`,components:{child:{template:`<div>子组件内容</div>`}}
})
Vue.component('myComponent', myComponent)
传说中 VUE 的“语法糖”到底是啥?相关推荐
- Vue setup语法糖
Vue setup语法糖 setup语法糖指的是Vue组件当中的setup字段 是 Vue3 的一个新语法糖,在 setup 函数中. 所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 set ...
- 三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
- Vue 新 ref 语法糖提案引热议 尤雨溪回复
近日,Vue 发明人尤雨溪在 Vue RFCs 下提交了一份新的 Ref 语法糖提案,该提案一经发布便引来了不少争议. 提案内容 这份提案就是在单文件组织(SFC)中引入一个新的script 标签写法 ...
- Vue.js----入门 (3)----v-bind、v-on、v-model等指令以及其语法糖的用法
文章目录 一.指令 1.v-bind指令 2.v-on指令 3.v-model指令 一.指令 1.v-bind指令 v-bind指令是用来更新HTML元素的属性,其语法糖写法为用 : ...
- vue父子组件传值,sync语法糖
父子传值props 父组件传递 <test :content="title"></test> data() {return {title: 'Hello'} ...
- Vue学习日志之语法糖
语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有 ...
- 阿里云面试:什么是语法糖?Java中有哪些语法糖?
点击上方"芋道源码",选择"设为星标" 管她前浪,还是后浪? 能浪的浪,才是好浪! 每天 10:33 更新文章,每天掉亿点点头发... 源码精品专栏 原创 | ...
- 知道尤雨溪为什么要放弃 $ 语法糖提案么?
前言 最近看到一篇文章: <最新,Vue 中的响应性语法糖已废弃> 本文标题中的 $ 语法糖指的就是上文中的响应式语法糖 (Reactivity Transform),那为什么不写 Rea ...
- 第二天:Vue基础语法
1.计算属性的setter和getter 每个计算属性都有setter和getter 一般来说用到setter较少,都不希望数据被改动,所以只用getter时也有缩写 <!DOCTYPE htm ...
最新文章
- maven项目update报错
- oracle归档模式教程,Oracle从归档模式变成非归档模式详细步骤
- Ansible系列(六):循环和条件判断
- 制作一个表格,显示班级的学生信息。
- PDF页眉页脚怎么设置
- 【动态规划】【图论】[NOIP模拟赛]独立集
- python接口测试-项目实践(二)获取接口响应,取值(re、json)
- 怎么把php网站变灰,CSS效果,让网站全部变成灰色(黑白)
- 召回离线评估指标(二)
- ORACLE索引重建方法与索引的三种状态
- ORA-00091错误的解决方式
- Wordpress卡在 wp-admin/setup-config.php,一片空白
- Django面试题库
- python 直方图均衡化_直方图均衡化-Python实现
- 长连接与短连接的区别
- IIC OLED笔记
- CART分类与回归树的原理与实现
- 冯诺依曼计算机结构的中心,冯·诺依曼计算机是以什么为中心的
- 获取股票实时交易数据的方法
- Spire.XLS for Java 12.11.8 Crack