vue學習筆記

#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元件

,

3.在父元件中import並註冊component

##四、父元件向子元件傳資料、子元件往父元件傳資料

先為兩個元件註冊為父子關係

先說子向父傳

主要是使用emi

t的方式

1.在子組

件方法內

『『

『emit的方式 1.在子元件方法內 ```

emit的方

式1.在

子元件方

法內『『

『emit(『觸發的動作』,)```

2.在父元件的自定義標籤(子元件)內

@觸發的動作="需要對引數做的方法")

父元件methods裡面

需要對引數做的方法(傳進來的引數){}

具體例項

methods: 

},

具體例項

父元件的自定義標籤(子元件)

子元件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...