vue学习笔记

  • 时间:
  • 来源:互联网
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/y13488733540/article/details/103216639

1.框架和库的区别:
框架:是一套完整的解决方案,对项目的侵入性较大,项目如果要重新更换框架,则需要重构整个项目。
库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求。
2.MVC跟MVVM的区别
在这里插入图片描述
3.v-cloak是为了解决闪烁问题/不会覆盖标签内原有的的值,配合样式使用
在这里插入图片描述图片描述
4.v-text这种赋值方式默认没有闪烁问题/并且会覆盖标签内原有的的值
5.v-html是渲染html标签
6.v-bind是vue中提供的用于绑定属性的指令,v-bind中可以写合法的表达式
vue会把引号里的数据当成js来执行,所以也可以这样写
在这里插入图片描述
注:el是要挂载的id
v-bind:可以在vue中简写做:
在这里插入图片描述
7.vue不直接操作dom,vue中提供了v-on事件绑定机制
在这里插入图片描述
在这里插入图片描述
v-on:可简写为@
在这里插入图片描述

8.在vue实例中,如果想要获取data里面的数据,或者想要调用methods中的方法,必须使用this.属性数据名或this.方法名来进行访问,这里的this就表示我们new出来的vue
9.vue实例会监听自己身上data中所有数据的改变,只要数据一发生变化,就会自动把最新的数据,从data上同步到页面中【优点:程序员只需要关心数据,不需要考虑如何重新把数据渲染到页面上】
注:箭头函数可以解决this指向问题,箭头函数内部的this永远和箭头函数外部的this保持一致。
10.事件修饰符
.stop阻止冒泡机制 (注:冒泡机制由内而外,从子元素到父元素)
在这里插入图片描述
.prevent阻止默认事件(例如阻止a 标签的默认跳转事件,或阻止表单的submit事件)
在这里插入图片描述
.capture捕获触发事件 (注:捕获事件由外而内,从父元素到子元素)
在这里插入图片描述
.self只点击自己才会触发事件,冒泡捕获通通不care

.once只触发一次事件

注:事件修饰符可以串联
在这里插入图片描述
注:stop跟self的区别是:stop可以阻止全部冒泡,self只能阻止自身的冒泡
11.v-modle实现双向数据绑定 注:v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定,v-modle只能应用在表单元素中
在这里插入图片描述
12.vue中通过属性绑定为元素设置class样式
在这里插入图片描述
注:class要用‘’包裹,要不然vue会直接找data里面定义的数据,找不到会报错
在这里插入图片描述
13.vue中通过属性绑定为元素设置style行内样式

注:对象内属性如果中间有-符号的话,必须给属性加单引号‘’
在这里插入图片描述
14.v-for循环渲染
循环数组
在这里插入图片描述
循环对象(在遍历对象身上的键值对的时候,除了有val,key,在第三个位置还有一个索引,如v-for=""{{(var,key,i) in user}})
在这里插入图片描述
v-for配合组件使用,必须要绑定key,保证数据唯一性
在这里插入图片描述
15.v-if跟v-show的区别
v-if每次都会删除或重新创建元素、有较高的切换性能消耗
v-show每次不会重新进行dom的删除很创建操作,只是切换了元素的display:none;样式,有较高的初始渲染消耗
如果元素涉及到频繁的切换,最好不用v-if,如果元素可能永远也不会显示出来,则推荐使用v-show.

注:在vue中,使用事件绑定机制,为元素制定处理函数的时候,如果加了小括号,就可以给函数传参数

本文链接http://element-ui.cn/news/show-155.html