1.2.第一個VUE程序Hello-VUE · VUE深入淺出系列

## 一、本節說明此節通過最簡單的例子，來講解如何安裝vue和使用vue完成第一個demo程序。 ## 二、怎么做 ### 2.1 安裝vue * 方式一：直接通過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/dist/vue.min.js"></script> ~~~ > 生產環境和開發環境引入的vue文件，最主要的區別在于：生產環境的js文件是在開發環境js文件的基礎上進行了代碼壓縮、去掉空格、變量名簡化等操作。從而減少了js文件的size，有利于提高網絡傳輸速度。 * 方式二：下載到本地目錄，然后使用`<script>`標簽引入開發環境下載地址: https://cn.vuejs.org/js/vue.js 生產環境下載地址: https://cn.vuejs.org/js/vue.min.js * 方式三：NPM安裝后面章節我們結合webpack和VUE-CLI管理前端項目，我們會使用這種方式。這里暫時不做介紹。 ### 2.2 實現第一個vue程序在一個html頁面`<body>`標簽中寫如下代碼 ``` <div id="app"> <h2>你好啊，{{message}}</h2> </div>  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ //初始化一個VUE實例 el: '#app', // 用于頁面渲染VUE實例的元素 data: { // 定義數據 message: 'VUE' } }) </script> ``` + el: - 類型：string | HTMLElement - 作用：決定之后Vue實例會掛載渲染到哪一個DOM節點。 + data: - 類型：Object | Function （在組件當中data必須是一個函數，后續章節介紹） - 作用：Vue實例對應的數據對象，即MVVM中的Model。 ## 三、效果瀏覽器訪問顯示 ![](https://img.kancloud.cn/28/6f/286f88e09d1398e79b5001c7bf7d75b2_301x75.png) 我使用的chrome瀏覽器，按F12，輸入`app.message = 'world'`,頁面顯示隨之發生變化 ![](https://img.kancloud.cn/84/ab/84ab96fe4fafb88bc3bcb2edd0b8bdff_661x226.png) ## 四、深入 * vue實現了數據綁定與響應式編程，在vue編程中非常重要的的一個思想就是，**通過操作數據來改變頁面的顯示內容、顯示效果等，數據的變化影響頁面展現；同時頁面的輸入值改變數據模型**，而不是去操作DOM節點元素，理解了這句話VUE學起來就簡單了。 * 上文代碼中`const app `是ES6的語法，表示定義一個常量，不允許對該常量進行二次賦值。但是常量對象的屬性還是可以改的，如:`app.message = 'world'`