Vue是一套用于構(gòu)建前后端分離的框架。剛開始是由國內(nèi)優(yōu)秀選手尤雨溪開發(fā)出來的，目前是全球“最”流行的前端框架。使用vue開發(fā)網(wǎng)頁很簡單，并且技術(shù)生態(tài)環(huán)境完善，社區(qū)活躍，是前后端找工作必備技能！下面來看看其得安裝及使用方法吧

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: