本章根據前面的講解對有關的語法做進一步的講解和擴充,夯實基礎
所謂掛載點,就是前面例子中vue例項所管理的元素,這類似於css和jq的選擇器。
data:
})1)vue例項管理其他選擇器對應的元素
類選擇器:
data:
})
元素選擇器:
}
el: 'div',
data:
})
這裡呢,我僅僅列舉出兩個,其他的請大家自主的去試驗即可!
2)vue例項的作用範圍
我們看到,vue例項通過管理指定的元素,使得}內部的元素值等同於data屬性中對應的值,那麼它對應的作用範圍是哪些呢?
我相信很多人都已經大致的猜到了,但是還差了一些。
執行以下例項:
} }
data:
})
觀察執行效果:
由此可見,在vue例項管理的元素外部是無法進行渲染的,而在管理元素內部及其子孫元素內部,是可以進行渲染的!
3)特殊元素能否使用vue例項進行管理
我們知道,乙個html檔案不只是只有div、span,還包括html和body這樣的元素,那麼它們可以使用vue例項來進行管理嗎?讓我們通過乙個例項進行演示:
} }
el: 'body',
data:
})
執行結果如下:
通過觀察瀏覽器所報的錯誤,我們可以發現如下的資訊:
很明顯,我們不能使用vue例項來管理html和body這樣的元素!!
前面說明了有關el屬性掛載點的問題,接下來我們聊一下資料是如何渲染上去的。
很明顯,通過雙大括號的形式顯示了data中物件屬性的值,如message。那麼上面的示例中展示的是普通的字串,要知道在js的世界中還有很多複雜的資料型別,如物件、陣列等
請看下面的例子:
data: }})
執行結果如下:
相信有基礎的同學能夠明白其中的含義!
Vue入門基礎
vue中文文件寫得很好,介面清爽,內容翔實。但文件畢竟不是教程,文件一上來出現了大量的新概念,對於新手而言,並不友好。個人還是比較喜歡類似於 js高階程式設計 的風格,從淺入深,娓娓道來 於是,還是按照自己的思路,對vue的知識體系從淺入深的開始學習,並把學習記錄總結成部落格,也是希望能夠幫助到同樣...
vue入門基礎
前端mvc最從是由後端mvc演變過來的 為什麼前端要引入mvc?mvcmvpmvp 這裡p是中間人,是鏈結m 和 v 的橋梁,但是p在兩者之間的關係是公平的 mvvmmv vm這裡vm是檢視模型,這裡vm也是溝通m 和 v的橋梁,但是vm和v的關係更加的親近 vue如何使用?html css 可以進...
Vue 入門基礎
通過 vue 建構函式建立 vue 例項,並啟動 vue 應用入口 el 用於指定頁面中已經存在的dom元素來掛載 vue 例項,可以是標籤也可以是 css 語法 data 宣告應用中需要雙向繫結的資料,建議需要用到的所有資料都預先在 data 中宣告,不至於將資料散落到業務邏輯中難以維護,也可以指...