?$有粉絲在私信中聯系博主，希望博主能夠系統的出一篇關于vue的基礎篇$

? 今天他來了，vue基礎系列分為三篇

?$本篇是第一篇：vue基礎（上篇）$

?$本篇文章涵蓋對Vue的介紹、指令、修飾符$

vue.js介紹

當然這些對vue的介紹在晚上很多，大家很容易找到，所以在這里小編就不為大家一一列舉了，不過你要知道的就是下面兩點：
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架
Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合

指令

本質就是自定義屬性，Vue中指令都是以 v- 開頭

內置指令

v-cloak

防止頁面加載時出現閃爍問題

v-text

v-text指令用于將數據填充到標簽中，作用于插值表達式類似，但是沒有閃動問題
如果數據中有HTML標簽會將html標簽一并輸出
注意：此處為單向綁定，數據對象上的值改變，插值會發生變化；但是當插值發生變化并不會影響數據對象的值

v-html

用法和v-text 相似 但是他可以將HTML片段填充到標簽中
可能有安全問題, 一般只在可信任內容上使用 v-html，永不用在用戶提交的內容上
它與v-text區別在于v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標簽解析后輸出。

v-pre

顯示原始信息跳過編譯過程
跳過這個元素和它的子元素的編譯過程。
一些靜態的內容不需要編譯加這個指令可以加快渲染

v-once

執行一次性的插值【當數據改變時，插值處的內容不會繼續更新】

v-model

v-model是一個指令，限制在 <input>、<select>、<textarea>、components中使用

雙向數據綁定
當數據發生變化的時候，視圖也就發生變化
當視圖發生變化的時候，數據也會跟著同步變化

v-on

用來綁定事件的
形式如：v-on:click 縮寫為 @click;

v-bind

v-bind 指令被用來響應地更新 HTML 屬性
v-bind:href 可以縮寫為 :href;

<img v-bind:src="imageSrc"> 可以縮寫為下面 <img :src="imageSrc">

v-if

條件判斷
使用場景：多個元素 通過條件判斷展示或者隱藏某個元素。或者多個元素，進行兩個視圖之間的切換

v-show 和 v-if的區別：v-show本質就是標簽display設置為none，控制隱藏， v-show只編譯一次，后面其實就是控制css，而v-if不停的銷毀和創建，故v-show性能更好一點。v-if是動態的向DOM樹內添加或者刪除DOM元素， v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件

v-for

循環結構
用于循環的數組里面的值可以是對象，也可以是普通元素

key 的作用
key來給每個節點做一個唯一標識，key的作用主要是為了高效的更新虛擬DOM

自定義指令

介紹

內置指令不能滿足我們特殊的需求，Vue允許我們自定義指令

Vue.directive 注冊全局指令

Vue.directive 注冊全局指令 帶參數

自定義指令局部指令

局部指令，需要定義在 directives 的選項 用法和全局用法一樣
局部指令只能在當前組件里面使用
當全局指令和局部指令同名時以局部指令為準

修飾符

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。Vue 不推薦我們操作DOM 為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符-修飾符是由點開頭的指令后綴來表示的

按鍵修飾符

在做項目中有時會用到鍵盤事件，在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符

自定義按鍵修飾符別名

在Vue中可以通過config.keyCodes自定義按鍵修飾符別名

表單修飾符

• .number 轉換為數值
  注意點: - 當開始輸入非數字的字符串時，因為Vue無法將字符串轉換成數值 - 所以屬性值將實時更新成相同的字符串。即使后面輸入數字，也將被視作字符串。
• .trim
  自動過濾用戶輸入的首尾空白字符, 只能去掉首尾的 不能去除中間的空格
• .lazy
  將input事件切換成change事件, .lazy 修飾符延遲了同步更新屬性值的時機。即將原本綁定在 input 事件的同步邏輯轉變為綁定在 change 事件上
  
  在失去焦點 或者 按下回車鍵時才更新

寫在最后

?$原創不易，還希望各位大佬支持一下$

👍 $點贊，你的認可是我創作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$

總結

以上是生活随笔為你收集整理的vue基础（上篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。