vue小專案練習——輸入標題並將輸入的標題新增到標題列表
阿新 • • 發佈：2018-11-30
第一次寫部落格，先自我介紹一下吧，我是18屆中國石油大學（華東）電腦科學與技術專業的本科畢業生[有沒有學長或者學姐，吱吱吱]，現從事前端工作。希望通過這個部落格記錄自己的學習之路，加油！
今天沒有開發任務，自學了一下vue，做了個小練習。
之前只是簡單看了一下vue的模板語法，今天的小例項讓我學習不少。上程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" *{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
html{
font-size: 20px;
}
section{
width: 60%;
margin: 3rem auto;
border-radius: 5px;
border: 1px solid lightskyblue;
}
.title{
width: 100%;
height: 2rem;
border-radius: inherit;
line-height: 2rem;
background-color:lightblue ;
border-bottom:1px solid lightskyblue ;
}
.title span{
margin-left: 0.5rem;
}
.search{
width: 90%;
margin: 1rem auto;
height: 2rem;
border:1px solid gainsboro ;
border-radius: 5px;
display: flex;
align-items: center;
}
.search input{
width: 90%;
border: none;
font-size: 0.8rem;
margin-left: 1rem;
outline: none;
}
.search a{
height: 100%;
width: 5%;
display: block;
background: url(../img/tj.png) no-repeat right;
background-size: 20px 20px;
}
hr{
display: block;
height: 1px;
border: none;
background-color: gainsboro;
width: 90%;
margin: auto;
}
.list{
width:90%;
margin: 0.5rem auto;
}
.list_item{
border: 1px solid gainsboro;
border-radius: 5px;
height: 2rem;
display: flex;
align-items: center;
margin-top: 1rem;
}
.gx{
display: block;
margin: 0.5rem;
width: 1rem;
height: 1rem;
background: url(../img/gx_n.png) no-repeat;
background-size: contain;
}
.green{
background: url(../img/gx_y.png) no-repeat;
background-size: contain;
}
.list_item span:nth-child(3){
background: url(../img/del.png) no-repeat;
background-size: contain;
}
.list_item span:nth-child(2){
width: 85%;
margin-left: 0.5rem;
font-size: 0.8rem;
}
【總結】1.沒有使用bootstrap框架。個人不喜歡框架，更喜歡自己寫，不知道為什麼。這也是很大的困惑，總覺得用框架很拘束，自己寫更靈活，修改也方便。請教過一個前端人員，他說框架是給後端人員快速開發用的，前端人員建議自己寫。希望有開發經驗的人能發表一下看法。
2.對用vue寫列表有了大致的瞭解，也學習了繫結事件、新增class等。
剛畢業，在公司也沒有人帶，如果有程式碼不合理的或者可以優化的，或者有錯誤，希望能指出，一起進步一起學習，謝謝啦~