vue常用知识点整理

1双向数据绑定 v-model

for渲染数据  v-for   实际就是for  in 模式

------------------

2判断  v-if   v-else

多个<template v-if="x>2"><div><span></span></div></template v-else="2>3"><template></template>

------------------

3v-show 元素始终渲染在dom元素中

4计算属性有缓存 vue更新的时候 不会跟着同步更新

5过滤属性   {{字段|过滤器名字}}

全局  vue.filter('name',function(){})

局部new Vue({el:#app,filters:{}})

6生命周期:实例化vue的过程

7v-on 绑定并监听dom事件

v-on="click:clickFunction"  function clickFunction(){}  //函数第一个参数为事件对象ev        ev.target    ev.targetVM=>指向触发事件的vm

8事件修饰符   stop阻止冒泡  prevent阻止默认事件  capture事件捕获  self自身执行 once只执行一次

键盘修饰符  delete  enter esc ...等等

9双向数据绑定到表单    v-model创建双向数据绑定

select multiple允许多选属性

10a)lazy 属性       input v-model会在input事件时更新数据  可加入lazy属性  =》  变input事件为change事件

b)number属性     可添加number 转换v-model的值为数字

select的option支持过滤器

c)输入防抖 debance   并不对底层输入事件debance而是对写入事件 debance

11自定义指令directive

Vue.directive('指令名',function(){

bind(){}, //做绑定 只执行一次  在第一次绑定的时候

update(){}   //第一次绑定时 同步更新            每更新时更新

unbind(){}//解绑时  只执行一次

})

如果只需要更新时执行函数可 Vue.directive('自定义指令名',function(){})

所有的钩子函数都会被复制到自定义指令当中   该指令为所有钩子函数的this

指令对象的公开属性(只读)

el vm  expression表达式   arg指令的参数  raw未被解析的初始表达式   name 不带前缀的指令名

Vue.directive('自定义指令名',function(){})

v-自定义指令名=“要传入的已有属性参数:要传入的值”

12动态绑定class

vue的分隔符默认是双括号{{}},分隔符里面的字符串默认为数据变量

一个dom元素中可以同时出现原生class 和v-bind:class

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容