vue學習筆記初識vue——創建vue示例
阿新 • • 發佈:2018-04-16
實例化 示例 顯式 檢測 隱式 入庫 dom節點 引入 語法 元素之前(並最終刪除這個錨點元素)。
vue是以JavaScript作為應用入口,HTML提供一個渲染錨點,
創建一個vue示例,引入庫文件,創建vue實例,渲染vue實例;
引入vue.js庫 會暴露出一個全局類vue 用全局類vue創建一個vue實例
var vm=new Vue({
template:‘<h1>fffff</h1>’ //配置項template,以類似HTML的語法來編制視圖結構
})
渲染vue實例 采用vue實例的$mount()方法,意味著渲染實例實際上是將vue實例生成的虛擬dom子樹掛接到頁面dom中
$mount()
方法需要指定一個定位用的DOM節點———錨點
Vue.js會將渲染出的DOM子樹,插入錨點
可以使用CSS選擇符
或者指定一個HTMLElement
來聲明錨點
Vue實例的$mount()
方法是顯式地啟動Vue實例 的渲染。
實際上,Vue.js也提供了一個實例化時的配置項el
,來允許我們隱式地啟動 Vue實例的渲染。el
用來聲明目標渲染錨點,例如:
Vue({
template: ‘<h1>Hello,Vue.js 2!</h1>‘,
el: ‘#app‘
})
如果Vue.js檢測到你指定了el
配置項,將在內部自動地執行渲染 —— 這時你 不再需要額外調用$mount()
方法了:
Vue({
template: ‘<h1>Hello,Vue.js 2!</h1>‘,
el: ‘#app‘
})是隱式渲染 和
Vue({
template: ‘<h1>Hello,Vue.js 2!</h1>‘
}).$mount(‘#app‘) 顯式渲染一樣
vue學習筆記初識vue——創建vue示例