Vue入門筆記

a.el屬性

設定掛載點（通過css選擇器設定vue例項管理的元素）

1.vue例項的作用範圍是什麼呢？

el命中的元素外部不可使用vue例項管理的資料，但是命中元素及其內部後代元素可以隨便使用

2.是否可以使用其他的選擇器？

支援id選擇器，class選擇器等，但最好在開發的使用使用id選擇器，因為id是惟一的

3.是否可以設定其他的dom元素呢？

除了div，其他的dom元素也是可以設定的，但只能設定雙標籤，不能使用html和body

b.data屬性

vue中用到的資料定義在data中

data中可以寫複雜型別的資料

渲染複雜型別資料時，遵守js的語法即可

1.內容繫結，事件繫結

v-text,v-html,v-on基礎

v-text : 設定標籤的內容，預設替換全部內容，部分替換使用兩個大括號的寫法，只會解析為文字

data:

})v-html : 設定元素的innerhtml，內容中有html結構會被解析為標籤

data:

})v-on : 為元素繫結事件，事件名不需要寫on，指令可以編寫為@，繫結的方法定義在methods屬性中，方法內部通過this關鍵字可以訪問定義在data中的資料

data:,

methods: ,

changevedio:function()

}})2.顯示切換，屬性繫結

v-show,v-if,v-bind

v-show : 根據真假切換元素的顯示狀態；實質上是修改元素的display，實現顯示隱藏；指令後面的內容，最終都會解析為布林值，值為true元素顯示，值為false元素隱藏

data:,

methods:

}})v-if : 根據表示式的真假切換元素的顯示狀態；本質是通過操縱dom元素來切換顯示狀態；表達值的值為true，元素存在於dom樹中，為false則從dom樹中移除；頻繁的切換使用v-show，反之使用v-if，前者的切換消耗小

data:,

methods:

}})v-bind : 為元素繫結屬性；完整寫法是 v-bind:屬性名；簡寫可以省略 v-bind，只保留 :屬性名；動態的增刪class建議使用物件的方法

:class="isactive?'active':''" @click="toggleactive">

:class="" @click="toggleactive"/>

data:,

methods:

}})3.列表迴圈，表單元素繫結

v-for,v-on補充,v-model

v-for：根據資料生成列表結構；陣列經常和v-for結合使用；語法是(item,index) in 資料或者item in 資料；item和index可以結合其他指令一起使用；陣列長度的更新會同步到頁面上，是響應式的

data:,

]}, methods:);

},remove:function()

}})data:,

methods:,

setm:function()

}})axios：axios必須先導入才可以使用；使用get或post方法即可傳送對應的請求；then方法中的**函式會在請求成功或失敗時觸發；通過**函式的形參可以獲取響應內容，或錯誤資訊。

官方文件：

document.queryselector(".get").onclick = function(),function(err))
}document.queryselector(".post").onclick = function())
.then(function(response),function(err))
}

data:,

methods:,function(err){})}}

})

Vue入門筆記

vue 入門筆記

Vue入門筆記002

Vue入門筆記003

Vue入門筆記

vue 入門筆記

Vue入門筆記002

Vue入門筆記003

相關推薦