技術分享 | 測試平臺開發-前端開發之Vue.js 框架的使用

語言: CN / TW / HK
ead>

獲取更多技術文章分享 首先將 Vue.js 下載到本地,本章就以本地的 Vue.js 為例。在本地建立一個工作區即建立一個資料夾,使用 vscode 開啟,將 Vue.js 放到工作區目錄下。

建立掛載元素

首先建立一個 index.html 的檔案,使用 載入 vue.js,這裡的 ./vue.js 路徑根據自己 Vue.js 檔案位置而定。 ```

Document

```

建立Vue例項

建立 Vue 例項的目的是為元素提供資料、方法等 首先在 body 下面建立一個

標籤,它的 id="app"· ```

```

建立 Vue 例項 ```

{{msg}}

```

將資料放在 data 中的好處就是不需要頻繁的去修改 DOM 中的資料,而是直接的修改 data 中的資料即可。

Vue內部指令

Vue 指令是為了對頁面和資料操作更為便捷,這些操作就加左指令,通常以 v-xxx 表示。 常用的指令為: - v-if v-else:元素是否存在 - v-show:元素是否顯示 - v-for:迴圈 - v-on:繫結事件:簡寫 @ - v-bind:繫結屬性:簡寫 : - v-model:繫結資料 -

示例

```

Document

hello_if

hello_else_if

hello_else

```

  • @click 等同於 v-on:click 分開來看,它是由v-on 和click 組成;v-on繫結事件監聽器。可以用來繫結點選事件、鍵盤事件等;click通過單詞含義我們可以知道這是點選的意思,在這裡表示點選事件;那麼v-on:click合起來看,就表示監控點選事件。
  • v-if 根據表示式有條件的渲染元素。當表示式滿足條件後,才會進行渲染。
  • v-else-if,同等與v-if ,與 v-if 或 v-else-if 組合使用。
  • var vm = new Vue,頂一個 Vue 例項,例項名字為 vm。
  • el,決定之後 Vue 例項會管理哪一個 DOM。
  • data,Vue 例項對應的資料物件。
  • methods,定義屬於 Vue 的一些方法,可以在其他地方呼叫,也可以在指令中呼叫。 這裡使用 npm 安裝的 Vue 來建立專案。上面已經介紹了 Vue 的安裝,接下來就是初始化專案和下載環境所需要的依賴。

初始化專案

使用 vscode 開啟一個工作區,在當前的目錄下開啟一個終端,輸入 vue ui,Vue 就是啟動一個 Web 服務,這是一個視覺化的介面。 啟動的服務地址為 http://localhost:8000 這裡的地址以自己實際輸出的為準。 通過瀏覽器訪問,這時出現的就是初始化專案的頁面。此時是沒有專案的狀態,點選建立。需要填寫專案的路徑,然後點選“在此建立新專案”。 需要填寫專案的名字、包管理器、以及初始化 git(可選),然後點選下一步。 這裡可以選擇手動配置,選擇自己需要的外掛,當然也可以選擇其他的選項。主要選擇下面的這幾個功能,點選下一步。

接下來 CSS pre-processor 選擇 stylus,然後點選建立專案。會彈出儲存預設,這裡選擇‘建立專案,不儲存預設’即可。

Vue Web 端有下載外掛的功能,點選下圖的外掛,然後點選新增外掛。 搜尋 vuetify 和 axios 這兩個外掛,點選安裝-->完成安裝-->繼續,外掛安裝完成。

專案結構

專案分為三大塊:node_modules、public、src 以及其他的附屬檔案 node_modules 是用來存放依賴的地方,這個檔案非常的大,所以在上傳到 git 的時候,通常不會上傳這個檔案,而是上傳 package.json 的檔案

這個檔案記錄了專案需要用到的依賴,安裝檔案中的依賴,只需要在命令列裡輸入 npm install 即可

public 中主要是存放靜態的資原始檔 src 存放專案原始碼及需要引用的資原始檔。 - src 下的 assets:存放專案中用到的資原始檔,css、js、images 等。 - src 下的 componets:存放 Vue 開發中的元件:HelloWorld.vue 等。 - src 下的 router:vue-router vue 路由的配置檔案。 - src 下的 main.js:vue-cli 工程的入口檔案。 每個檔案的功能就不一一介紹了,主要的是上面這幾個檔案。 啟動 Vue 服務:命令預設為 npm run serve 使用瀏覽器開啟上圖的連結,就會顯示出當前專案的主頁。Vue.js框架的使用就先說到這裡啦,大家可以多多練習一下哦~

原文連結

獲取更多技術文章分享 img