表示式裡面寫在**? - 表示式寫在html的標籤中
表示式裡面寫什麼? - 可以直接寫data中的資料,也可以寫基本的js語句
}
}
el:// 掛載dom
data:// 準備資料
components:
watch:{} //監聽
methods:{} //書寫方法
computed:
}
filters:
}
注意:
(1)計算屬性,函式必須有返回值,函式的名字接收返回值,當成乙個屬性來使用。
(2)計算屬性,有依賴快取,只有依賴的資料發生改變,才會重新計算,否則,不會重新計算,直接使用快取
(3)計算屬性有getter和setter,但是一般都不用setter
(4)filter的使用:
1.什麼是指令?
指令是寫在標籤上的一種自定義屬性,主要是把vue例項中的資料,輸出到html中(vue例項物件和html關聯)。
《標籤 id=」」 class=」」v-*=」***」>2.常用指令
(1)v-textv-text=」***」>
=》 ***
(2)v-html- 可以解析標籤
(3)v-show- 頻繁的切換 - 修改的display屬性
(4)v-if- 使用者許可權之類的 - 刪除或重建dom
(5)v-else-if
(6)v-else
//>50顯示
//>20顯示
//>10顯示
(7)v-for遍歷
} //遍歷陣列
} //遍歷物件
注意:v-for遍歷運算元組,實現改變時-
如: arr[index] = [1,2,5,] // 陣列自身改變,不能更新dom結構
vue內部對陣列的方法進行了重寫 - 繼續原生js操作,然後進行更新了介面
因此,要介面資料更新,必須使用vue重寫後的方法
(8)v-model雙向資料繫結 - 只能使用於表單,讓表單和資料雙向繫結。
適用的標籤: input(輸入框 單選框 多選框) select textarea
(9)v-on -繫結事件 (簡寫 @)
《標籤 v-on:事件型別=」函式名」>v-on @click
阻止預設事件 - @click.prevent =
阻止冒泡事件 - @click.stop =
按enter鍵觸發 - @click.enter = /@click.13
傳遞乙個值 @click='geta(12,$event)' //預設函式不傳值,會自動傳入$event
geta(num,event)
(10)v-bind-給屬性繫結動態資料
語法: 《標籤v-bind:屬性=」表示式」 >簡寫: 《標籤:屬性=」表示式」 >v-bind繫結style
語法: 《標籤:style=」」 >v-bind繫結class
語法:《標籤v-bind:class=」」 >注意:flag是true,就有這個類,是false,就沒有這個類
學習vue基礎知識(二)
全域性狀態管理 多元件共享狀態 多個元件使用同乙個資料 任何乙個元件發生改變 其他的元件也要跟著發生相應的變化 建立全域性狀態管理的例項 註冊在元件裡使用全域性狀態值 a.獲取渲染全域性狀態值b.修改全域性狀態值 5大核心 state 全域性狀態資料mutation 規定只有mutation才能修改...
Vue入門(二)Vue基礎
本章根據前面的講解對有關的語法做進一步的講解和擴充,夯實基礎 所謂掛載點,就是前面例子中vue例項所管理的元素,這類似於css和jq的選擇器。data 1 vue例項管理其他選擇器對應的元素 類選擇器 data 元素選擇器 el div data 這裡呢,我僅僅列舉出兩個,其他的請大家自主的去試驗即...
Vue基礎學習
到公司第一天,把快遺忘的vue再看一遍官網的文件。vue.js是什麼?vue.js是一套用於構建使用者介面的漸進式框架。宣告式渲染 下面展示一些 new vue 結果hello vue 繫結元素attribute message 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊 介紹 v bind attr...