前言

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

Vue安裝

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

方式1：CDN引入

<!--開發環境版本，包含了又幫助的警告命令-->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!--生成環境的版本，優化了尺寸和速度-->

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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

基本使用

  要使用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>