Vue安裝與使用的方法教程

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

目錄

• 1、Vue安裝

• 方式1：CDN引入

• 方式2：直接下載引入
  

• 方式3：npm安裝

• 2、基本使用

前言：

Vue(讀音/vju?/，類似于view) 是一套用于構建前后端分離的框架。剛開始是由國內優秀選手尤雨溪開發出來的，目前是全球“最”流行的前端框架。使用vue開發網頁很簡單，并且技術生態環境完善，社區活躍，是前后端找工作必備技能！

1、Vue安裝

vue的安裝大體上分成三種方式

方式1：CDN引入

<!--開發環境版本，包含了又幫助的警告命令-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<!--生成環境的版本，優化了尺寸和速度-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

方式2：直接下載引入

開發環境：https://vuejs.org/js/vue.js

生產環境：https://vuejs.org/js/vue.min.js 

方式3：npm安裝

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。

# 最新穩定版
$ npm install vue

2、基本使用

要使用Vue，首先需要創建一個Vue對象，并且在這個對象中傳遞el參數，el參數全稱是element，用來找到一個給vue渲染的根元素。并且我們可以傳遞一個data參數，data中的所有值都可以直接在根元素下使用{{}}來使用。

示例代碼如下：

<div id="app">
  {{message}}
</div>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "初學vue"
      }
    })
</script>

其中data中的數據，只能在vue的根元素下使用，在其他地方是不能被vue識別和渲染的。

比如：

<!--這里無法渲染-->
<p>{{message}}</p>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "初學vue"
      }
    })
</script>

另外也可以在vue對象中添加methods，這個屬性中專門用來存儲自己的函數。methods中的函數也可以在模板中使用，并且在methods中的函數來訪問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安裝與使用的方法教程”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！