Vue安裝與使用
前言:
Vue
(讀音/vjuː/,類似于view) 是一套用于構(gòu)建前后端分離的框架。剛開始是由國內(nèi)優(yōu)秀選手尤雨溪開發(fā)出來的,目前是全球“最”流行的前端框架。使用vue
開發(fā)網(wǎng)頁很簡單,并且技術(shù)生態(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)建大型應(yīng)用時(shí)推薦使用 NPM
安裝。NPM
能很好地和諸如 webpack
或 Browserify
模塊打包器配合使用。同時(shí) Vue
也提供配套工具來開發(fā)單文件組件。
# 最新穩(wěn)定版 $ npm install vue
2、基本使用
要使用Vue
,首先需要?jiǎng)?chuàng)建一個(gè)Vue
對(duì)象,并且在這個(gè)對(duì)象中傳遞el
參數(shù),el
參數(shù)全稱是element
,用來找到一個(gè)給vue
渲染的根元素。并且我們可以傳遞一個(gè)data
參數(shù),data
中的所有值都可以直接在根元素下使用{{}}
來使用。
示例代碼如下:
<div id="app"> {{message}} </div> </body> <script> const app = new Vue({ el: "#app", data: { message: "初學(xué)vue" } }) </script>
其中data
中的數(shù)據(jù),只能在vue
的根元素下使用,在其他地方是不能被vue
識(shí)別和渲染的。
比如:
<!--這里無法渲染--> <p>{{message}}</p> </body> <script> const app = new Vue({ el: "#app", data: { message: "初學(xué)vue" } }) </script>
另外也可以在vue
對(duì)象中添加methods
,這個(gè)屬性中專門用來存儲(chǔ)自己的函數(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: "初學(xué)vue" }, methods: { greet: function () { return "hello" + this.message } } }) </script>
到此這篇關(guān)于Vue安裝與使用的文章就介紹到這了,更多相關(guān)Vue安裝與使用 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例
今天小編就為大家分享一篇element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue使用stompjs實(shí)現(xiàn)mqtt消息推送通知
這篇文章主要為大家詳細(xì)介紹了vue中使用stompjs實(shí)現(xiàn)mqtt消息推送通知,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06使用vue實(shí)現(xiàn)grid-layout功能實(shí)例代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)grid-layout功能的代碼講解,需要的朋友可以參考下2018-01-01vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài)實(shí)例代碼
要求點(diǎn)擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài)。下面我給大家分享一段實(shí)例代碼基于vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài),需要的的朋友參考下2017-04-04elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題
這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10詳解axios 全攻略之基本介紹與使用(GET 與 POST)
本篇文章主要介紹了axios 全攻略之基本介紹與使用(GET 與 POST),詳細(xì)的介紹了axios的安裝和使用,還有 GET 與 POST方法,有興趣的可以了解一下2017-09-09