VUE学习

目录

v-cloak、v-text、v-html的区别

 v-bind

v-on 

 V-model

 v-for指令

v-if与v-show

 过滤器

 padStart方法（es6中字符串的新方法）

 自定义按键修饰符

 自定义全局指令

钩子函数的参数

自定义私有指令

 生命周期

 创建阶段​

 运行阶段

 销毁阶段

---

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。具体如下：

 注意是指令名称要加' '。

私有指令在这种情况下可以简写

简写形式为：

 生命周期

 创建阶段

 

 

 运行阶段

 注意：只有当数据更新的时候beforeUpdate()函数才会触发。

 销毁阶段