Vue安裝與使用的方法教程

這篇文章主要介紹“Vue安裝與使用的方法教程”，在日常操作中，相信很多人在Vue安裝與使用的方法教程問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue安裝與使用的方法教程”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

目錄

• 1、Vue安裝

• 方式1：CDN引入

• 方式2：直接下載引入
  

• 方式3：npm安裝

• 2、基本使用

前言：

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)建大型應用時推薦使用 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>

到此，關(guān)于“Vue安裝與使用的方法教程”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>