Vue起步基礎操做

1、Vue環境搭建

1.一、首先創立Vue項目

vue init webpack-simple vuedemo01

 

1.二、cd進入建立的vue文件夾內

cd vuedemo01

1.三、安裝moudels

npm install 或使用淘寶鏡像cnpm install

 

1.四、運行vue服務器

npm run dev

1.五、vue環境搭建成功

Vue搭建的服務器跑起來之後，會自動打開系統默認瀏覽器顯示網站內容

2、編輯Vue

在編譯器中，打開以前建立好的Vue文件夾

這裏我用的是VScode編譯器，能夠自行下載有關Vue的插件

以後咱們主要作編輯的是根目錄下src文件夾內的App.vue文件

默認這裏是編輯的Vue首頁（即npm run dev以後運行的頁面所顯示內容）

2.1 HTML部分編譯

大致上的編輯和普通html沒有差距，可是這裏的全部顯示內容（HTML部分）編輯應該在"template"標籤下的"div"標籤內進行編輯。

同理，若是我將標籤內容換一下：

 

我將div內內容改變以後，網頁瀏覽器同步刷新，無需手動刷新。（效果以下）

2.2 Javascript內容編輯

Vue的JS編輯，最簡單的是以下的結構

 

 

"data()"方法內"return"中的既是返回的數據。能夠在HTML部分接收（接收方式以下）

這裏成功接收到msg傳來的數據

 

2.3 style屬性

默認爲run出來的vue的樣式，能夠刪除編輯本身的屬性

顯示效果以下：