【微服务】137：Vue之生命周期钩子

今天是刘小爱自学Java的第137天。

感谢你的观看，谢谢你。

学习计划安排如下：

Vue的深入学习，emm准确地说还不能算是深入学习，我有点高估自己的学习进度了。

本来打算两天时间做一个基础入门的，毕竟教程也就一天的内容，看来计划赶不上变化。

vue中三大常用属性的小结、生命周期钩子的了解，以及指令的初步接触。

指令有点多，只能留到明天继续补全了。

一、回顾与生命周期

补充说明三大属性，当然vue肯定不止这些，只不过时间有限，只学下最常见的。

1回顾

每次new一个Vue实例都需要关联模板，Vue会基于此模板进行视图渲染。

el属性：指定视图模板

这里是通过el+id选择器指定视图模板，例子中也就是id为app的div标签。

当然还可以通过template来指定视图模板，这种方式我们暂且就不学了。

data属性：指定数据模型

data也就对应着数据模型，数据相关的都可以放在这里面。

methods属性：指定方法模型

注意是methods，后面有个s不要忘记了，一开始我直接写的method，就出了问题。

其实这也很好理解，methods里面是存放方法的，肯定不止一个，故用复数形式。

例子中helloVue是方法名，其中function可以省略，直接写一个helloVue方法。

2生命周期钩子

钩子，就可以将其理解成回调函数，Vue为生命周期中的每个状态都设置了钩子函数。

每当Vue实例处于不同的生命周期时，对应的方法就会被触发调用，其中生命周期有好几个状态，我们只学最常见的两个：

created

代表在vue实例创建后，通过控制台我们可以发现：在创建vue实例之后，Vue才会调用create方法。

beforeCreate

代表在vue实例创建之前，通过控制台我们可以发现：在创建vue实例之前，Vue会先调用beforeCreate方法。

注意：这两个函数这里是用的省略写法，省略了function这个关键字。

3关于this

this和Java中的意思是差不多的，this用一句话说明就是：“谁调用我，它就是谁。”

我们做一个测试，同时引入几个知识点：

setTimeout()

设置一个定时器，有两个参数：第一个参数为一个函数，第二个参数为定时时间，例子中也就是2000毫秒后执行函数。

此时this指的是Window对象，因为在js中设定了定时器，时间到了后，会由window去调用前面的函数并执行，所以this指的就是它。

setTimeout()箭头函数

该方式为ES6中的语法，这块我们没有专门学，知道有这个函数即可。

同样是setTimeout()方法，只不过写法不同，为何这里的this指的又是当前vue对象本身？

箭头函数底层做了处理，将其转化成了对应的vue对象，显然这种方式是我们所需要的，以后基本都以箭头函数这种写法为主。

二、插值闪烁

有时使用电脑或者手机，因为网速较慢，页面加载很慢会出现看到源码的情况，做个测试：

在浏览器中设置网络为3G网络，在刷新页面时会先看到{}，大约2秒后，页面加载完成才会显示正常的数据。

这个也好理解，页面是从上到下执行的：

当页面加载到div标签时，JS还未加载到，所以name的值是多少并不知道。

当页面加载完毕后才能显示正确的数据。

这种情况就叫做差值闪烁，以差值闪烁为例子，引出对于“指令”的学习。

三、指令

什么是指令？

指令是指带有 v-前缀的特殊属性。

例如在回顾中的v-model，代表了就是view和model的双向绑定。

那差值闪烁的问题怎么解决呢？

1v-text和v-html

指令：v-text

将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出。

指令：v-html

将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染。

这个就和jQuery中的html方法太像了。

2v-model

这个指令我们昨天就接触过，回顾中也有，是应用在input标签中的text类型中。

其实目前v-model的可使用元素有：

input，select，textarea，checkbox，radio，components(自定义组件)

除了最后一项，其它都是表单的输入项，我回顾了一下我以前的form表单笔记。

vue中将单选框radio，复选框checkbox单独拎出来了，这些本来是属于input的。

我们以复选框作为一个例子。

checkbox

这就是一个复选框，用v-model指令将它们一一和hobbys这个属性绑定。

hobbys.join()可以将获取的元素以参数内容的形式隔开。

hobbys:[]

这个符号所表示的就是一个数组，和Java中是一样的。

其中值得注意的是：

多个CheckBox对应一个model时，model的类型是一个数组；单个checkbox值是boolean类型。

最后

时间受限，剩下的只能明天接着说了。

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。