VUE学习

1.v-bind可以动态绑定属性,使用方式v-bind:属性名='data里面的属性'

v-bind的简写方式 :属性名='data里面的属性'

v-bind动态绑定类名儿 对象的形式

2.v-for渲染数组和对象

3.v-model指令只能在input/textarea/select中使用

4.v-on指令用来监听dom事件
1.使用方法:在标签的属性位置写v-on:任意的事件类型='执行的函数'
2.简写:@任意的事件类型='执行的函数'
3.通过执行函数添加参数
4.通过执行函数中添加$event参数传递事件对象
5.事件修饰符 .stop .prevent
6.按键修饰符 .enter

5.v-if 通过控制dom来控制元素的显示和隐藏(开销大)
v-show 通过控制样式display:none来控制元素的显示和隐藏
使用场景:涉及到大量dom操作的时候 需要使用v-show
涉及到异步数据渲染的时候 需要使用v-if

6.解决闪烁问题
给闪烁的元素加上v-cloak指令 [v-cloak]{ display:none }
当vue实例结束编译之后 v-cloak指令会被删除

7.案例-列表展示/删除/添加
删除:this.list.splice(index,1);
增加:this.list.push();
无数据提示显示隐藏:<tr v-if="list.length==0"><td>没有品牌数据</td></tr>

8.mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)
注意:mounted钩子函数的名字不能随便取,而且它不能写在methods属性

9.ref属性表示对dom元素的引用,它的值可以随便取,但不能重复

10.自定义指令通过Vue.directive()创建,参数一:自定义指令的名字(小写),
参数二:自定义指令的配置项

11.过滤器 Vue.filter() 参数一 过滤器的名字 参数二 过滤器的处理函数,此函数的默认参数是需要过滤的数据

12.计算属性是根据data中已有的属性,计算得到一个新的属性
创建计算属性通过computed关键字,他是一个对象

13.watch监听器用来监听data中的数据的值,只要监听的数据一变化 他就能执行相应的函数

注意:开发时,能用computed实现的时候,就用computed实现
需要执行异步操作的时候,就要用到watch

14.深度监听(这里监听的user是个对象)

15.VUE动画
过渡和动画:css类名

过渡和动画:css类名(需引入animate.css)

javascript钩子

然后在methods中定义beforeEnter enter....方法

**

组件的创建

**

组件中使用事件和指令

父子组件的创建
通过components属性创建子组件

父组件像子组件传值

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复