Vue（1）Vue安裝與使用

前言

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

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

 

基本使用

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