#vue學習筆記
從7月2日到7月4日三天的學習成果
##一、vue的起步、及配置環境
3、使用vue-cli快速搭建vue專案vue init webpack *** (***為專案名)
(建立成功需要等待一段時間)
4、輸入npm run dev
編譯專案,成功後根據提示或根據修改的埠號登陸 「lacalhost」
5.看到下圖說明已經成功搭建專案了,詳細可參考我**的文章內容更詳細
##二、vue六個基礎指令
v-bind 特性被稱為指令。指令帶有字首 v-,以表示它們是 vue 提供的特殊特性。它們會在渲染的 dom 上應用特殊的響應式行為。在這裡,該指令的意思是:「將這個元素節點的 title 特性和 vue 例項的 message 屬性保持一致」。
除此之外還有這些指令,具體參考起步
v-if指令
v-show指令
v-else指令
v-for指令:v-for=「item, index in list」 :key=「index」 //官方推薦寫法(有些編輯器有要求,比如vs code )
v-bind指令
v-on指令
##三、vue元件與頁面跳轉
元件介紹
元件是可復用的 vue 例項,且帶有乙個名字:可以理解為自定義標籤。我們可以把這個元件作為標籤來使用
比如「彈窗介面」經常作為乙個元件來使用
操作方法:
1.寫乙個vue元件
2.在src/router/index.js
中註冊vue元件
,
'@/views/payconfirm.vue'
中@為絕對路徑,直接定位到src
路徑下
3.在父元件中import並註冊component
4.在父元件直接使用自定義的標籤
頁面跳轉的話就在index.js
裡註冊後再在需要的位置寫上@click="$router.push()"
##四、父元件向子元件傳資料、子元件往父元件傳資料
先為兩個元件註冊為父子關係
先說子向父傳
主要是使用emi
t的方式
1.在子組
件方法內
『『
『emit的方式 1.在子元件方法內 ```
emit的方
式1.在
子元件方
法內『『
『emit(『觸發的動作』,)```
2.在父元件的自定義標籤(子元件)內
@觸發的動作="需要對引數做的方法")
父元件methods裡面
需要對引數做的方法(傳進來的引數){}
具體例項
父向子傳主要是使用了父元件的v-bind和子元件的propsmethods:
},
具體例項
父元件的自定義標籤(子元件)
子元件script**,這裡prosname可設定引數型別
">export default,
data(),
}```
##五、api呼叫
作者ajax知識內容匱乏,需要補充學習
現先寫已經封裝成的api的使用方法
api.api方法名稱().then(data=>
##六、過程遇到的問題
需要在為乙個div寫上background-image樣式時,傳統方式url無法成功定位的問題
可行的方法:
``` ```
vue學習 筆記
v model 雙向繫結 v if v else if v else v on 繫結事件 v bind 繫結資料 v cloak 當vue未初始化完成前可不顯示為賦值的 vue屬性名稱 需要給v cloak設定 display none v for i迴圈次數 a資料中的資料 arr定義的陣列 最好...
vue 學習筆記
1.v if v show區別 v if 是 真正 的條件渲染,因為它會確保在切換過程中條件塊內的事件 和子元件適當地被銷毀和重建。v if 也是惰性的 如果在初始渲染時條件為假,則什麼也不做 直到條件第一次變為真時,才會開始渲染條件塊。相比之下,v show 就簡單得多 不管初始條件是什麼,元素總...
VUE學習筆記
4 eslint檢查原則 定義n個規則 訪問鏈結 eslintrc.js配置檔案,忽略某個規則 例如 indent off eslintignore 忽略那些檔案的檢查 5 input輸入框enter按鍵需要繫結監聽 keyup.enter 6 深度監視 arr json.parse windows...