html 引用vue Vue初體驗

2021-10-13 17:07:40 字數 1285 閱讀 7444

引入格式如下所示,其中path是檔案所在路徑:

使用前(在執行時)要確保 vue 檔案已經載入完成再然後進行其他操作(**載入的順序是很重要的)。

每個 vue 應用都需要通過例項化 vue 來實現,例項化 vue 的語法格式如下:

var vm = new vue()

這是乙個最基本的 html 檔案,我們可以直接在瀏覽器中開啟這個 html 檔案,可以看到頁面顯示為 「建立第乙個vue應用」 。

注意看我們引入檔案的位置喲,是在標籤之前,因為我們 html 頁面載入的順序是自上而下的,所以說我們得讓這個檔案在使用 vue 之前就載入好。

然後我們繼續在 vue 中新增乙個data函式,在裡面return我們要用的變數,然後在 html 中使用模板語法}來渲染:

data() }})

在瀏覽器開啟這個html頁面,就可以看到成功渲染啦。

這裡再多提一下,如果你看過官網的示例,你就會發現上述寫法和官網上有些不同,官網寫法如下所示:

data:

});

那麼我們為什麼要將data變成函式並return屬性呢,因為在實際的專案中,元件是乙個可復用的例項,當你引用乙個元件的時候,如果元件裡的data是乙個純粹的物件,則所有用到這個元件的都將引用同乙個data,就會造成資料汙染。將data封裝成函式後,每次建立乙個新例項後,我們只是呼叫了data函式生成的資料副本,避免了資料汙染。

不使用return包裹的資料會在專案的全域性可見,會造成變數汙染。使用return包裹後資料中變數只在當前元件中生效,不會影響其他元件。

html 表單初體驗

windows phone 7手機開發 net培訓 期待與您交流!表單在網頁中主要負責資料採集功能。乙個表單有三個基本組成部分 表單標籤 這裡面包含了處理表單資料所用cgi程式的url以及資料提交到伺服器的方法。表單域 包含了文字框 密碼框 隱藏域 多行文字框 核取方塊 單選框 下拉選擇框和檔案上傳...

HTML與CSS初體驗

html 超級文字標記語言 hypertext makeup language 作用 告知瀏覽器網頁的結構。元素 開始標記 內容 結束標記 例如 這就是乙個元素 css級聯樣式表 cascading style sheets 作用 告知瀏覽器網頁中的元素應該如何表現 屬性 用來指定元素的附加資訊。t...

谷歌初體驗

一直用拼音加加的我,終於在某人的 下,試用了一下谷歌輸入法,結果拼音加加徹底的從我的機器上消失了,我終於也成為了乙個喜新厭舊的人啦.先說一下谷歌比拼音加加強的地方吧.1.最吸引人的地方就是可以自動同步使用者詞庫,這樣只要是能上網的地方,我就可以更新到符合我習慣的詞庫了,打的越多就越熟練,哈哈.2.句...