传说中 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 v-model 语法糖
v-model 语法糖 描述:弹出利用v-model语法糖 父组件 子组件
- vue 常用语法糖
//来自 https://www.cnblogs.com/lhl66/p/8021730.html 侵删 el:element 需要获取的元素,一定是HTML中的根容器元素 data:用于数据的存储 ...
- Vue.js语法糖整理
el:element 需要获取的元素,一定是HTML中的根容器元素 data:用于数据的存储 methods:用于存储各种方法 数据绑定字面量只加载一次{{* msg}} data里面可以进行简单的运 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- [Vue]Vue语法糖v-bind、v-on
语法糖 :是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发,简化代码是书写. Vue.js的v-bind和v-on指令都提供了语法糖,也可以说是缩写. 1.v-bind可以省略, ...
- vue 中的.sync语法糖
提到父子组件相互通信,可能大家的第一反应是$emit,最近在学着封装组件,以前都是用的别人封装好的UI组件,对vue中的.sync这个修饰符有很大的忽略,后来发现这个修饰符很nice,官方对她的描述是 ...
- 关于vue中的语法糖v-model
开发src-在线系统的过程中,封装了很多组件,如Dialog prompt等,在开源项目的组件中这些组件使用v-model来控制显示,我来总结一下关于自己学习到的v-model知识 1. 使用prop ...
- Vue.js---指令与事件、语法糖
指令与事件 指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,指令的职责就是当其表达式的值改变时,相应地将某些行为应用到DOM上. v-if: 显示这段文本 当数据sh ...
- vue组件化之模板优化及注册组件语法糖
vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化 在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js ...
随机推荐
- CleanArchitecture Application代码生成插件-让程序员告别CURD Ctrl+C Ctrl+V
这是一个根据Domain项目中定义的实体对象(Entity)生成符合Clean Architecture原则的Application项目所需要的功能代码,包括常用的Commands,Queries,V ...
- MyBatis的useGeneratedKeys使用
业务需求,用户表为主键自增,添加完用户之后,通过用户ID和角色表进行关联. 问题:由于主键自增,所以在用户添加之前是不知道ID的,当然可以通过查询得到当前的ID,不过需要自己多一步操作. 解决方案:使 ...
- Qt元对象和属性系统详解
Qt 是一个用标准 C++ 编写的跨平台开发类库,它对标准 C++ 进行了扩展,引入了元对象系统.信号与槽.属性等特性,使应用程序的开发变得更高效. 本节将介绍 Qt 的这些核心特点,对于理解和编写高 ...
- C++程序调试方式总结
bug调试要根据应用场景和条件,选择什么样子的调试方式很大程度上不是你想选择什么样的调试方式,而是还剩下什么样子的调试方式可用.下面就根据不同的场景和条件来总结一下. 目录: 1.gdb调试或者IDE ...
- WPF---数据绑定之ValidationRule数据校验综合Demo(七)
一.概述 我们利用ValidationRule以及ErrorTemplate来制作一个简单的表单验证. 二.Demo 核心思想:我们在ValidationRule中的Validate函数中进行验证, ...
- Linux中Java开发常用的软件总结:
开发工具下载: Tomcat下载:wget http://learning.happymmall.com/tomcat/apache-tomcat-7.0.73.tar.gzJDK下载: wget h ...
- 不用调整Nginx,SpringBoot也能解决前端访问的跨域问题
1.什么情况下会出现跨域问题 通常,在前端工程师的开发过程中,往往在本地机器启动前端服务, 而调用的后端接口服务是在另外一台机器运行,这时就会出现跨域问题,让接口无法调通. 而到了测试环境和生产环境, ...
- rabbitMq镜像集群
rabbitMq延迟投递的方案 1 把消息记录到数据路,通过定时器进行刷新 2 TTL 加上死信队列 :通过路由把过期的消息同步到死信队列,通过死信队列的消费者进行消费 3
- LeetCode入门指南 之 回溯思想
模板 result = {} void backtrack(选择列表, 路径) { if (满足结束条件) { result.add(路径) return } for 选择 in 选择列表 { 做选择 ...
- Python面试题小试牛刀
1.声明变量注意事项有那些? 1.变量名只能用字母.数字或下划线的任意组合 2.变量名不能以数字为第一个字符 3.内置函数名不能用 2.如何查看变量在内存中的地址? id(变量名) 3.写代码 a. ...