快捷導(dǎo)航

傳說中VUE的語法糖到底是做什么的

更新時(shí)間：2021年09月24日 15:26:57 作者：前端人

從接觸Vue我們就知道 v-model是實(shí)現(xiàn)數(shù)據(jù)雙向綁定的那他能實(shí)現(xiàn)綁定的原理到底是啥？最常見的語法糖 v-model，今天通過案例給大家詳細(xì)介紹下，需要的朋友參考下吧

一、什么是語法糖？

語法糖也譯為糖衣語法，是由英國計(jì)算機(jī)科學(xué)家彼得·約翰·蘭達(dá)(Peter J. Landin)發(fā)明的一個(gè)術(shù)語。指的是計(jì)算機(jī)語言中添加的一種語法，在不影響功能的情況下，添加某種簡單的語法也能實(shí)現(xiàn)效果，這種語法對(duì)計(jì)算機(jī)沒有任何影響，但是對(duì)于程序員更方便，通常增加的語法糖能夠增加程序員的可讀性，減少出錯(cuò)的機(jī)會(huì)。

使用語法糖可以簡化代碼，更便于程序員開發(fā)。

二、VUE中語法糖有哪些？

1、最常見的語法糖 v-model

使用 v-model 可以實(shí)現(xiàn)數(shù)據(jù)雙向綁定，但是如何實(shí)現(xiàn)的呢？

v-model 綁定數(shù)據(jù)之后，既綁定了數(shù)據(jù)，又添加了事件監(jiān)聽，這個(gè)事件就是 input 事件。

使用案例：

//語法糖寫法
<input type="text" v-model="name" >
  
  //還原為以下實(shí)例
<input type="text" 
 v-bind:value="name" 
 v-on:input="name=$event.target.value">

輸入的時(shí)候會(huì)觸發(fā) input 事件，input 事件會(huì)把當(dāng)前值賦值給 value ，這就是 v-model 為什么可以實(shí)現(xiàn)雙向綁定的原因。

2、v-bind 的語法糖

v-bind 用來添加動(dòng)態(tài)屬性的，常見的 src、href、class、style、title 等屬性都可以通過 v-bind 添加動(dòng)態(tài)屬性值。

v-bind 的語法糖就是去掉 v-bind 替換成冒號(hào) (:)

// 語法糖寫法
<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 綁定事件監(jiān)聽器的，v-on 的語法糖，就是簡寫成@ 。

情況1：如果方法不傳參時(shí)，可以不加小括號(hào)。

<button @click="btn">語法糖</button>

<button v-on:click="btn">無語法糖</button>

//需要注意的是，如果方法本身有一個(gè)參數(shù)，會(huì)默認(rèn)將原生的事件event參數(shù)傳遞進(jìn)來
methods:{
 btn( event ){
  console.log( 'event' , event )
 }
}

情況2：如果需要傳遞參數(shù)時(shí)，又同時(shí)需要 event 參數(shù)。

<button @click="btn( '點(diǎn)擊事件' , $event )">語法糖</button>

//需要注意的是，$event 事件拿到瀏覽器事件對(duì)象
methods:{
 btn( type, event ){
  console.log( 'type' , type ) //點(diǎn)擊事件
  console.log( 'event' , event )
 }
}

4、修飾符

修飾符是以半角句號(hào) . 指明的特殊后綴。v-on 后面的修飾符，也是語法糖。

示例：鏈接添加點(diǎn)擊事件，點(diǎn)擊之后不希望跳轉(zhuǎn)。

//語法糖
<a  rel="external nofollow"  rel="external nofollow"  @click.prevent="go">百度</a>

//普通寫法
<a  rel="external nofollow"  rel="external nofollow"  v-on:click="go">百度</a>
methods:{
 go(e){
  e.preventDefault();
  console.log('阻止鏈接跳轉(zhuǎn)')
 }
}

prevent 修飾符是阻止默認(rèn)事件。還有 submit 同樣也適用。

<form @submit.prevent="onSubmit"></form>

下列是常見的修飾符，與上邊 .prevent 使用相同。

.stop 用來阻止事件冒泡。
.once 事件只觸發(fā)一次。
.self 事件只在自身觸發(fā)，不能從內(nèi)部觸發(fā)。
.enter | .tab | .delete | .esc ..... 鍵盤修飾符

.ctr | .alt | .shift | .meta 系統(tǒng)修飾符

5、動(dòng)態(tài)css

使用 v-bind 可以通過 style 或 class，可以添加動(dòng)態(tài)樣式。

//點(diǎn)擊 你好，實(shí)現(xiàn)文字紅黑之間切換
<h1 @click=" changeColor = !changeColor " :style="{color:changeColor?'red':'black'}">
 你好
</h1>

data:{
  changeColor:false
}

6、注冊(cè)組件語法糖

所謂的注冊(cè)組件語法糖是指省去組件構(gòu)造器的定義，直接將組件構(gòu)造器對(duì)象傳入注冊(cè)組件函數(shù)里，這樣會(huì)減少 CPU 的調(diào)度以及內(nèi)存的分配。

全局組件使用：

//全局組件語法糖寫法
Vue.component(
  'my-component' , 
  template:`
  	<div>組件內(nèi)容</div>
  `)

/* 全局組件注冊(cè) */
//組件使用
<my-component></my-component>
//注冊(cè)組件
const myComponent = Vue.extend({
 template:`
  <div>
   <h2>VUkeh</h2>    
  </div>
  `
})
Vue.component('myComponent', myComponent)

局部組件使用：

//全局組件語法糖寫法
components:{
  'my-component':{
  	template:`<div>組件內(nèi)容</div>`
  }
}

/* 局部組件注冊(cè) */
//注冊(cè)組件
const myComponent = Vue.extend({
 template:`
  <div>
   <h2>VUkeh</h2>    
  </div>
  `,
  components:{
  	child:{
     template:`<div>子組件內(nèi)容</div>`
    }
  }
})
Vue.component('myComponent', myComponent)

到此這篇關(guān)于傳說中 VUE 的“語法糖”到底是啥的文章就介紹到這了,更多相關(guān)vue語法糖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: