新的屬性
今天先介紹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...