首页  思维导图  详情

VUE

2018-05-24 21:23:55   0  举报





仅支持查看

AI智能生成

vue基础技术点

vuejs

作者其他创作

大纲/内容

数据绑定

指令

修饰符

参数

自定义指令

Vue.directive(id, definition)

钩子函数

bind:初始化时调用一次

update:初始化之后调用一次，以后每次数据变化时调用

unbind:指令从元素上解除了调用

指令实例属性

name:当前指令的名称

expression:指令表达式，即 v-xxx="expression"中的expression 不包括参数或过滤器，如： v-xxx="expression | filterA"，只包括expression

arg:参数，如: v-xxx:href.a.b,获取到的是href,不包括后面的修饰符

modifiers:指令的修饰符，此值为键值对象，如: v-xxx:href.a.b,获取到的是{"a":true,"b":true}

descriptor:指令解析的结果

对象字面量: <div v-my-directive="{a:1}"> 注意：对象字面量与twoWay同时使用时会报警告错误，因为对象字面量对象无法双向

字面修饰符: 用于将字符串当作参数传递指令 <div v-demo.literal="a in b"></div>

元素指令： Vue.elementDirective()

params

动态params,可以使用paramsWathcer临控

deep：当指令值为对象时，设置此值为true，则当对象属性发生改变时，触发update挂钩

twoＷay：当需要在指令内操作vue实例时(this.set())，将此项设置为true

acceptedStatement:true,允许使用内联语句

terminal指令

priority:3000 指令优先级，普通指令优先级1000, terminal指令优先级2000, 流程指令v-if v-for始终拥有最高优先级

常用指令： 1)指令的值通常皆为从data/props等传的数据字段名如： v-show="ok",ok是动态数据字段名，如data:{ok:true},如想传静态值，请使用修饰符【literal】 2)指令的值不需要使用{{}}表达式，此点需要与数据绑定区别开

v-if

v-else

template v-if

v-for

$index

别名

数组变动检测

变异方法

替换数组

$set

$remove

freeze

对象-v-for

值域-v-for

v-show

组件警告

v-bind

表达式

正常绑定数据 {{msg}}

表达式常见问题：

如果在初始化data数据格式时： data:{ a:null } 而之后通AJAX或组件完成后修改了a的值，如： a={b:3} 并且在模板中使用{{a.b}}来绑定数据则可能会报错或警告，原因是在初始化时，无法确定 a.b是否存在，并没有将此属性值缓存正确的写法为{{a && a.b}}，当a存在时，再绑定b值

数据只绑定一次，以后数据修改不响应到VIEW上 {{*msg}}

绑定原始HTML {{{html}}}

绑定HTML属性 id="item-{{id}}"

javascript表达式 {{a ? true:false}}

过滤器 { message | capitalize }}

filterBy

orderBy

capitalize

自定义过滤器

单向过滤器

双向过滤器

局部过滤器

表单元素

v-model

checkbox: 单个checkbox绑定true/false 多个checkbox绑定数组值

绑定动态值方法: v-bind:true-value="a" v-bind:false-value="b" a和b皆为从data或props的动态数据字段名

radio: 绑定value值

<input type="radio" v-model="pick" v-bind:value="a"> 绑定动态值

select: 绑定多个选项加 mutiple属性

<option v-bind:value="{ number: 123 }">123</option> 绑定动态值

特殊参数

lazy

<input v-model="msg" lazy> 即：不会在输入内容后马上同步数据，而是在失焦时才同步数据

debounce

<input v-model="msg" debounce="500"> 同步数据延迟， 1）与lazy不同，此处数据会在内容输入延迟500ms后同步数据 2）此处不会延迟input事件，只是延迟同步数据到data上的时间，即：a)因为要监听数据同步，需要使用$watch监听.b)如果元素上定义了input事件监听，不会受此参数影响

number

<input v-model="age" number> 自动将用户的输入转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）

数据处理

计算属性

$watch

分支主题

获取数据

数据传递

VUE实例

VUE实例生命周期事件

init

created