?前言：前面學(xué)習(xí)了前端HTML、CSS樣式、JavaScript以及Vue框架的簡(jiǎn)單適用，接下來(lái)運(yùn)用前端模塊化編程的思想，繼續(xù)學(xué)習(xí)Vue框架，完成自己項(xiàng)目項(xiàng)目的搭建。
目錄
響應(yīng)式基礎(chǔ) ref?reactive
學(xué)習(xí)成果展示
Vue項(xiàng)目搭建
搭建自己的vue項(xiàng)目
總結(jié)?
響應(yīng)式基礎(chǔ) ref?reactive
關(guān)于ref和reactive，官方解釋如下，另外一篇博客寫得也很清楚
響應(yīng)式基礎(chǔ) | Vue.js (vuejs.org)
談?wù)刅ue3中的ref和reactive_vue reactive_七公子77的博客-CSDN博客
學(xué)習(xí)成果展示
不用vue框架寫一個(gè)table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測(cè)試用例管理平臺(tái)</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div calss="table" style="
display: inline-block">
<h2>測(cè)試用例</h2>
<button class="add-case-button" @click="isEdit=true">
新增用例
</button>
<table border="2">
<col style="width: 100px; overflow: hidden; text-overflow: ellipsis" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<tr>
<th>用例名</th>
<th>步驟名</th>
<th>關(guān)鍵字</th>
<th>參數(shù)1</th>
<th>參數(shù)2</th>
<th>操作</th>
</tr>
<tr>
<td>參數(shù)正確登錄成功</td>
<td>輸入正確的參數(shù)登錄成功</td>
<td>用戶名 密碼</td>
<td>用戶名</td>
<td>密碼</td>
<td><button>刪除</button></td>
</tr>
<tr>
<td>參數(shù)錯(cuò)誤登錄失敗</td>
<td>輸入錯(cuò)誤的參數(shù)登錄失敗</td>
<td>用戶名 密碼</td>
<td>用戶名</td>
<td>密碼</td>
<td><button>刪除</button></td>
</tr>
<tr>
<td>參數(shù)為空登錄失敗</td>
<td>輸入的參數(shù)為空登錄失敗</td>
<td>用戶名 密碼</td>
<td>用戶名</td>
<td>密碼</td>
<td><button>刪除</button></td>
</tr>
</col>
</table>
</div>
</body>
</html>
上面的實(shí)現(xiàn)方式用到了很多個(gè)th、td標(biāo)簽，維護(hù)很麻煩，那有沒(méi)有更好的解決方法？
如何用vue框架實(shí)現(xiàn)？
用v-for，遍歷數(shù)組中的元素，進(jìn)行列表的渲染。
關(guān)鍵兩行代碼：
取列表的表頭，表頭名稱前加上編號(hào)，編號(hào)從1開始
<th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th>
取列表里具體的內(nèi)容
<tr v-for="testCase in testCases" >
如果要修改表頭、列表里內(nèi)容，不需要在標(biāo)簽里一個(gè)一個(gè)改，只需要去維護(hù)tableName、testCases里的值即可。是不是很省勁！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測(cè)試用例管理平臺(tái)</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="test">
<div calss="table" style="
display: inline-block">
<h2>測(cè)試用例</h2>
<table border="2">
<col style="width: 100px; overflow: hidden; text-overflow: ellipsis" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<thead>
<tr>
<th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th>
</tr>
</thead>
<tbody>
<tr v-for="testCase in testCases">
<td>{{testCase.caseName}}</td>
<td>{{testCase.stepName}}</td>
<td>{{testCase.keywords}}</td>
<td>{{testCase.param1}}</td>
<td>{{testCase.param2}}</td>
<td>{{testCase.opration}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const { createApp, computed, ref, reactive } = Vue;
const = MRJJ{
setup() {
let tableName = reactive({
"caseName": "用例名",
"stepName": "步驟名",
"keywords": "關(guān)鍵字",
"param1": "參數(shù)一",
"param2": "參數(shù)二",
"opration": "操作",
})
let testCases = ref([
{
"id": 1,
"caseName": "參數(shù)正確登錄成功",
"stepName": "登錄成功",
"keywords": "用戶名",
"param1": "用戶名",
"param2": "密碼",
"opration": "刪除"
},
{
"id": 2,
"caseName": "參數(shù)錯(cuò)誤登錄失敗",
"stepName": "登錄失敗",
"keywords": "用戶名",
"param1": "用戶名",
"param2": "密碼",
"opration": "刪除"
},
{
"id": 3,
"caseName": "參數(shù)為空登錄失敗",
"stepName": "登錄成功",
"keywords": "用戶名",
"param1": "用戶名",
"param2": "密碼",
"opration": "刪除"
},
])
return { tableName, testCases }
}
};
createApp(MRJJ).mount('#test');
</script>
</body>
</html>可以看到td標(biāo)簽里的內(nèi)容自動(dòng)取出來(lái)了。?
踩坑記錄：
createApp(MRJJ).mount('#test');
id為test這個(gè)div標(biāo)簽里的內(nèi)容，才能引用MRJJ里面的方法。
結(jié)合前面的內(nèi)容，最終寫出來(lái)的頁(yè)面！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測(cè)試用例管理平臺(tái)</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<header id="title">
歡迎來(lái)到MRJJ_9的自動(dòng)化測(cè)試平臺(tái)
</header>
<body>
<div class="learn-website">
<h3>前端學(xué)習(xí)網(wǎng)站</h3>
<a class="biglink" >w3school.com</a>
</br>
<a >MDN 社區(qū)</a>
</br>
<a class="test01" >CSDN社區(qū)</a>
</br>
<h3>本人博客</h3>
<a >前端學(xué)習(xí)博客</a>
</div>
<div id="test">
<div class="form" style="
display: inline-block">
<h2 id="form-title">添加測(cè)試用例</h2>
<!-- <button class="close-button" @click="isEdit=false">關(guān)閉</button> -->
<label>
用例名：
<input type="text" placeholder="輸入測(cè)試用例名稱" name="caseName" v-model="newCase.caseName">
</label>
<label>步驟名：
<input type="text" placeholder="輸入測(cè)試步驟名稱" name="stepName" v-model="newCase.stepName">
</label>
<div>請(qǐng)選擇用例類型：
<label>
<input type="radio" name="type" value="api">接口自動(dòng)化
</label>
<label>
<input type="radio" name="type" value="ui">UI自動(dòng)化
<br>
</label>
</div>
<label for="keywords">
關(guān)鍵字：
</label>
<select name="keywords" v-model="newCase.keywords">
<option value="openBrowser">打開瀏覽器</option>
<option value="params">傳入必傳參數(shù)</option>
</select>
</br>
<lable>參數(shù)一：<input type="text" name="param1" v-model="newCase.param1"></lable>
<lable>參數(shù)二：<input type="text" name="param2" v-model="newCase.param2"></lable>
</br>
<button id="addSubmit" type="button" @click="addCase">提交新增</button>
</form>
</div>
<div calss="table" style="
display: inline-block">
<h2>測(cè)試用例</h2>
<table border="2">
<col style="width: 100px; overflow: hidden; text-overflow: ellipsis" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<thead>
<tr>
<th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th>
</tr>
</thead>
<tbody>
<tr v-for="testCase in testCases">
<td>{{testCase.caseName}}</td>
<td>{{testCase.stepName}}</td>
<td>{{testCase.keywords}}</td>
<td>{{testCase.param1}}</td>
<td>{{testCase.param2}}</td>
<td>
<button id="delete" @click="deleteCase(testCase)">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const { createApp, computed, ref, reactive } = Vue;
const MRJJ = {
setup() {
let tableName = reactive({
"caseName": "用例名",
"stepName": "步驟名",
"keywords": "關(guān)鍵字",
"param1": "參數(shù)一",
"param2": "參數(shù)二",
"opration": "操作",
})
let testCases = ref([
{
"id": 1,
"caseName": "參數(shù)正確登錄成功",
"stepName": "登錄成功",
"keywords": "用戶名",
"param1": "用戶名",
"param2": "密碼",
"opration": "刪除"
},
{
"id": 2,
"caseName": "參數(shù)錯(cuò)誤登錄失敗",
"stepName": "登錄失敗",
"keywords": "用戶名",
"param1": "用戶名",
"param2": "密碼",
"opration": "刪除"
},
{
"id": 3,
"caseName": "參數(shù)為空登錄失敗",
"stepName": "登錄成功",
"keywords": "用戶名",
"param1": "用戶名",
"param2": "密碼",
"opration": "刪除"
},
])
let newCase = reactive({
"caseName": "用例名",
"stepName": "步驟名",
"keywords": "關(guān)鍵字",
"param1": "參數(shù)一",
"param2": "參數(shù)二",
})
let isCaseName = ref(true);
function deleteCase(testCase) {
console.log("要?jiǎng)h除的用例是：", testCase)
testCases.value.splice(testCases.value.indexOf(testCase), 1);
}
function addCase() {
let lastId = testCases.value[testCases.value.length - 1].id;
console.log(lastId);
let addCase = { ...newCase };
addCase.id = lastId + 1;
testCases.value.push(addCase);
isEdit.value = false;
}
return { tableName, testCases, newCase, addCase, deleteCase}
}
};
createApp(MRJJ).mount('#test');
</script>
<link rel="stylesheet" href="case.css">
<style>
body {
background: aliceblue;
background-image: url("./picture.jpg");
background-size: 60vw;
background-position: 10% 10%;
}
</style>
</body>
</html>
Vue項(xiàng)目搭建
npm init vue
創(chuàng)建的項(xiàng)目結(jié)構(gòu)，?在本地將項(xiàng)目啟動(dòng)起來(lái)，進(jìn)入工程目錄，打開終端，輸入命令：npm run dev?
?本地啟動(dòng)完成的項(xiàng)目
vue插件安裝必備，推薦看下面的這篇博客
開發(fā)vue3必備的幾個(gè)vscode插件，你用上了嗎？-騰訊云開發(fā)者社區(qū)-騰訊云 (tencent.com)
vs code切換主題，F(xiàn)ile->preferences-Theme
搭建自己的vue項(xiàng)目
搭建過(guò)程遇到一些坑，特開了一個(gè)博客記錄
啟動(dòng)Vue項(xiàng)目踩坑記錄_MRJJ_9的博客-CSDN博客
使用組件化的方式，搭建的Vue項(xiàng)目大功告成了?。?！?
??文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-659956.html
總結(jié)?
從前面的基礎(chǔ)學(xué)習(xí)，一路走到Vue框架這里，可以看到組件化編程確實(shí)很省勁，這也是實(shí)際項(xiàng)目中大都要用到vue3框架的原因，到這里前端方面的基礎(chǔ)自己再好好學(xué)習(xí)一下，為后面自己做個(gè)網(wǎng)站打一個(gè)堅(jiān)實(shí)的基礎(chǔ)?。。∏岸诉€挺有意思的！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-659956.html
到了這里，關(guān)于前端基礎(chǔ)（Vue的模塊化開發(fā)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
