Vue的基本語法

2021-10-20 18:22:11 字數 2750 閱讀 9018

el : " " 指定vue所操作的dom範圍,屬性值是你獲取的節點

data 就是vue的model,是存放資料的,屬性值是乙個物件或者是乙個函式,在元件中的data是乙個函式

methods 是vue中的事件方法

指令式渲染:

(1) v-html, v-text 採用}語法 ==>插值運算

(2) v-html:它可以加標籤,它會解析成html

(3) v-text:不能加標籤,如果加了,它會當作字串展示出來

(1)}

(1)預設v-text沒有閃爍的問題,而插值表示式有閃爍問題

(2)v-text 會覆蓋元素中原本的內容,但是插值表示式只會替換自己的這個佔位符,不會把整個元素的內容清空

(1)v-html會解析html格式

(2)v-text與插值表示式會把內容當作文本來解析

(3)v-html和v-text 都會覆蓋元素中原有的內容

(1)v-cloak 能夠解決插值表示式閃爍的問題

} 

並在css中設定

[v-cloak]

讓所有設定v-cloak 的元素隱藏,當載入完畢之後,元素身上的v-cloak 就會小時

v-if=" a "

後面的值如果是true節點就顯示,false 就隱藏

改變css中的display

後面的值如果是true 節點就顯示,false 就隱藏

v-if是對節點的刪除和新增,v-show是對display屬性值none 和block的切換

共同點:都是動態顯示dom元素

不同點:

v-if:

v-if是動態的向dom樹內新增或刪除dom元素

v-if 切換乙個區域性編譯/解除安裝的過程,切換時會合適銷毀和重建內部事件監聽和子元件

v-if 是懶惰性的,初始條件=false 什麼也不做 只有在條件第一次=true 時,才開始區域性編譯

v-show 勢在任何體哦阿健下(首次條件是否為真) 都會被編譯,然後快取,而且dom元素保留。

v-if有更高的切換消耗

使用場景:

v-if 適合運營條件不大可能改變

v-show:

v-show 有更高的初始化渲染小號

v-show 只是簡單的基於css切換

v-show 是通過設定dom元素的display實現控制顯隱的

使用場景:

v-show 適合頻繁勤換

迴圈指令: v-for=""

值是乙個陣列 } in 陣列名

值是乙個物件 } in 物件名 value 是屬性值 key是屬性

在v-for中key 的使用注意事項

v-for 迴圈的時候,key 屬性只能使用number 或string 且是唯一的

key在使用的時候,必需使用v-bind 屬性繫結的形式,指定key的值

動態屬性: v-bind:class="a"

v-on:click=「事件名」

縮寫@click=「事件名」

v-model 資料繫結

可以在表單中使用v-model 實現資料雙向繫結

text型別中文字都是字串,v-model中的值相同

核取方塊v-model 中的值是boolean

單選框 v-model 中值是value

v-model 實現的原理

angular是mvc模式,ng-model 是靠髒值檢測

vue靠的是資料劫持和發布者訂閱者模式

資料劫持

object.definepropery() 這個方法

生成物件的方法 字面量 var obj={}/new object()

object.definepropery() 給乙個物件定義新屬性或修改乙個物件的屬性

object.getownpropertydescriptor() 返回關於乙個物件某個屬性的描述符,

第乙個引數是目標物件,第二個引數是 物件的某個屬性

var obj=

console.log(object.getownpropertydescriptor(obj,『age』))

返回屬性的意思:

configurable 配置選項,值為true代表這個屬性可刪除

enumerable 值為true 代表可列舉 可以使用 for in 遍歷

value 這個屬性的值

writeable 代表這個屬性可以更改

如果有了set和get屬性就不能有writeable 和 value屬性

常見的修飾符

azy v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步

Vue的基本語法

每個 vue 應用都需要通過例項化 vue 來實現。語法格式如下 var vm new vue 讓我們通過例項來看下 vue 構造器中需要哪些內容 可以看到在 vue 構造器中有乙個el 引數,它是 dom 元素中的 id。在上面例項中 id 為 vue det,在 div 元素中 這意味著我們接下...

vue 的基本語法

作為國內目前最火的框架,功能強大,語法簡單,基於angular 基礎上,比angular 更輕量,更適配於移動端 先引入vue檔案。和angular 一樣繫結資料到元素 class div 是不是很簡單。new vue 裡面可以隨便寫 array json string 都可以 迴圈遍歷和angul...

Vue的基本語法

首先需要引入vue檔案 插值表示式 表示式為物件的表示式為物件的時候,前後的空格不能省略,兩個花括號為表示式 簡單的數學的運算 插值表示式中需要用到的值必須先在data中存在的,因為vue是資料驅動檢視的 作用域鏈不存在的時候,會error,原型鏈不存在的時候,是undefined 資料發生改變以後...