Vue常用指令系統 Vue 屬性
阿新 • • 發佈:2020-12-09
v-text : 顯示文字內容
v-html:顯示標籤
v-bind: 動態的標籤屬性控制例v-bind:class 簡寫 :lcass 裡面可以加上:lcass='num:得到布林值或者得到布林值的算式'可以繫結屬性和自定義的屬性
v-if:控制標籤的建立條件為真就建立
v-else-If:
v-else:
v-show: 控制標籤的隱藏還是顯示
v-on: 繫結事件例@click='num++' 複雜的可以寫函式 在methods中寫對應的函式
v-model: 雙向事件繫結
v-for:用來迴圈資料<li v-for="(value,index) in person_info" :key="index">{{value}} -- {{index}}</li>
Vue中的屬性
el:用來獲取檢視,用的是css選擇器
data: 資料屬性 用來驅動檢視
methods :寫相關的函式 @click等繫結事件的函式
watch :監聽,偵聽屬性,可以幫助我們偵聽data某個資料的變化,從而做相應的自定義操作。
偵聽屬性是一個物件,它的鍵是要監聽的物件或者變數,值一般是函式,當偵聽的data資料發生變化時,會自定執行的對應函式,這個函式在被呼叫時,vue會傳入兩個形參,第一個是變化後的資料值,第二個是變化前的資料值。
computed: 計算屬性
filters :區域性過濾器,只能在當前物件中使用
// 區域性過濾器,只能在當前物件中使用 filters:{ yuan(val){ return val + '元' }, keeptwopoint(val,n){ return val.toFixed(n) } }, // 全域性過濾器,任何物件都可以直接使用這個過濾器 Vue.filter('RMB',function (val){ return val + 'RMB' })
阻止事件冒泡:
<div class="c2" @click.stop="f2"></div> <div class="c2" @click.stop.prevent="f2"></div>
declare type ComponentOptions = { // data data: Object | Function | void; // 傳入的data資料 props?: { [key: string]: PropOptions }; // props傳入的資料 propsData?: ?Object; // 對於自定義元件,父級通過`props`傳過來的資料 computed?: { // 傳入的計算屬性 [key: string]: Function | { get?: Function; set?: Function; cache?: boolean } }; methods?: { [key: string]: Function }; // 傳入的方法 watch?: { [key: string]: Function | string }; // 傳入的watch // DOM el?: string | Element; // 傳入的el字串 template?: string; // 傳入的模板字串 render: (h: () => VNode) => VNode; // 傳入的render函式 renderError?: (h: () => VNode, err: Error) => VNode; staticRenderFns?: Array<() => VNode>; // 鉤子函式 beforeCreate?: Function; created?: Function; beforeMount?: Function; mounted?: Function; beforeUpdate?: Function; updated?: Function; activated?: Function; deactivated?: Function; beforeDestroy?: Function; destroyed?: Function; // assets directives?: { [key: string]: Object }; // 指令 components?: { [key: string]: Class<Component> }; // 子元件的定義 transitions?: { [key: string]: Object }; filters?: { [key: string]: Function }; // 過濾器 // context provide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any }; inject?: { [key: string]: string | Symbol } | Array<string>; // component v-model customization model?: { prop?: string; event?: string; }; // misc parent?: Component; // 父元件例項 mixins?: Array<Object>; // mixins傳入的資料 name?: string; // 當前的元件名 extends?: Class<Component> | Object; // extends傳入的資料 delimiters?: [string, string]; // 模板分隔符 // 私有屬性,均為內部建立自定義元件的物件時使用 _isComponent?: true; // 是否是元件 _propKeys?: Array<string>; // props傳入物件的鍵陣列 _parentVnode?: VNode; // 當前元件,在父元件中的VNode物件 _parentListeners?: ?Object; // 當前元件,在父元件上繫結的事件 _renderChildren?: ?Array<VNode>; // 父元件中定義在當前元素內的子元素的VNode陣列(slot) _componentTag: ?string; // 自定義標籤名 _scopeId: ?string; _base: Class<Component>; // Vue _parentElm: ?Node; // 當前自定義元件的父級dom結點 _refElm: ?Node; // 當前元素的nextSlibing元素,即當前dom要插入到_parentElm結點下的_refElm前 }