Redis支援五種資料型別和使用場景 2021-12-14

阿新 • • 發佈：2021-12-20

Vue簡介

基於JavaScript框架
簡化了Dom操作
響應式資料驅動

Vue建立使用

匯入開發版本的Vue.js
建立Vue例項物件，設定el屬性和data屬性
使用簡潔的模板語法把資料渲染到頁面上

el：掛載點

el 是用來設定Vue例項掛載（管理）的元素
Vue會管理 el 選項命中的元素及其內部的後代元素
可以使用其他的選擇器，但是建議使用ID選擇器
可以使用其他的雙標籤，不能使用HTML和BODY

data：資料物件

Vue中用到的資料定義在data中
data中可以寫複雜型別的資料
渲染複雜型別資料時，遵循js的語法即可

v-text指令

v-text 指令的作用是：設定標籤的內容（textContent）

預設寫法會替換全部內容，使用差值表示式{{}}可以替換指定內容
內部支援寫表示式

v-html指令

v-html 指令的作用是：設定元素的innerHTML
內容中有html結構會被解析為標籤
v-text指令無論內容是什麼，只會解析為文字
解析文字使用v-text，需要解析html結構使用v-html

v-on指令

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

補充

事件繫結的方法寫成函式呼叫的形式，可以傳入自定義引數
定義方法時需要定義形參來接收傳入的實參

事件的後面跟上 .修飾符可以對事件進行限制
.enter 可以限制觸發器的按鍵為回車
事件修飾符有多種

v-show指令

v-show 指令的作用是：根據真假切換元素的顯示狀態
原理是修改元素的display，實現顯示隱藏
指令後面的內容，最終都會解析為布林值
值為true元素顯示，值為false元素隱藏
資料改變之後，對應元素的顯示狀態會同步更新

v-if指令

v-if 指令的作用是：根據表示式的真假切換元素的顯示狀態
本質是通過操作dom元素來切換顯示狀態
表示式的值為true，元素存在於dom樹中，為 false，從dom樹中移除
頻繁的切換使用v-show，反之使用v-if

，前者的切換消耗小

v-bind指令

v-bind 指令的作用是：為元素繫結屬性
完整寫法是 v-bind:屬性名
簡寫的話可以直接省略v-bind，只保留 :屬性名
需要動態的增刪class建議使用物件的方式

列表資料使用陣列儲存

v-for指令

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

v-model指令

v-model指令的作用是便捷的設定和獲取表單元素的值
繫結的資料會和表單元素的值相關聯
繫結的資料←→表單元素的值（資料雙向繫結）

axios基本使用

功能強大的網路請求庫

//匯入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

//使用：
axios.get(地址?查詢字串).then(function(response){},function(err){})
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})

axios.post(地址,物件).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

//文件：
//    https://github.com/axios/axios