Vue 基礎指令

2021-09-24 14:23:20 字數 675 閱讀 6479

**

指令:是帶有 v- 字首的特殊屬性

(1). v-html : 非轉義輸出: 將xml型別資料解析

防止xss,csrf

(2). v-text 和 } 結果是一樣的,但是} 有個短暫的} 顯示

(3). v-bind 單項資料繫結

作用 : 將乙個資料賦值給已有屬性

(4).v-model 雙向資料繫結

作用範圍 : 表單元素, 因為預設繫結了value

小經驗 : 看到表單元素,直接上v-model

(5).v-if 和 v-show有和區別?

v-if : 控制的元素的存在與否

v-show : 控制的事元素的display: none 屬性

效能的差別:

當初始條件都為false時,v-show的初始渲染開銷較高

當頻繁切換時,v-if的切換開銷較高

在實際專案中,頻繁切換: v-show,切換不頻繁 v-if.

(6).v-on : 繫結事件***,這樣我們就可以做一些互動了

(7).v-for : 來遍歷乙個物件的屬性

縮寫 v-bind:src => :src

v-on:click => @click

(8).v-pre : 跳過這個元素和它的子元素的編譯過程。一些靜態的內容不需要編輯加這個指令可以加快編輯

vue基礎指令

filter 對介面的轉換,比如貨幣 顯示形式 vue基礎指令 v mode 雙向繫結,用於文字框 輸入框 單選 複選 下拉框等等,輸入改變,模型也會改變 反之,模型改變,輸入也會改變。v text 更多的是乙個文字的渲染,與 類似,只是在頁面未載入完vue的時候,會顯示在頁面上,所以一般採用v t...

Vue基礎指令

msg span 和下面的一樣 span 相當於 innerhtml 可以識別元素。有點元件的感覺 message h2 div vue.js script newvue script 根據表示式,例如index 0,即當index!0時顯示,根據真假值,切換元素的 display css 屬性。條...

Vue基礎指令

優勢 當資料發生變化時,頁面也會自動重新渲染 雙向資料繫結 用表單元素時,檢視變化影響資料,資料變化影響檢視 指令概念 是vue為開發這提供的模板語法,用於輔助開發者渲染頁面的基本結構 v text 把值渲染到標籤內部 插值表示式 內容佔位符,不會覆蓋標籤內部內容 只能用在元素的內容節點中,不能用在...