關(guān)于引入vue.js 文件的知識(shí)點(diǎn)總結(jié)
更新時(shí)間：2020年01月28日 09:01:56 作者：靈靈7
在本篇文章里小編給大家分享的是關(guān)于引入vue.js 文件的知識(shí)點(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. 下面在一個(gè)新的 <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)建一個(gè)新的 Vue 實(shí)例
<script> 部分
var app=new Vue({
el:"#app", //綁定 id 為app 的元素
data:{
message:'Hello Vue' //元素內(nèi)數(shù)據(jù)代號(hào) message
}
});
</script>
雙重大括號(hào) {{ }} 內(nèi)放置數(shù)據(jù)代號(hào) message
<html>部分
<div v-once id="app">
{{ message }} // 雙重大括號(hào){{ }} 內(nèi)放置數(shù)據(jù)代號(hào)message
</div>
</html>
網(wǎng)頁效果 ：
Hello Vue
2. 響應(yīng)式修改數(shù)據(jù)
可通過改變代號(hào)屬性值，修改之前的數(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)頁效果 ：
我改變了原來的代碼
以上就是本次給大家分享的全部知識(shí)點(diǎn)內(nèi)容，感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題
今天小編就為大家分享一篇解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue實(shí)現(xiàn)網(wǎng)頁轉(zhuǎn)PDF方法流程詳解
在日常的工作中，有時(shí)候會(huì)碰到需要將某個(gè)網(wǎng)址網(wǎng)頁保存成為pdf的情況，這篇文章主要介紹了用Vue實(shí)現(xiàn)網(wǎng)頁轉(zhuǎn)PDF的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue?結(jié)合webpack的初級(jí)使用指南小白學(xué)習(xí)篇
這篇文章主要為大家介紹了vue?結(jié)合webpack的初級(jí)使用指南非常適合入門webpack的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue.2.0.5實(shí)現(xiàn)Class 與 Style 綁定的實(shí)例
本篇文章主要介紹了Vue.2.0.5實(shí)現(xiàn)Class 與 Style 綁定的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
隨著互聯(lián)網(wǎng)的發(fā)展,PDF?文件在信息交流和文檔分享中起著重要的作用,通過在?Vue?組件中實(shí)現(xiàn)?PDF?預(yù)覽功能,我們可以為用戶提供便捷的內(nèi)容閱讀體驗(yàn),下面我們就來看看具體實(shí)現(xiàn)方法吧2023-08-08
vue.js動(dòng)態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js動(dòng)態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vxe-table vue table 表格組件功能，功能非常強(qiáng)大，文中給大家提到了功能點(diǎn),需要的朋友可以參考下2019-05-05
在Vue中,可以使用多種方式來處理cookie和本地存儲(chǔ),不同的方法還有不同的特點(diǎn)和適用場(chǎng)景,本文主要介紹了這些方法的對(duì)比和使用場(chǎng)景,希望對(duì)大家有所幫助2023-08-08
ElementUI嵌套頁面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例
本文主要介紹了ElementUI嵌套頁面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了VUE注冊(cè)全局組件和局部組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10