vue.js如何引入到HTML中

發(fā)布時(shí)間：2020-12-19 14:03:46 來源：億速云閱讀：498 作者：小新欄目：編程語言

這篇文章將為大家詳細(xì)講解有關(guān)vue.js如何引入到HTML中，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

vue.js引入到HTML中的方法：首先下載vue.js；然后在HTML中加入vue.js包，其語法如“<script src="${path}/web/constant/vue.js"></script>”。

vue.js引入到HTML中

對于沒有接觸過es6和webpack的童鞋來說，不建議直接用官方的腳手架vue-cli構(gòu)件項(xiàng)目。

先按文檔順序最少學(xué)習(xí)完組件那一章。直接在html文件中引入vue.js開始學(xué)習(xí),了解vue的基礎(chǔ)指令，和整個(gè)vue實(shí)例的基礎(chǔ)架構(gòu)。

下載vue.js 地址：https://vuejs.org/v2/guide/installation.html，下載完之后在HTML中加入vue.js包。

<script src="${path}/web/constant/vue.js"></script>

在當(dāng)前html中，寫入js代碼：

<script type="text/javascript">
new Vue({
el:'#app',
data: {
message:'hello vue.js.'
}
});
</script>

html中，加入如下代碼：

<h2>Vue demo</h2>
<div id="app">
<div>{{message}}</div>
<input type="text" v-model="message">
</div>

修改文本框中的內(nèi)容，可以看到文本框上方的內(nèi)容也在相應(yīng)改變；這就是vue的雙向綁定。

關(guān)于vue.js如何引入到HTML中就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

猜你喜歡