1. 程式人生 > 實用技巧 >Vue常用指令系統 Vue 屬性

Vue常用指令系統 Vue 屬性

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前
}