Vue安裝與使用
前言:
Vue
(讀音/vjuː/,類似于view) 是一套用于構(gòu)建前后端分離的框架。剛開始是由國內(nèi)優(yōu)秀選手尤雨溪開發(fā)出來的,目前是全球“最”流行的前端框架。使用vue
開發(fā)網(wǎng)頁很簡單,并且技術生態(tài)環(huán)境完善,社區(qū)活躍,是前后端找工作必備技能!
1、Vue安裝
vue的安裝大體上分成三種方式
方式1:CDN引入
<!--開發(fā)環(huán)境版本,包含了又幫助的警告命令--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!--生成環(huán)境的版本,優(yōu)化了尺寸和速度--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
方式2:直接下載引入
開發(fā)環(huán)境:https://vuejs.org/js/vue.js
生產(chǎn)環(huán)境:https://vuejs.org/js/vue.min.js
方式3:npm安裝
在用 Vue
構(gòu)建大型應用時推薦使用 NPM
安裝。NPM
能很好地和諸如 webpack
或 Browserify
模塊打包器配合使用。同時 Vue
也提供配套工具來開發(fā)單文件組件。
# 最新穩(wěn)定版 $ npm install vue
2、基本使用
要使用Vue
,首先需要創(chuàng)建一個Vue
對象,并且在這個對象中傳遞el
參數(shù),el
參數(shù)全稱是element
,用來找到一個給vue
渲染的根元素。并且我們可以傳遞一個data
參數(shù),data
中的所有值都可以直接在根元素下使用{{}}
來使用。
示例代碼如下:
<div id="app"> {{message}} </div> </body> <script> const app = new Vue({ el: "#app", data: { message: "初學vue" } }) </script>
其中data
中的數(shù)據(jù),只能在vue
的根元素下使用,在其他地方是不能被vue
識別和渲染的。
比如:
<!--這里無法渲染--> <p>{{message}}</p> </body> <script> const app = new Vue({ el: "#app", data: { message: "初學vue" } }) </script>
另外也可以在vue
對象中添加methods
,這個屬性中專門用來存儲自己的函數(shù)。methods
中的函數(shù)也可以在模板中使用,并且在methods
中的函數(shù)來訪問data
中的值,只需要通過this.
屬性名就可以訪問到了,不需要額外加this.data.
屬性名來訪問。
示例代碼如下:
<div id="app"> <p>{{greet()}}</p> </div> </body> <script> const app = new Vue({ el: "#app", data: { message: "初學vue" }, methods: { greet: function () { return "hello" + this.message } } }) </script>
到此這篇關于Vue安裝與使用的文章就介紹到這了,更多相關Vue安裝與使用 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue使用stompjs實現(xiàn)mqtt消息推送通知
這篇文章主要為大家詳細介紹了vue中使用stompjs實現(xiàn)mqtt消息推送通知,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06使用vue實現(xiàn)grid-layout功能實例代碼
這篇文章主要介紹了使用vue實現(xiàn)grid-layout功能的代碼講解,需要的朋友可以參考下2018-01-01elementUI動態(tài)表單?+?el-select?按要求禁用問題
這篇文章主要介紹了elementUI動態(tài)表單?+?el-select?按要求禁用問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10詳解axios 全攻略之基本介紹與使用(GET 與 POST)
本篇文章主要介紹了axios 全攻略之基本介紹與使用(GET 與 POST),詳細的介紹了axios的安裝和使用,還有 GET 與 POST方法,有興趣的可以了解一下2017-09-09