Vue入門(二)Vue基礎

2021-10-02 18:01:49 字數 1327 閱讀 7986

本章根據前面的講解對有關的語法做進一步的講解和擴充,夯實基礎

所謂掛載點,就是前面例子中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 中宣告,不至於將資料散落到業務邏輯中難以維護,也可以指...