Vue系列 三 之基本語法文字插值

2021-10-01 19:36:01 字數 1808 閱讀 4203

新的屬性

今天先介紹vue最簡單最基本的語法,宣告式渲染。

>

messgae:

}<

/div>

<

/div>

var vm =

newvue(}

);<

/script>或者(如果沒有提供el選項,需要手動呼叫mount方法)

var vm =

newvue(}

).$mount()

;

使用 } 實現資料繫結到檢視:

messgae:

}<

/div>

var vm =

newvue(}

).$mount()

;

可以在}使用簡單的js表示式,例如:

}<

/div>

}<

/div>

}<

/div>} 語法會將資料解釋為普通文字,而不是html。有時我們確實需要插入html而非普通文字(雖然這種情況很少見,至少目前我沒有遇到過這樣的需求,所以這裡簡單帶過。真正用到時,可以去官方文件檢視)。

使用v-html指令:

>

message:

}<

/div>

原始html:

}<

/div>

"html"

>原始html:

<

/div>

<

/div>

var vm =

newvue(}

).$mount()

;<

/script>執行效果:

注意:由於vue底層的實現,vue無法監聽新加的屬性變化。

vue只在初始化的時候,遞迴data的屬性轉換為setter/getter方法,使data的屬性可以響應資料變化。所以乙個屬性如果沒有在data中宣告,而是後期加進去的,vue監聽不到該屬性的變化,也就無法做到檢視的同步改變。

解決方案有兩種:

既然無法監聽到新新增的屬性,那在data中宣告所有要用到的屬性,並賦予其預設值就可以了。後期屬性改變的時候,vue就可以監聽到屬性變化,做到檢視同步改變了。

set api

set()方法向響應式物件中新增乙個屬性,並確保這個新屬性同樣是響應式的,且觸發檢視更新。

如下例:info中未宣告weight屬性,在add中直接新增,檢視不會響應改變,使用this.$set()方法可以將新增屬性設定為響應式的。

height:

}<

/div>

weight:

}<

/div>

="add"

>add<

/button>

data:},

methods:

}但是set方法不允許動態新增根級響應式屬性,所以如果是根級屬性(data資料物件中第一層屬性),必須在data中宣告。

如果你使用了未在data中宣告的屬性,vue 將警告你渲染函式正在試圖訪問不存在的屬性。

Vue系列之模板語法(三)

之前的兩篇對vue做了整體和基礎的介紹,今天主要講解一下vue的基礎語法之一 html模板。vue.js 使用了基於 html 的模板語法,允許開發者宣告式地將 dom 繫結至底層 vue 例項的資料,將模板編譯成虛擬 dom 渲染函式。結合響應系統,智慧型地計算出最少需要重新渲染多少元件,並把 d...

MongoDB基本語法之查詢(三)

mongodb中的查詢使用的是find的方法,基本語法為db.connect name.find 以user表為例 db.user find 即可查詢所有user表的資料,注意此方法查詢出來是是陣列的形式展現資料的,所以我們可以通過給出索引查出陣列,例如 db.user find 0 查出的是第一條...

vue之ES6基本語法 上

let與var相同都是宣告變數的,不同之處是let是塊級作用域,var是全域性的 例如var a for var i 0 i 10 i 輸出結果為10 for let i 0 i 10 i a i console.log i 輸出結果為6 var可以直接宣告變數 如果沒有引用這個變數這值為undef...