vue中個別技術總結

阿新 • • 發佈：2021-06-28

個人技術總結 —— vue中個別技術總結

這個作業屬於哪個課程	2021春軟體工程實踐S班 (福州大學)
這個作業要求在哪裡	軟體工程實踐總結&個人技術部落格
這個作業的目標
其他參考文獻

個人技術總結 —— vue中個別技術總結

在自學vue的過程中，自己也對某些部分做了點筆記，記錄了使用方式與心得，現將部分展示如下：

1.Vue當中的事件處理：

兩句語法區別

<button @click="handleClick"></button> <!--事件可以接收到e引數-->
<button @click="handleClick($event)"></button><!--傳遞引數，可以讓事件接受，也可以傳遞更多引數-->

<script>
    var vm = new Vue({
        el : "#app",
        methods : {
            handleClick : function(e){console.log(e)}
        }
    })
</script>

事件修飾符

prevent阻止預設行為
```
<form action = "/abc">
    <input type="submit" @click.prevent="handleClick"/>
</form>
```
@click.prevent阻止預設行為代替了

@click = "handleClick"

handleClick : function(e){

e.preventDefult();

}
stop阻止向外冒泡
self只有自己進行某些事件才會響應

要求e.target = e.currentTarget才會執行
```
<div id="app">
    <div @click.self="handleClick">
        hello	
        <div>
            click
        </div>
    </div>
</div>
 
```
加了self之後，click事件在點選click的div之後，冒泡出來的click不會被響應
once觸發一次事件只會就會解綁

capture遵循事件繫結原則，不遵行事件冒泡原則

冒泡原則是從內往外

事件繫結時從外向內

<div id="app">
    <div @click.capture = "handleClickOuter">
        <div @click.capture = "handleClickInner">
            hi
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el : "#app",
        methods:{
            handleClickOuter : function(){
                alert("1")
            },
            handleClickInner : function(){
                alert("2")
			}
        }
    })
</script>

不加capture，alert的內容應該是2，1

加了capture，alert的內容應該是1，2

按鍵修飾符

@keydown.enter

當點選enter鍵才能響應事件

<div id="app">
    <input @keydown.enter="handleKeyDown"/>
</div>

delete
esc

系統修飾符

@keydown.ctl
alt
shift
meta
```
<div>
    <input @keydown.ctl="handleKeyDown"/>
</div>
```
只有當按鍵按下並且一直按住ctrl鍵才能執行函式

滑鼠按鍵修飾符

@click.right
left
middle

按下指定方向的滑鼠才能響應的事件

2.Vue當中的表單繫結：

v-model表單與資料進行雙向繫結

input 值
textarea 值
input type= "checkbox" true/false
input type="radio" value="男" 男

select

<select v-model=”value“>
    <option disabled>---請選擇---</option>
    <option>A</option>
    <option>B</option>
    
    <!--輸出結果為A或者B-->
</select>

<select v-model=”value“>
    <option disabled>---請選擇---</option>
    <option value="1">A</option>
    <option value="2">B</option>
    
    <!--輸出結果為1或者2-->
</select>

表單繫結修飾符

lazy

當表單失焦的時候再改變value
```
<input v-model.lazy="value" />
```
number

當表單內容填寫時能被轉化為number時，就轉換為number

而不是存成字串
trim

去掉首位空格後再處理資料

3.樣式繫結：

藉助一個class和一個物件進行繫結

<style>
    .active : {
        color : red
    }
</style>
<div id="app">
    <div @click = "handleDivClick"
         :class = {active : isActived}
         >
        <!--繫結class屬性，裡面有一個active命名的類，與isActived資料進行繫結-->
        hello
    </div>
</div>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            isActived : false
        },
       	methods:{
            handleDivClick : function(){
                this.isAcived = !this.isAcitved
            }
        }
	})
</script>

class與陣列繫結，更改陣列的內容改變class

<style>
   .active{
       color : red
   }
</style>
<body>
   <div id="app">
       <div @click="handleClick"
            :class = "[actived , activedOne]"
            >
           Hello
       </div>
   </div>
</body>
<script>
   var vm = new Vue({
       el : "#app",
       data : {
           actived : "",
           activedOne : "actived-one"
       },
       methods : {
           this.actived = this.actived==="active" ? "" : "active"
       }
   })
</script>

對style樣式進行操作，一樣的也是操作一個物件，或者操作一個數組

<div id="app">
    <div :style = “styleObj”
         @click = "handleClick"
         >
        <!--同樣也可以進行陣列操作:style="[styleObj]"-->
        Hello
    </div>
</div>
<script>
    var vm = new Vue({
        el : "app",
        data : {
            styleObj : {
                color : black
            }
        },
        methods : {
            handleClick : function(){
                this.styleObj.color = this.setyleObjColor === "black" ? "red":"black"
			}
        }
    })
</script>

用class
- 繫結物件
- 繫結陣列
用style
- 繫結物件
- 繫結陣列

4.axios相關：

基本格式，如下以個人程式碼顯示：

this.$axios({
          method: 'post',
          url: 'http://1.15.149.222:8080/coursewebsite/comment/add',
          data: {
            account: localStorage.getItem('account'),
            topicId: this.topicID,
            content: this.comment
          }
        }).then((response) =>{
          console.log(response.data)
          this.$refs.commentValue.value=''
          this.getCommentInfo()
          this.$router.go(0)
        }).catch((error) => {
          console.log(error)       //請求失敗返回的資料
        })

method：請求的型別
url：請求的介面路徑
data：向後端傳輸的資料
then：axios執行後的回撥，response是回撥後端傳來的引數，存放所有資料
catch：捕捉錯誤

遇到的問題

在編寫程式碼的過程中碰到了大大小小各種各樣的問題，也算是把該踩的坑都踩了個差不多。這裡就列舉一個雖然已經解決了但是任然不知道為什麼的問題。

問題描述：我在寫討論答疑介面時，要求點選話題後會自動跳轉到該話題的詳情介面，並且要顯示該話題和該話題的所有評論。由於頁面跳轉，我需要將此話題內容，以及其他資訊傳給跳轉後的頁面。由該頁面儲存後再向後端傳送請求獲取該話題下的討論。如果我用一個物件儲存傳送的資訊，那麼在討論詳情頁面重新整理介面後，話題就會消失。當我把物件差分成單個數據依次傳送後這個問題就解決了。什麼原理至今還不知道。。。。。。程式碼如下：

data(){
    return{
      commentList:[],
      newTitle:'',//將newTitle以及newContain從物件中脫離出來單獨傳輸就不會出現問題
      newContain:'',
      type:'文章標題',
      search:'',
      pagesize: 5,
      //當前頁碼
      currentPage: 1,
      //查詢的頁碼
      start: 1,
      //預設資料總數
      totalCount: 1,
      //搜尋條件
      criteria: '',
    }