目录
VUE:减少不必要的DOM操作,提高渲染效率。通过框架提供的指令,前端只需要关心数据的业务逻辑,而不需要再关心DOM如何渲染。
后端主要思想是MVC,前端主要思想是MVVM。
对于后端而言,M为Model层,用于对数据库进行操作,V为视图层,C为业务逻辑层。
对于前端而言,MVVM的核心就是VM,它是M与V的中间操作者。这里的M是用Ajax向后端提交数据,V是网页界面也就是页面中的HTML结构。需要注意的是,V与M是相独立的,不可直接交互,即我们不可以将M中的数据直接渲染到网页界面中。因此如果V想要从M中获取数据,需要调用VM,同理当网页界面V想要保存数据到M中也需要VM做处理。(这也就是那句话,数据的双向绑定是由VM提供的!)
在此图片中,<div></div>就是MVVM中的V,即页面元素,我们new出来的vm对象就是MVVM中的VM,通过这个vm对象我们可以将数据直接渲染到页面中。最后vm对象中的data就是M,即数据,用来保存页面中的数据。
v-cloak、v-text、v-html的区别
1、当网速很慢时msg会出现闪烁问题,即没有显示正确。而v-cloak可以解决闪烁的问题,在<div v-cloak>添加该指令,并在style中写下v-cloak的样式,display:none。
而v-text是没有闪烁的,使用格式为:<div v-text='msg'>。
然而之所以有时候用v-cloak有时候用v-text是因为,v-cloak不会覆盖后面的元素,而v-text会覆盖。也就是v-text只能显示msg的值,不可以添加新的值。
2、v-html是可以将vm中的msg带有网页标签的内容以正确内容显示,其次v-html与v-text一样会覆盖后面的值。
v-bind
是vue中提供的用于绑定属性的指令。
v-bind:属性比如v-bind:title可以简写为:title
v-on
v-on:事件绑定机制。缩写是@
在script的methods中写方法。
在VM实例中如果要获取data上的数据,或者methods的方法,必须通过this.数据属性名、this.方法名调用。需要注意是setInterval中的this是指向window的。我们可以用es6方式。
其中.stop与.self都可以阻止冒泡,但是stop阻止的是其他所有元素的冒泡,self阻止的是自身的冒泡行为。
V-model
实现数据双向绑定(只有它可以实现双向数据绑定)
v-for指令
可循环普通数组,对象数组,对象以及普通数字。
注意:v-for循环中的key值默认应该绑定好指定唯一字符串/数字类型,否则容易出现bug,因为key默认是指向索引的,所以当在添加或删除元素时,key原本所指向的值索引改变了,那么key就不会指向它了。若key绑定好唯一值,那么即使索引发生改变,key依旧指向该值。
v-if与v-show
过滤器
过滤器定义格式:Vue.filter('过滤器的名称', function(){})
过滤器调用格式:{{name|过滤器名称}} name是要过滤的内容,作为参数可传递给function。
1、在调用过滤器时可以调用多个过滤器,调用格式为{{name|过滤器名称|过滤器名称2}}
2、在调用过滤器时,过滤器名称可以加参数,此时在定义的时候是function中加参数,该参数就是后续比如替换时用到的参数。参数可以加多个。
3、过滤器需在Vue实例之前写为全局过滤器。格式为:
4、在Vue实例中写过滤器为私有过滤器,格式为:
注意当私有过滤器与全局过滤器名称一致的时候,会优先调用私有过滤器。
padStart方法(es6中字符串的新方法)
padStart(maxLength,fillString' '):maxLength是字符串长度,fillString是填充字符。
比如时间的填充以前这样写(判断):
可以这样写:
自定义按键修饰符
在Vue中有给定的一些按键
我们的使用格式:
如果是普通按键vue没有给定,我们可以用每个按键的对应的键码。比如(当点击f2时会执行该方法 f2键码为113):
此外也可以自己定义:
这样在按f2按键时也会执行该方法了。
自定义全局指令
1、首先directive()是定义全局的指令
2、这个案例是想定义获取焦点的指令,所以指令的名称为focus。也可定义其他指令名称。
3、指令在定义时不加v-,在调用时需要加v-。
4、对于参数2是对象,里面bind是将指令绑定到元素上。
5、在函数中的el是原生js对象,比如input这个对象,因为元素js对象是有focus函数的。
6、所以bind中加el就是将input绑定到该定义的指令,但是绑定的时候元素只在内存中,没有渲染到界面中。所以我们需要插入DOM元素后再调用focus方法才会有用。所以el.focus()要写在inserted中。
7、update是当DOM元素一更新就立即执行。
这个是设置字体颜色指令,这里是在bind中改变的。
简单概况:行为在inserted,样式在bind中。
钩子函数的参数
自定义私有指令
类似于过滤器的私有指令的定义,在vue实例中定义,加s。具体如下:
注意是指令名称要加' '。
私有指令在这种情况下可以简写
简写形式为:
生命周期
创建阶段![](https://i-blog.csdnimg.cn/blog_migrate/3b7b12eb81b785fcef25e8db38a2d597.png)
运行阶段
注意:只有当数据更新的时候beforeUpdate()函数才会触发。
销毁阶段