热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

传说中VUE的语法糖到底是做什么的_vue.js

从接触Vue我们就知道v-model是实现数据双向绑定的那他能实现绑定的原理到底是啥?最常见的语法糖v-model,今天通过案例给大家详细介绍下

一、什么是语法糖?

语法糖也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法,在不影响功能的情况下,添加某种简单的语法也能实现效果,这种语法对计算机没有任何影响,但是对于程序员更方便,通常增加的语法糖能够增加程序员的可读性,减少出错的机会。

使用语法糖可以简化代码,更便于程序员开发。

二、VUE中语法糖有哪些?

1、最常见的语法糖 v-model

使用 v-model 可以实现数据双向绑定,但是如何实现的呢?

v-model 绑定数据之后,既绑定了数据,又添加了事件监听,这个事件就是 input 事件。

使用案例:

//语法糖写法

  
  //还原为以下实例

输入的时候会触发 input 事件,input 事件会把当前值赋值给 value ,这就是 v-model 为什么可以实现双向绑定的原因。

2、v-bind 的语法糖

v-bind 用来添加动态属性的,常见的 src、href、class、style、title 等属性都可以通过 v-bind 添加动态属性值。

v-bind 的语法糖就是去掉 v-bind 替换成冒号 (:)

// 语法糖写法
没有语法糖
// 没有语法糖
没有语法糖

3、v-on 的语法糖

v-on 绑定事件监听器的,v-on 的语法糖,就是简写成@ 。

情况1:如果方法不传参时,可以不加小括号。





//需要注意的是,如果方法本身有一个参数,会默认将原生的事件event参数传递进来
methods:{
 btn( event ){
  console.log( 'event' , event )
 }
}

情况2:如果需要传递参数时,又同时需要 event 参数。



//需要注意的是,$event 事件拿到浏览器事件对象
methods:{
 btn( type, event ){
  console.log( 'type' , type ) //点击事件
  console.log( 'event' , event )
 }
}

4、修饰符

修饰符是以半角句号 . 指明的特殊后缀。v-on 后面的修饰符,也是语法糖。

示例:链接添加点击事件,点击之后不希望跳转。

//语法糖
百度

//普通写法
百度
methods:{
 go(e){
  e.preventDefault();
  console.log('阻止链接跳转')
 }
}

prevent 修饰符是阻止默认事件。还有 submit 同样也适用。


下列是常见的修饰符,与上边 .prevent 使用相同。

  • .stop 用来阻止事件冒泡。
  • .once 事件只触发一次。
  • .self 事件只在自身触发,不能从内部触发。
  • .enter | .tab | .delete | .esc ..... 键盘修饰符
  • .ctr | .alt | .shift | .meta 系统修饰符

    5、动态css

    使用 v-bind 可以通过 style 或 class, 可以添加动态样式。

    //点击 你好,实现文字红黑之间切换
    

    你好 data:{ changeColor:false }

    6、注册组件语法糖

    所谓的注册组件语法糖是指省去组件构造器的定义,直接将组件构造器对象传入注册组件函数里,这样会减少 CPU 的调度以及内存的分配。

    全局组件使用:

    //全局组件语法糖写法
    Vue.component(
      'my-component' , 
      template:`
      	
    组件内容
    `) /* 全局组件注册 */ //组件使用 //注册组件 const myCompOnent= Vue.extend({ template:`

    VUkeh

    ` }) Vue.component('myComponent', myComponent)

    局部组件使用:

//全局组件语法糖写法
components:{
  'my-component':{
  	template:`
组件内容
` } } /* 局部组件注册 */ //注册组件 const myCompOnent= Vue.extend({ template:`

VUkeh

`, components:{ child:{ template:`
子组件内容
` } } }) Vue.component('myComponent', myComponent)

推荐阅读
author-avatar
捡耙活哟752
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有