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

阿新 • • 發佈：2021-09-26

一、什麼是語法糖？

語法糖也譯為糖衣語法，是由英國電腦科學家彼得約翰蘭達(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="傳說中VUE的語法糖到底是做什麼的">
 <a :href="link" rel="external nofollow"  rel="external http://www.cppcns.comnofollow" >沒有語法糖</a>
</divhttp://www.cppcns.com 
>

// 沒有語法糖
<div v-bind:title="title">
 <img v-bind:src="url" alt="傳說中VUE的語法糖到底是做什麼的">
 <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 用來阻止事件冒www.cppcns.com泡。
.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&gRqyjmt;`
    }
  }
})
Vue.component('myComponent',myComponent)

到此這篇關於傳說中 VUE 的“語法糖”到底是啥的文章就介紹到這了,更多相關vue語法糖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！