在原生HTML中使用VUE的保姆級(jí)教學(xué)
一、如何引用Vue.js到html文件里
1.以cdn的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
將上面代碼添加到html的head里，即可全局使用vue的方法；
2.直接將vue文件保存到本地，再引入
可以采取下面方法：
（1）將CDN的路徑（https://cdn.jsdelivr.net/npm/vue/dist/vue.js）復(fù)制到瀏覽器，并搜索；
（2）將搜索到的內(nèi)容全選復(fù)制項(xiàng)目的vue.js文件里，如圖；
（3）在index.html里面引入；
上面是在原生HTML里面引入vue的方法，其他的同理，如：elementUI、ant Desgin Vue等，都可以用類似的方式引入到原生HTML里。
二、如何在html文件里使用VUE
成功引入vue后，我們就可以在html文件里使用vue，下面是示例；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 創(chuàng)建一個(gè)根元素 -->
<div class="home" id="home"></div>
<script>
// 將vue掛載到id為home的根元素上
var vm = new Vue({
el: "#home",
data() {
return {};
},
methods: {},
mounted() {},
created() {},
});
</script>
</body>
</html>這樣就可以在html里面使用Vue了，下期我將分享在html里面使用Vue組件~
附：在 Vue 中調(diào)用原生 HTML 方法
Vue.js 是通過虛擬 DOM 實(shí)現(xiàn)了 Vue 數(shù)據(jù)的雙向綁定。但有時(shí)我們需要直接在實(shí)際 DOM 里面操作數(shù)據(jù)。這時(shí)候，我們就需要用到 Vue 的生命周期函數(shù)以及鉤子函數(shù)。
調(diào)用方法
在 Vue 生命周期的 mounted 鉤子函數(shù)中，可以獲取到實(shí)際 DOM 。我們可以使用 $el 屬性來訪問它。一旦獲取到實(shí)際 DOM，我們就可以直接通過調(diào)用 HTML 原生 API 或 jQuery API 來實(shí)現(xiàn)一些特殊的功能了。
例如，如果我們想要在 Vue 中調(diào)用 HTML 原生的 alert 方法，我們可以這樣做：
mounted () {
this.$nextTick(function () {
alert('Hello world!');
})
}在這個(gè)例子中，我們使用了 Vue.js 的 $nextTick 方法，以保證 alert() 方法在 DOM 渲染完成后執(zhí)行。
總結(jié)
到此這篇關(guān)于在原生HTML中使用VUE的保姆級(jí)教學(xué)的文章就介紹到這了,更多相關(guān)原生HTML使用VUE內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理簡單示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理,結(jié)合簡單實(shí)例形式分析了Vue中css樣式變換動(dòng)畫效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
Vue3中的setup是一個(gè)新的生命周期函數(shù),它可以用來代替組件中的 data和一些生命周期函數(shù)（如created和beforeMount）,這篇文章主要介紹了vue3如何使用setup代替created的相關(guān)資料,需要的朋友可以參考下2023-09-09
我們的vue2.0項(xiàng)目當(dāng)中,存儲(chǔ)了許多圖片和視頻資源,所以我們需要增加防盜鏈設(shè)置,但是這樣一來,當(dāng)我們將其他網(wǎng)站上的視頻資源,想入到我們的環(huán)境當(dāng)中的時(shí)候,會(huì)報(bào)錯(cuò),所以本文給大家介紹了在vue中使用iframe解決視頻資源的防盜鏈,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了在Vue項(xiàng)目中是否使用store原理深究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章給大家分享Vue3搭建組件庫開發(fā)環(huán)境，給大家講解依次搭建組件庫、example、文檔、cli，本文內(nèi)容是搭建組件庫的開發(fā)環(huán)境的過程，感興趣的朋友跟隨小編一起看看吧2022-11-11
Vuex是Vue.js應(yīng)用的狀態(tài)管理模式,用于集中式管理應(yīng)用狀態(tài),它包括state、getters、mutations、actions和modules等模塊,適用于多組件共享的數(shù)據(jù)管理2025-01-01
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
VUE實(shí)現(xiàn)token登錄驗(yàn)證
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)token登錄驗(yàn)證,詳細(xì)記錄實(shí)現(xiàn)token登錄驗(yàn)證的步驟，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue 請(qǐng)求后臺(tái)數(shù)據(jù)的實(shí)例代碼
本篇文章主要介紹了vue 請(qǐng)求后臺(tái)數(shù)據(jù)的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧、2017-06-06
vue微信分享出來的鏈接點(diǎn)開是首頁問題的解決方法
這篇文章主要為大家詳細(xì)介紹了vue微信分享出來的鏈接點(diǎn)開是首頁問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11