vscode 运行vue_Vue初体验
Vue的引入
要使用 Vue，我們可以直接在 Vue.js 的官網(wǎng)直接下載 vue.min.js 文件，然后在 HTML 頁(yè)面中通過(guò) <script> 標(biāo)簽來(lái)引入這個(gè)文件。下載地址為：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>使用前（在運(yùn)行時(shí)）要確保 Vue 文件已經(jīng)加載完成再然后進(jìn)行其他操作（代碼加載的順序是很重要的）。
Vue的實(shí)例語(yǔ)法
每個(gè) Vue 應(yīng)用都需要通過(guò)實(shí)例化 Vue 來(lái)實(shí)現(xiàn)，實(shí)例化 Vue 的語(yǔ)法格式如下：
var vm = new Vue({// 選項(xiàng) })創(chuàng)建第一個(gè) Vue 應(yīng)用
在開(kāi)始使用 Vue 之前，肯定是需要做一些準(zhǔn)備工作，例如下載安裝好要使用的 IDE，你可以使用 Visual Studio Code（簡(jiǎn)稱(chēng) VSCode），VSCode下載地址：https://code.visualstudio.com/。
當(dāng)然也可以選擇其他你覺(jué)得好用的 IDE，例如 WebStorm 等，然后自行下載安裝。
下載安裝好 VSCode 后，首先我們可以在 VSCode 中（或者是 WebStorm）創(chuàng)建一個(gè) HTML 文件。例如我創(chuàng)建了一個(gè) test.html，文件中的內(nèi)容如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue學(xué)習(xí)</title> </head> <body><h1>創(chuàng)建第一個(gè)Vue應(yīng)用</h1> </body> </html>這是一個(gè)最基本的 HTML 文件，我們可以直接在瀏覽器中打開(kāi)這個(gè) HTML 文件，可以看到頁(yè)面顯示為 “創(chuàng)建第一個(gè)Vue應(yīng)用” 。
要使用 Vue，我們要做的第一件事情就是在這個(gè) HTML 中引入 Vue.js，引入的方式我們上面已經(jīng)講過(guò)啦。例如我在項(xiàng)目的根目錄下創(chuàng)建一個(gè) src 文件夾，然后將下載好的 vue.min.js 文件放入文件夾中。
注意看我們引入文件的位置喲，是在 <body> 標(biāo)簽之前，因?yàn)槲覀?HTML 頁(yè)面加載的順序是自上而下的，所以說(shuō)我們得讓這個(gè)文件在使用 Vue 之前就加載好。
Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。創(chuàng)建一個(gè) Vue 實(shí)例，將實(shí)例通過(guò) #app 掛載到 div#app 這個(gè) DOM 節(jié)點(diǎn)上。
HTML中的 app 指定綁定目標(biāo)，而 Vue 實(shí)例中的 #app 提供填充內(nèi)容，兩者在運(yùn)行時(shí)指的是同一個(gè) DOM 元素。
然后我們繼續(xù)在 Vue 中添加一個(gè) data 函數(shù)，在里面 return 我們要用的變量，然后在 HTML 中使用模板語(yǔ)法{{}} 來(lái)渲染：
<body><h1>創(chuàng)建第一個(gè)Vue應(yīng)用</h1><div id="app"><p>{{message}}</p></div><script>var app = new Vue({el:"#app",data() {return{message:"這是一個(gè)測(cè)試文件"}}})</script> </body>在瀏覽器打開(kāi)這個(gè)HTML頁(yè)面，就可以看到成功渲染啦。
這里再多提一下，如果你看過(guò)官網(wǎng)的示例，你就會(huì)發(fā)現(xiàn)上述寫(xiě)法和官網(wǎng)上有些不同，官網(wǎng)寫(xiě)法如下所示：
var app = new Vue({el: '#app',data: {message: '這是一個(gè)測(cè)試文件'} });那么我們?yōu)槭裁匆獙?data 變成函數(shù)并 return 屬性呢，因?yàn)樵趯?shí)際的項(xiàng)目中，組件是一個(gè)可復(fù)用的實(shí)例，當(dāng)你引用一個(gè)組件的時(shí)候，如果組件里的 data 是一個(gè)純粹的對(duì)象，則所有用到這個(gè)組件的都將引用同一個(gè) data，就會(huì)造成數(shù)據(jù)污染。將 data 封裝成函數(shù)后，每次創(chuàng)建一個(gè)新實(shí)例后，我們只是調(diào)用了 data 函數(shù)生成的數(shù)據(jù)副本，避免了數(shù)據(jù)污染。
不使用 return 包裹的數(shù)據(jù)會(huì)在項(xiàng)目的全局可見(jiàn)，會(huì)造成變量污染。使用 return 包裹后數(shù)據(jù)中變量只在當(dāng)前組件中生效，不會(huì)影響其他組件。
總結(jié)
以上是生活随笔為你收集整理的vscode 运行vue_Vue初体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 借呗不用会提额吗？
- 下一篇： 数据查询和业务流分开_传统数仓和大数据数