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

目录
  • 一、什么是语法糖？
  • 二、VUE中语法糖有哪些？
    • 1、最常见的语法糖 v-model
    • 2、v-bind 的语法糖
    • 3、v-on 的语法糖
    • 4、修饰符
    • 5、动态css
    • 6、注册组件语法糖

一、什么是语法糖？

语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(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" rel="external nofollow"  rel="external nofollow" >没有语法糖</a>
</div>

// 没有语法糖
<div v-bind:title="title">
 <img v-bind:src="url" alt="">
 <a v-bind:href="link" rel="external nofollow"  rel="external nofollow" >没有语法糖</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" rel="external nofollow"  rel="external nofollow"  @click.prevent="go">百度</a>

//普通写法
<a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  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语法糖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明

    如下所示: .lazy 并不是实时改变,而是在失去焦点或者按回车时才会更新 .number 将输入转换成Number类型 .trim 可以自动过滤输入首尾的空格 补充知识:vue通过v-model,@input, @v-model.lazy几种输入框数据更新方式的区别 在使用v-model时,如果用中文输入法输入中文,一般在没有选定词组前,也就在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发更新.如果希望总是实时更新,可以用@input来代替v-model. <div id="ap

  • vue中v-model对select的绑定操作

    1.单选时 <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }

  • Vue循环中多个input绑定指定v-model实例

    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在element-table中生成的输入框 在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2.. 类似这样的,这样就可以通过绑定的值取到对应输入框

  • vue v-model的用法解析

    v-model的基本用法 一.本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 三.

  • 傻瓜式vuex语法糖kiss-vuex整理

    前言 vuex 作为 vue 框架状态数据管理模块,诞生已有些许年头,它的出现很好地解决了兄弟组件响应式状态数据通信的问题.但是,vuex 的学习是一定门槛的,同时其声明和使用方式有一些不够简洁.一般情况下,我们会使用 new Vue({store})这种方式注入 Store,在组件中使用很 mapGetters 或 mapActions 等来引入 getters 和 actions 等,但随着项目状态数据增长,你会发觉越来越难以维护,因为这些数据和方法都太过分散. 看到这里,如果你还是不懂 v

  • 传说中VUE的语法糖到底是做什么的

    目录 一.什么是语法糖? 二.VUE中语法糖有哪些? 1.最常见的语法糖 v-model 2.v-bind 的语法糖 3.v-on 的语法糖 4.修饰符 5.动态css 6.注册组件语法糖 一.什么是语法糖? 语法糖也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语.指的是计算机语言中添加的一种语法,在不影响功能的情况下,添加某种简单的语法也能实现效果,这种语法对计算机没有任何影响,但是对于程序员更方便,通常增加的语法糖能够增加程序员的可读性,减

  • vue中setup语法糖写法实例

    目录 变量声明 父传子 子传父 变量声明 变量声明定义的时候,不需要返回可以直接使用即可 没有使用setup语法糖时写法 <script> import {useStore} from 'vuex' export default { setup() { const store=useStore() const plus=()=>{ store.commit('plus') } return {plus} }, } </script> 使用setup语法糖写法 <scri

  • 一文搞懂Vue3.2中setup语法糖使用

    目录 前言 一.如何使用setup语法糖 二.data数据的使用 三.method方法的使用 四.watchEffect的使用 五.watch的使用 六.computed计算属性的使用 七.props父子传值的使用 八.emit子父传值的使用 九.获取子组件ref变量和defineExpose暴露 十.路由useRoute和useRouter的使用 十一.store仓库的使用 十二.await 的支持 十三.provide 和 inject 祖孙传值 前言 提示:Vue3.2 版本开始才能使用语

  • vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解

    vue3官方文档 defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏.他们不需要导入,且会随着 <script setup> 的处理过程一同被编译掉. defineProps 接收与 props 选项相同的值,defineEmits 接收与 emits 选项相同的值. 父传子  - defineProps 父组件 <template> <div class="Father"> &

  • vue利用sync语法糖实现modal弹框的项目实践

    vue利用sync语法糖实现modal弹框的项目实践

    用过vue的开发者都知道vue是组件化开发的一个框架,基于组件化的原则,很多时候我们开发的时候都会把像modal.drawer这种弹框,抽屉类的组件作为一个单独的组件分出去,然后在在用到的页面引入进来这个时候就涉及到了visible 属性的父子组件的通信,我们常规的做法可以通过props,$emit的方式进行通信,但vue其实提供了一种更为优雅的实现方式,可以通过sync的语法糖来实现. 具体代码如下 父组件代码 <div class="flex"> <a-butto

  • C#语法糖（Csharp Syntactic sugar）大汇总

    1． 经过简化的Property 早些时候我们这样声明Property 复制代码 代码如下: private string _myName; public string MyName { get { return _myName; } set { _myName = value; } } 千篇一律的这样声明,没有多大意义,于是C#的设计人员将这个千篇一律的工作交给了编译器帮我们做了,我们现在可以这样声明 复制代码 代码如下: public string MyName { get; set; }

  • 不了解这12个语法糖，别说你会Java

    本文从 Java 编译原理角度,深入字节码及 class 文件,抽丝剥茧,了解 Java 中的语法糖原理及用法,帮助大家在学会如何使用 Java 语法糖的同时,了解这些语法糖背后的原理. 语法糖 语法糖(Syntactic Sugar),也称糖衣语法,是由英国计算机学家 Peter.J.Landin 发明的一个术语,指在计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用.简而言之,语法糖让程序更加简洁,有更高的可读性. 有意思的是,在编程领域,除了语法糖,还有语法盐

  • 详解c# 切片语法糖

    一:背景 1. 讲故事 昨天在 github 上准备找找 C# 9 又有哪些新语法糖可以试用,不觉在一个文档上看到一个很奇怪的写法: foreach (var item in myArray[0..5]) 哈哈,熟悉又陌生,玩过python的朋友对这个 [0..5] 太熟悉不过了,居然在 C# 中也遇到了,开心哈,看了下是 C# 8 的新语法,讽刺讽刺,8 都没玩熟就搞 9 了,我的探索欲比较强,总想看看这玩意底层是由什么支撑的. 二:.. 语法糖的用法 从前面介绍的 myArray[0..5]

  • 详解Objective-C中的语法糖@{}究竟是什么

    最近在技术群里有一个群友提出了一个问题,就是为什么下面代码打印的结果不一样? NSMutableDictionary *mDic1 = [NSMutableDictionary dictionaryWithDictionary:@{@"a":@1, @"a":@2}]; //'a': 1 NSMutableDictionary *mDic2 = [NSMutableDictionary dictionary]; [mDic2 setObject:@(1) forKe

随机推荐