vscode 运行vue_Vue初体验
Vue的引入
要使用 Vue，我們可以直接在 Vue.js 的官網直接下載 vue.min.js 文件，然后在 HTML 頁面中通過 <script> 標簽來引入這個文件。下載地址為：https://vuejs.org/js/vue.min.js。
引入格式如下所示，其中 path 是文件所在路徑：
<script src="path/vue.min.js"></script>或者也可以不下載 vue.min.js 文件，直接引入 Vue 文件地址，例如：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>使用前（在運行時）要確保 Vue 文件已經加載完成再然后進行其他操作（代碼加載的順序是很重要的）。
Vue的實例語法
每個 Vue 應用都需要通過實例化 Vue 來實現，實例化 Vue 的語法格式如下：
var vm = new Vue({// 選項 })創建第一個 Vue 應用
在開始使用 Vue 之前，肯定是需要做一些準備工作，例如下載安裝好要使用的 IDE，你可以使用 Visual Studio Code（簡稱 VSCode），VSCode下載地址：https://code.visualstudio.com/。
當然也可以選擇其他你覺得好用的 IDE，例如 WebStorm 等，然后自行下載安裝。
下載安裝好 VSCode 后，首先我們可以在 VSCode 中（或者是 WebStorm）創建一個 HTML 文件。例如我創建了一個 test.html，文件中的內容如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue學習</title> </head> <body><h1>創建第一個Vue應用</h1> </body> </html>這是一個最基本的 HTML 文件，我們可以直接在瀏覽器中打開這個 HTML 文件，可以看到頁面顯示為 “創建第一個Vue應用” 。
要使用 Vue，我們要做的第一件事情就是在這個 HTML 中引入 Vue.js，引入的方式我們上面已經講過啦。例如我在項目的根目錄下創建一個 src 文件夾，然后將下載好的 vue.min.js 文件放入文件夾中。
注意看我們引入文件的位置喲，是在 <body> 標簽之前，因為我們 HTML 頁面加載的順序是自上而下的，所以說我們得讓這個文件在使用 Vue 之前就加載好。
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統。創建一個 Vue 實例，將實例通過 #app 掛載到 div#app 這個 DOM 節點上。
HTML中的 app 指定綁定目標，而 Vue 實例中的 #app 提供填充內容，兩者在運行時指的是同一個 DOM 元素。
然后我們繼續在 Vue 中添加一個 data 函數，在里面 return 我們要用的變量，然后在 HTML 中使用模板語法{{}} 來渲染：
<body><h1>創建第一個Vue應用</h1><div id="app"><p>{{message}}</p></div><script>var app = new Vue({el:"#app",data() {return{message:"這是一個測試文件"}}})</script> </body>在瀏覽器打開這個HTML頁面，就可以看到成功渲染啦。
這里再多提一下，如果你看過官網的示例，你就會發現上述寫法和官網上有些不同，官網寫法如下所示：
var app = new Vue({el: '#app',data: {message: '這是一個測試文件'} });那么我們為什么要將 data 變成函數并 return 屬性呢，因為在實際的項目中，組件是一個可復用的實例，當你引用一個組件的時候，如果組件里的 data 是一個純粹的對象，則所有用到這個組件的都將引用同一個 data，就會造成數據污染。將 data 封裝成函數后，每次創建一個新實例后，我們只是調用了 data 函數生成的數據副本，避免了數據污染。
不使用 return 包裹的數據會在項目的全局可見，會造成變量污染。使用 return 包裹后數據中變量只在當前組件中生效，不會影響其他組件。
總結
以上是生活随笔為你收集整理的vscode 运行vue_Vue初体验的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 借呗不用会提额吗？
- 下一篇： vue进行判断使用class_vue判断