vue的學習總結 入門

2021-09-29 11:42:15 字數 3451 閱讀 5152

v-if:通過條件渲染,由條件決定到底是否往頁面中寫資料(和js紅的if/else類似)

v-show:無論條件是否滿足都要往頁面中寫資料,只不過由條件決定是否顯示。

v-if      v-else -if     v-else

只是負責傳輸資料,至於是判斷、賦值取決於標籤。

vue監聽事件的快捷方法

縮寫形式

由此**下v-html v-text(}) v-model的區別

1.v-html

v-html用於輸出html,它與v-text區別在於v-text輸出的是純文字,瀏覽器不會對其再進行html解析,但v-html會將其當html標籤解析後輸出。2.v-text

v-text是用於操作純文字,它會替代顯示對應的資料物件上的值,當繫結的資料物件上的值發生改變,插值處的內容也隨之更新。注意:此處為單向繫結,資料物件上的值改變,插值會發生變化;但是當插值發生變化並不會影響資料物件的值。其中:v-text可以簡寫為},並且支援邏輯運算。3.v-model

v-model通常用於表單元件

的繫結,例如input,select等。它與v-text的區別在於它實現的表單元件的雙向繫結(資料物件上的值改變,插值會發生變化;當插值發生變化時,資料物件的值也會改變。),如果用於表單控制項以外標籤是沒有用的。修飾符:.lazy轉化為change事件.trim自動過濾輸入的首尾空格

註冊元件

prop是父元件用來傳遞資料的乙個自定義屬性,父元件的資料需要通過props把資料傳給子元件,子元件需要顯示的用props選項宣告「prop

vuejs中如何優雅的獲取 input

使用v-model:

如:       html

js中獲取使用this.message即可(需要在data中進行初始化,且會覆蓋input標籤中value自定義的值)

過濾器的使用主要對陣列進行處理

全域性過濾器

vue.filter(『過濾器的名字』,function(originval))務必寫return。。      }

此處的originval就是msg

私有過濾器

注:以上兩種過濾器同時存在的話,優先使用私有過濾器

arr.splice(arr.findindex(item => item.id === id), 1)

splice(index,num) : index代表的是陣列元素的下標位置,num代表的是刪除的個數

findindex() :是找到某元素的下標位置

get請求使用 params,header:使用token在header裡面

get請求是沒有content-type這個欄位的),需要設定的話也需要自己定義上請求頭

post請求使用data

axios.post()方法不設定headers會預設content-type;charset=utf-8

檔案上傳功能

使用axios上傳需要設定'content-type':'multipart/form-data'使用post方法(也就是傳引數的時候資料封裝使用的是data

以上內容,如有不當,請各位大佬幫忙指出,謝謝!

vue的入門學習

vue開發 通過官手腳手架起步,搭建環境。installation npm install g vue cli usage vue init example vue init webpack my project 在這裡插入 片 根據需要安裝外掛程式yes or no,一直回車,腳手架就生成了。接下...

Vue的學習總結

v bindattribute被稱為指令。指令帶有字首v 以表示它們是 vue 提供的特殊 attribute。含義 將這個元素節點的titleattribute 和 vue 例項的messageproperty 保持一致 v on新增事件 用於使用者和應用互動 v for指令可以繫結陣列的資料來渲...

VUE學習總結

對vue近半年的學習,用過iview,elment admin,mand mobile,從無到有,自己一步步搭建腳手架,直接下 自己打包,部署前後端分離。其他基於vue移動端框架都有研究,只是知道會用,其他的沒有深入了解。感覺所有框架都大同小異。同 用vue技術語法,實現前端效果。資料繫結,資料驅動...