快捷導(dǎo)航

關(guān)于引入vue.js 文件的知識點(diǎn)總結(jié)

更新時間：2020年01月28日 09:01:56 作者：靈靈7

在本篇文章里小編給大家分享的是關(guān)于引入vue.js 文件的知識點(diǎn)總結(jié)，有需要的朋友們可以參考學(xué)習(xí)下。

一、引入vue.js 文件

1. 用腳本標(biāo)簽<script> 引入外部vue.js 文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 下面在一個新的 <script><script>標(biāo)簽里寫vue 的代碼

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部文件-->
 
<script> //vue js 代碼寫在這里
 
var app=new Vue({
el:"#app",         //綁定的元素
data:{
   message:'Hello Vue' //元素內(nèi)數(shù)據(jù)代碼 message
}
});
 
//響應(yīng)式?？尚薷臄?shù)據(jù)
app.message="我改變了原來的代碼"
 
</script>

二、格式：

1. 通過用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實(shí)例

<script> 部分
 
var app=new Vue({
el:"#app",                            //綁定 id 為app 的元素
data:{
      message:'Hello Vue'   //元素內(nèi)數(shù)據(jù)代號  message
}
});
</script>

雙重大括號 {{ }} 內(nèi)放置數(shù)據(jù)代號 message

<html>部分
 
<div v-once id="app">  
{{ message  }}                    // 雙重大括號{{ }} 內(nèi)放置數(shù)據(jù)代號message
</div>
 
</html>

網(wǎng)頁效果：

Hello Vue

2. 響應(yīng)式修改數(shù)據(jù)

可通過改變代號屬性值，修改之前的數(shù)據(jù)

 
var app=new Vue({
el:"#app",         //綁定的元素
data:{
   message:'Hello Vue' //元素內(nèi)數(shù)據(jù)代碼 message
}
});
 
//響應(yīng)式?？尚薷臄?shù)據(jù)
app.message="我改變了原來的代碼"

pp.message="我改變了原來的代碼"

網(wǎng)頁效果：

我改變了原來的代碼

以上就是本次給大家分享的全部知識點(diǎn)內(nèi)容，感謝大家的學(xué)習(xí)和對腳本之家的支持。

您可能感興趣的文章:

vue.js引入外部CSS樣式和外部JS文件的方法

相關(guān)文章

Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用
這篇文章主要介紹了Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
Vue項(xiàng)目WebPack打包刪除注釋和console
這篇文章主要介紹了Vue項(xiàng)目WebPack打包刪除注釋和console，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue $attrs的使用全面解析
這篇文章主要介紹了vue $attrs的使用全面解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue使用vue-cli快速創(chuàng)建工程
這篇文章主要介紹了vue使用vue-cli快速創(chuàng)建工程,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue3中簡單實(shí)現(xiàn)動態(tài)添加路由
本文主要介紹了Vue3中簡單實(shí)現(xiàn)動態(tài)添加路由，，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
使用Vue簡單實(shí)現(xiàn)一個上拉加載更多分頁組件
上拉加載更多的分頁功能大家應(yīng)該都見過或者使用過了吧,那么有多少同學(xué)自己實(shí)現(xiàn)過嗎,本文我們來簡單實(shí)現(xiàn)一個上拉加載更多分頁組件吧
2024-11-11
Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
WangEditor是一個開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁和移動應(yīng)用中的內(nèi)容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下
2024-08-08
vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
Vite開發(fā)環(huán)境搭建詳解
Vite是一款非常輕量級的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。
2023-02-02
Vue實(shí)現(xiàn)輪播圖組件的封裝
Vue輪播圖組件的封裝可通過封裝組件、使用插件、配置化等方式實(shí)現(xiàn)，主要包括圖片預(yù)加載、定時輪播、無限滾動、手勢滑動、響應(yīng)式布局等功能，實(shí)現(xiàn)方式可使用Vue的生命周期函數(shù)、自定義事件、計(jì)算屬性等技術(shù)
2023-04-04