1. 程式人生 > >vue學習筆記初識vue——創建vue示例

vue學習筆記初識vue——創建vue示例

實例化 示例 顯式 檢測 隱式 入庫 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示例