首页 > 其他 > 详细

Vue常用指令系统 Vue 属性

时间:2020-12-09 15:15:49      阅读:24      评论:0      收藏:0      [点我收藏+]
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前
}

  

 
 

Vue常用指令系统 Vue 属性

原文:https://www.cnblogs.com/zzyua/p/14107512.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!